Is the color shades generator free?
Yes. It is completely free to use, with no signup, no account, and no paywall.
Do I need to install anything?
No. It runs in any modern browser on desktop or mobile, with nothing to download and nothing to configure.
Does it stay local?
Yes. All the color math runs entirely in your browser, and nothing is sent to a server.
Why is the first swatch black and the last one white?
Because the scale is constructed by mixing the base colour all the way toward black at one end and all the way toward white at the other, and at the extremes the mix is complete. That is a legitimate way to build a shades-and-tints ramp and it has a consequence worth knowing: the two endpoints are the same for every input colour, and the base colour itself falls between the two middle swatches rather than being one of them. If you need your exact brand colour in the palette, keep it separately.
Why do the steps not look evenly spaced?
Because sRGB is gamma-encoded and the human eye is not linear. Equal arithmetic steps between two colours produce visual steps that bunch up at one end and spread at the other, so several of the dark swatches read as nearly the same colour while the light ones look distinctly different from each other. This is not a flaw in the arithmetic, it is a mismatch between the arithmetic and perception, and it is the reason perceptual colour spaces such as OKLCH exist.
Can I use adjacent shades for text and background?
No. WCAG requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text, and two neighbouring steps in a ten-step ramp are far below that. In practice you need a separation of about five steps before a pair reaches text-safe contrast, and even then it depends on where in the ramp they sit, because the ratio is not linear in the step number. Always check the actual pair with a contrast checker rather than trusting the step distance.
How do design systems build their colour scales?
In a perceptual colour space, almost always. The modern approach is to work in OKLCH, fix a set of lightness values, and generate each step by holding the hue and chroma roughly constant while stepping the lightness, with small adjustments to keep the colours inside the displayable gamut. That produces a ramp where each step feels like the same size, and where the same lightness index gives comparable contrast across every hue in the system. Browsers have supported oklch() in CSS since 2023, so you can express it directly.
Is the palette generated locally?
Yes. The shades are computed by arithmetic in your browser, so nothing about your brand colours is transmitted.