Generate palettes where every color shares the same OKLCH lightness and chroma — the property that makes sets look genuinely uniform, which HSL cannot deliver. Hues spread evenly from your start angle; out-of-gamut hues are chroma-fitted and honestly flagged.
Generated locally in your browser — your colors, settings and code never leave this page.
The promise HSL could never keep
Every design system eventually attempts a set of category colors that look like equals — same weight, same brightness, different hues. In HSL the attempt fails structurally: equal S and L across hues produces yellows that glow and blues that brood, because HSL’s axes are arithmetic conveniences, not perceptual measurements. OKLCH is the space where the attempt succeeds — equal L genuinely looks equally light, equal C equally strong — and this generator is that success productized: fix L and C once, spread hues evenly, done.
Driving the two sliders
Lightness positions the palette’s role: 0.9+ makes background-tint families, 0.65–0.75 the accent sweet spot, 0.45–0.55 text-capable depths. Chroma sets the volume: under 0.05 reads neutral, 0.1–0.15 confidently colorful, 0.2+ approaches neon and the gamut boundary. Because every swatch shares the settings, the sliders tune the whole palette as one instrument — the experience that makes perceptual color click for newcomers.
The gamut asymmetry, surfaced honestly
sRGB’s ceiling varies wildly by hue — at L 0.75, yellows accept triple the chroma blues can hold. Equal-C palettes therefore collide with the boundary hue-by-hue, and tools face a choice: silently clamp (producing the unequal palette you tried to avoid) or disclose. This generator fits offenders to the boundary and names them, so “my equal palette looks unequal” arrives pre-diagnosed: lower C until the warnings clear, or accept documented compromises.
Downstream of the palette
The oklch() export drops into modern CSS as-is (hex fallbacks included); the token export feeds pipelines. Category systems should still visit the CVD tools — equal-lightness palettes lean entirely on hue for identity, exactly what color-blindness compresses; the Data Visualization Palette Generator’s categorical mode adds the lightness alternation that restores robustness. For single-color exploration at these coordinates, the OKLCH Color Generator is the companion instrument.
How to use the OKLCH Palette Generator
- Set the shared lightness and chroma for the whole palette.
- Choose the number of hues and the starting angle.
- Every swatch shares L and C – hue alone varies.
- Watch the gamut warnings at ambitious chroma; export as usual.
Frequently asked questions
What is special about a palette with shared OKLCH lightness?
Every color genuinely looks equally light and equally strong – the property designers try to fake in HSL and never achieve, because HSL lightness lies across hues. Badges, chart series or category colors built this way sit visually level, and text contrast is identical on all of them.
What L and C values should I start with?
UI accents: L 0.65-0.75, C 0.10-0.15. Backgrounds: L 0.9+, C under 0.05. Bold branding: L 0.6, C 0.18-0.22 and expect gamut warnings. The sliders make the trade tangible faster than any table.
Why do some hues trigger a gamut warning at my chosen chroma?
sRGB's ceiling varies enormously by hue – at L 0.7, yellows accept chroma beyond 0.2 while pure blues cap near 0.1. When a hue cannot reach your C, the generator fits it to the gamut boundary and tells you which ones compromised, instead of silently shipping unequal colors.
How do I pick the number of hues?
By what must be told apart: 4-6 for category systems humans track comfortably, up to 8-10 for decorative variety. Hues spread evenly from your start angle, so more hues means closer neighbors – the CVD tools can tell you when neighbors get too close.
What is the oklch() export for?
Native CSS: modern browsers accept oklch() directly, and tokens stored that way stay editable on the perceptual axes (bump all lightness by 0.05 in one sed pass). The export lists each swatch in both oklch() and hex for the fallback line.
Can I use this for chart series colors?
It is a strong base – equal weight prevents any series from dominating by vividness alone. For charts specifically also run the deutan check (Data Visualization Palette Generator does both jobs in one tool) since equal-lightness palettes lean entirely on hue for identity.
How does the start-hue control help brand alignment?
Set it to your brand hue's angle and the palette includes (or flanks) your brand color while the rest spread evenly from it – instant brand-anchored system palette. Find your brand's OKLCH hue with the RGB to OKLCH converter first.
