Shades & Tints Generator
Generate darker shades and lighter tints from a CSS color.
Processing stays in your browser. Uses sRGB mixing with black and white. Check text contrast before using a generated color for a UI state.
How to use the shades & tints generator
Generate darker shades and lighter tints from a CSS color. Complete the base color, steps each side (2–10) fields above. Choose Run tool, review the output and visual preview where available, then copy or download the result.
Example
A red base produces darker reds toward black and lighter reds toward white.
Good to know
Uses sRGB mixing with black and white. Check text contrast before using a generated color for a UI state.