Color Shade Generator
Generate darker shades of a color by mixing it with black in even steps. Enter one color in any CSS format, choose 2 to 20 steps and a mixing space, and get a table with HEX, RGB, HSL and OKLCH values for every shade, starting from the original color. sRGB mixing matches classic shade tools and Sass, while OKLab gives perceptually even steps. Ideal for building UI color scales.
Frequently asked questions
What is a shade?
A shade is a color mixed with black. It keeps its hue and gets darker, unlike a tint, which is mixed with white, or a tone, which is mixed with gray.
How are the steps spaced?
With N steps, row k mixes the color with (k - 1) / N black, so 10 steps give 0%, 10%, 20% and so on up to 90%. The first row is always your original color, and pure black is never part of the list.
What is the difference between sRGB and OKLab mixing?
sRGB mixing averages the gamma-encoded channel values, which is what Sass mix() with black and most classic shade generators do. OKLab mixing happens in a perceptual space, so the steps look more even in lightness and the darker shades keep more of their color.
Which input formats can I use?
Hex codes with or without #, CSS color names, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() and cmyk(). Enter one color per run.
How many shades can I generate?
Between 2 and 20 per run, 10 by default. The count includes the original color in the first row.
Which values does the table show?
For each step, the share of black, the hex code, rgb(), hsl() and oklch() in modern CSS syntax. RGB channels are whole numbers, HSL percentages have up to two decimals and OKLCH lightness and chroma up to four.
What happens to transparent colors?
The alpha of the input is kept for every shade, because black is mixed in at the same alpha. The hex codes then have 8 digits and the CSS functions end with the alpha after a slash.
What happens to colors outside sRGB?
Mixing uses the full color, but HEX, RGB and HSL can only show sRGB, so out-of-gamut steps are mapped into sRGB with the CSS Color 4 algorithm in those columns. The OKLCH column keeps the unmapped value.
How do I use the shades in CSS?
Copy the hex or oklch() values into custom properties such as --brand-600 and --brand-700. To mix in the browser instead, color-mix(in oklab, var(--brand) 80%, black) gives the same 20% shade as the OKLab setting.
Are darker shades automatically accessible?
No. Check text against each shade with a contrast checker, because a shade that looks dark can still fall below 4.5:1 against another dark color or against colored text.