Palette generator
Generate a perceptually even color scale and harmonies (complementary, analogous, triadic) from any base color, in OKLCH.
Click any swatch to copy its hex.
What this palette generator does
Enter one base color and get a complete starting palette: a 9-step lightness scale of that hue built in OKLCH, plus complementary, analogous and triadic harmony colors. Every swatch shows its hex and copies it on click. It is meant for the moment you have a single brand color and need the surrounding system — backgrounds, borders, hover states, accents — without hand-picking each one.
How to use it
- Type any CSS color in Base color (hex,
rgb(),hsl(),oklch()or a name) or pick one with the color input. - Read the Scale row: nine swatches from the lightest tint to the darkest shade of your hue.
- Check the Complementary, Analogous and Triadic rows for accent candidates.
- Click a swatch to copy its hex; a check mark confirms the copy.
How the scale is built
The ramp is computed in OKLCH, the perceptual color space from CSS Color Level 4 where L is lightness, C is chroma and H is hue. The tool keeps your hue fixed and walks lightness in nine even steps from 0.96 down to 0.14. Chroma is scaled down toward both ends so the extremes stay inside the sRGB gamut.
For #6b46ff the scale comes out as:
| Step | Hex | Suggested token |
|---|---|---|
| 1 | #e2deff | --brand-100 (subtle background) |
| 2 | #c1b9ff | --brand-200 |
| 3 | #a294ff | --brand-300 (border) |
| 4 | #846eff | --brand-400 |
| 5 | #6a44fd | --brand-500 (base-ish) |
| 6 | #5020d0 | --brand-600 (hover) |
| 7 | #3900a5 | --brand-700 (active) |
| 8 | #26007c | --brand-800 |
| 9 | #170054 | --brand-900 (text on light) |
Because the steps are perceptually even, the same scale works in both light and dark themes: step 1 and step 9 are roughly equidistant from mid-grey, so you can mirror the ramp when switching themes. Text in step 9 on a step 1 background passes WCAG AAA comfortably — confirm pairs in the contrast checker.
Harmony colors explained
The harmonies rotate hue in OKLCH while holding your base lightness and chroma, so each accent feels as bright and saturated as the base:
| Harmony | Hue offset | For #6b46ff | Typical use |
|---|---|---|---|
| Complementary | +180 | #917100 | High-contrast call-to-action against the brand color |
| Analogous | −30, +30 | #0068ff, #a622d8 | Secondary surfaces, gradients, illustrations |
| Triadic | +120, +240 | #df0000, #009b44 | Chart series, status colors (error, success) |
Because the rotation happens in OKLCH rather than HSL, a complementary color never ends up looking washed out next to the base. The downside is that a rotated color can land outside sRGB; when that happens it is clipped to the nearest hex, which is why a very saturated base sometimes produces a complementary that looks slightly duller than expected. Lowering the base chroma a little fixes it.
Common mistakes
- Using the scale for text without checking contrast. Steps 1 to 4 on white usually fail AA for body text; use 6 and darker for text, 1 to 3 for backgrounds.
- Expecting the middle step to equal your base. The ramp is a fixed lightness grid. Keep the original as
--brandand use the scale around it. - Mixing HSL-generated and OKLCH-generated colors. They will not line up visually. Pick one method for the whole system.
Related tools and snippets
- Tints and shades generator — a quicker strip that mixes straight toward white and black when you only need a few variants.
- Contrast checker — verify text/background pairs from the scale against WCAG AA and AAA.
- Color converter — see any swatch as
oklch()so you can store tokens in the modern syntax. - Color mixer — blend two scale colors to fill a gap between steps.
- Gradient generator — use two analogous colors as stops for a smooth OKLCH gradient.
FAQ
How many colors does it generate?
Fifteen. A 9-step lightness scale of your base hue from near-white to near-black, one complementary color, two analogous colors and two triadic colors.
What is the difference between complementary, analogous and triadic?
Complementary is the hue 180 degrees opposite on the wheel (maximum contrast). Analogous colors sit 30 degrees either side (harmonious, low contrast). Triadic colors are 120 and 240 degrees away (balanced, vivid).
Why generate the scale in OKLCH instead of HSL?
In OKLCH equal lightness steps look equal to the eye, so the ramp has no sudden jumps. HSL lightness is not perceptual: a 50% yellow looks much brighter than a 50% blue, which makes HSL ramps uneven.
Does the scale keep my exact base color?
Not necessarily. The scale is a fixed set of lightness levels (96% down to 14%) that hold your hue, so the step nearest your base is close but usually not identical. Use the base itself as your main token and the scale for the surrounding shades.
Can I use this as a Tailwind-style 50 to 900 ramp?
Yes. The nine steps map naturally to 100, 200, 300, 400, 500, 600, 700, 800 and 900. Copy each swatch into your config or CSS custom properties in order.
Why do the lightest and darkest steps look less saturated?
Chroma is tapered toward the ends of the scale on purpose. Very light or very dark colors with full chroma fall outside the sRGB gamut and would be clipped to a visibly wrong hue.