Generate a 6-step color palette (50, 100, 300, 500, 700, 900) with HEX values from any base color. Copy one shade or all as CSS variables.
Everything happens locally in your browser. Nothing is uploaded or transmitted.
Your base color is the 500 step. Lighter steps (50, 100, 300) interpolate toward white; darker steps (700, 900) interpolate toward black, in HSL space.
Design systems rarely use a single color — they use a ramp of related shades for backgrounds, borders, accents, hovers and text. This generator builds that ramp from one base color by interpolating in HSL (hue, saturation, lightness) space, where "lighter" and "darker" behave the way our eyes expect.
Your base color becomes the 500 step. The three lighter steps (50, 100, 300) are made by interpolating in HSL space toward white — lightness rises and saturation fades proportionally. The two darker steps (700, 900) interpolate toward black — lightness drops while hue and saturation are kept. The result is a smooth, predictable ramp around your base color.
Most design systems only need a handful of stops per color: a near-white tint, a light tint, a soft accent, the primary color, a darker hover state and a near-black shade for text. Steps 50, 100, 300, 500, 700 and 900 cover exactly those jobs without the noise of a 10- or 12-stop scale.
500 for primary actions and accents, 700 for hover and active states, 50 or 100 for subtle backgrounds and fills, 300 for borders and disabled states, and 900 for text on light backgrounds. This is the same role split most token systems (like Tailwind's) use.
No. A color value is just three numbers. Everything — HSL conversion, interpolation, HEX output and CSS variable generation — happens in JavaScript inside your browser. Nothing is stored or transmitted.
Not directly — the whole ramp is derived from the base color so the steps stay consistent with each other. To change a shade, pick a different base color (or nudge it) in the color picker and the entire palette regenerates instantly.
If you just finished with Color Palette Generator, the natural next steps are Color Converter, Color Contrast Checker, CSS Gradient Generator, or browse every tool in Privacy File Tools.