OKLCH Color Picker & Palette Generator
In old HSL, yellow looks blindingly light while blue looks dark at the exact same 50% lightness. The modern CSS oklch() space is perceptually uniform: equal Lightness guarantees consistent visual weight and unlocks the vibrant Display P3 wide-gamut spectrum.
:root {
--brand-color: oklch(65% 0.22 145);
--brand-light: oklch(92% 0.06 145);
--brand-dark: oklch(35% 0.16 145);
}How to use it
- Select a curated preset (Electric Violet, Cyber Neon, Vivid Emerald, Solar Amber, Ocean Sky).
- Fine-tune Lightness (L), Chroma (C), Hue (H), and Alpha (A) with responsive sliders.
- Explore the auto-generated 5-step design system tonal scale and complementary harmony swatches.
- Copy production-ready
oklch()CSS tokens alongside fallback HEX values.
How it works
Why OKLCH outperforms HEX, RGB, and HSL
OKLCH is a perceptually uniform color space aligned with human biology. Unlike HSL, where lightness numbers are inconsistent across different hues, OKLCH ensures L = 0.7 has the exact same perceived brightness whether the color is blue, green, or yellow, making accessible contrast predictable.
Display P3: Colors impossible in sRGB
Traditional HEX and RGB are locked into 1990s sRGB screens. Modern iPhones, Macs, and OLED devices render 25% more vivid color. OKLCH directly addresses this extended gamut for ultra-punchy neon accents without clipping.
/* Punchy wide-gamut accent inaccessible via standard HEX */
.cta-btn {
background: oklch(68% 0.28 145);
}Effortless Design System Scales
Building color tokens is trivial in OKLCH: lock your brand's Hue and Chroma, then generate predictable 100–900 lightness steps for background, hover, border, and text tokens effortlessly.
FAQ
What is browser support for OKLCH?
OKLCH is supported across all major browsers (Chrome 111+, Safari 15.4+, Firefox 113+, Edge 111+) with over 93% global adoption.
What is the Chroma value range?
Chroma represents color intensity. 0 is pure monochrome gray, 0.1–0.18 covers natural UI hues, and 0.22+ produces intense wide-gamut accents.
How to provide legacy browser fallbacks?
Use standard cascading fallbacks: write background: #4f46e5; first, followed by background: oklch(...);. Modern browsers will automatically use OKLCH.
