Mix colors directly in OKLCH with lightness, chroma and hue sliders — live preview, sRGB gamut warnings, and CSS output with hex/rgb/hsl fallbacks.
Generated locally in your browser — your colors, settings and code never leave this page.
Why designers are moving to OKLCH
In HSL, two colors with the same “lightness” can look wildly different — 50% yellow glows while 50% blue is dark. OKLCH (CSS Color Module Level 4) fixes exactly that: its lightness is perceptually uniform, chroma is comparable across hues, and changing hue does not change perceived brightness. That is what makes it the right space for design systems — and why Tailwind v4 rebuilt its palette in it.
The three sliders
- L (lightness) — 0% black to 100% white, perceptually even.
- C (chroma) — 0 is gray; ~0.05–0.12 muted UI colors; 0.15–0.25 vivid brand territory.
- H (hue) — the angle: ~30 red, ~140 green, ~260 blue.
The gamut warning, explained
OKLCH can describe colors no sRGB screen displays — high-chroma mid-tones especially. When your values leave the gamut, this generator shows the nearest displayable color (chroma reduced, hue and lightness kept) and tells you — the same fallback browsers perform. On wide-gamut (P3) displays some of those colors DO exist; the sRGB hex is the safe universal value.
Worked example
.my-element {
color: #2b7fff; /* sRGB fallback */
color: oklch(62.3% 0.214 259.8); /* modern browsers */
}Browser support
- oklch() works in Chrome 111+, Safari 15.4+ and Firefox 113+ (all 2023). The two-line fallback pattern above covers everything older — the generated CSS includes it.
Workflow
- Feed a chosen color into the Palette Generator for a full scale, or batch-convert existing colors with the HEX to OKLCH Converter.
How to use the OKLCH Color Generator
- Drag the Lightness, Chroma and Hue sliders.
- Watch the live swatch and the oklch()/hex/rgb/hsl values update.
- Heed the gamut warning if chroma exceeds what sRGB can display.
- Copy the CSS — it includes a hex fallback pattern for older browsers.
Frequently asked questions
Why use OKLCH instead of HSL?
OKLCH lightness is perceptually uniform: L 60% yellow and L 60% blue actually look equally bright, which HSL famously gets wrong. That makes OKLCH the right space for palettes and design tokens — change the hue, keep the perceived lightness. It is also how Tailwind v4 defines its own colors.
What does the gamut warning mean?
OKLCH can describe colors outside what sRGB screens display — high-chroma mid-tones especially. When your values leave the gamut, the preview shows the nearest displayable color (chroma reduced, hue kept) and the warning tells you, because browsers do the same fallback.
Which browsers support oklch()?
All modern ones — Chrome 111+, Safari 15.4+, Firefox 113+ (2023 onward). The generated CSS shows the two-line fallback pattern (hex first, oklch second) for anything older.
What are reasonable chroma values?
Neutral grays sit near 0–0.03, muted UI colors around 0.05–0.12, vivid brand colors 0.15–0.25. Above ~0.3 most hues leave sRGB at mid lightness — the warning will tell you exactly when.
