Palette Generator
Turn one brand color into an 11-step tint scale, annotated with WCAG contrast.
Part of design tools.
Used as --brand-500.
:root {
--brand-50: #f4f4ff;
--brand-100: #e9e9ff;
--brand-200: #d3d2ff;
--brand-300: #b8b4ff;
--brand-400: #9b90ff;
--brand-500: #8167ff;
--brand-600: #6946e4;
--brand-700: #522abe;
--brand-800: #3c0c97;
--brand-900: #28006d;
--brand-950: #19004c;
}Why 50 to 950
The eleven-step scale is a convention, not a standard: it comes from the way design systems name their tints, from the lightest wash used as a page background (50) to the near-black used for text (950). Sticking to it means your tokens drop straight into Tailwind, Material or Radix-shaped themes without anyone having to relearn the names. The 500 is the anchor — the color most people think of as “the brand color”.
Even steps mean even perceived lightness
Darkening a color by a fixed amount in HSL does not produce even steps: HSL lightness is arithmetic on RGB channels, so a yellow at 50% looks far brighter than a blue at 50%. This generator works in OKLCH, a perceptual space where a lightness of 0.62 looks the same whatever the hue. Each step targets a fixed OKLCH lightness, so the 600 of your blue and the 600 of your green carry the same visual weight on a page.
Chroma is a curve, not a constant
Holding chroma flat across the scale does not work: near-white tints cannot hold much saturation without leaving the sRGB gamut, and very dark ones turn muddy. So chroma follows a bell curve peaking around the 500, then any step that still falls outside sRGB has its chroma lowered — and only its chroma, which keeps the hue and the perceived lightness intact. That is why the extremes read as the same color family rather than drifting.
Read the contrast before you ship the palette
Each swatch shows its WCAG contrast ratio against white and against black, with the AA (4.5:1) and AAA (7:1) verdicts for normal text. That tells you, at a glance, which steps can carry body text on a white background — usually 600 and darker — and which are decorative only. For a specific foreground and background pair, the contrast checker gives the full verdict, and the color converter translates any step into the notation your codebase uses.
Greys, alpha and edge cases
A grey or near-grey base keeps a chroma of zero across the whole scale rather than having a hue invented for it out of rounding noise, so you get a neutral ramp you can actually use for borders and text. An alpha channel in the input is dropped: a translucent tint renders differently on every background, which is the opposite of what a design token should do.