OKLCH Color
Palette Generator
Generate palettes using OKLCH—the modern, perceptually uniform color space. Colors that look consistent, contrast that's predictable, and gradients that don't turn muddy.
OKLCH solves the biggest problem with HSL: colors with the same "lightness" value now actually appear equally light to human eyes. Learn more about OKLCH →
The color space designed for humans
OKLCH stands for OK Lightness Chroma Hue—a modern color space where values map to how humans actually perceive color. Unlike HSL, where "50% lightness" produces wildly different perceived brightness depending on the hue, OKLCH ensures consistent perceptual lightness across all colors.
This matters because consistent lightness means predictable contrast ratios, which means accessible designs without guesswork. When you set text at 90% lightness on a 15% lightness background, you know exactly how readable it will be.
OKLCH is part of CSS Color Level 4 and is supported in all major browsers (Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+). It's not experimental—it's production-ready.
Same lightness, different brightness
HSL's lightness isn't perceptually accurate. OKLCH fixes this.
Same HSL lightness (50%), but yellow appears much brighter than blue. This makes consistent palettes nearly impossible.
Same OKLCH lightness (70%), and they actually look equally light. Consistent palettes become easy.
Why OKLCH is better for palettes
Perceptually Uniform
Colors with the same lightness value actually look equally light. No more guessing why yellow looks brighter than blue at the same "lightness."
Better Gradients
Gradients between OKLCH colors avoid the muddy middle that plagues RGB. Smooth, vibrant transitions every time.
Predictable Contrast
When lightness is perceptually accurate, WCAG contrast calculations become reliable. Build accessible palettes with confidence.
Wide Gamut Ready
OKLCH can represent colors outside sRGB, taking advantage of modern P3 displays. Future-proof your color system.
Ready-to-use OKLCH code
Every palette exports with OKLCH CSS custom properties.
:root { --primary: oklch(65% 0.20 145); --secondary: oklch(60% 0.19 250); --accent: oklch(65% 0.24 25); --neutral: oklch(60% 0.02 250); --background: oklch(15% 0.02 260); }
colors: { primary: 'oklch(65% 0.20 145)', secondary: 'oklch(60% 0.19 250)', accent: 'oklch(65% 0.24 25)', neutral: 'oklch(60% 0.02 250)', background: 'oklch(15% 0.02 260)', }
OKLCH questions answered
What is OKLCH and why should I use it?
OKLCH is a modern color space where L (lightness), C (chroma), and H (hue) map to how humans actually perceive color. Unlike HSL, where "50% lightness" yellow looks much brighter than "50% lightness" blue, OKLCH ensures equal lightness values actually appear equally light. This makes creating consistent, accessible palettes much easier.
How is OKLCH different from HSL?
HSL's lightness isn't perceptually accurate—yellow at 50% lightness looks much brighter than blue at 50% lightness. OKLCH fixes this with perceptual uniformity. Both use hue (0-360°), but OKLCH uses chroma (0-0.4) instead of saturation (0-100%). The result: predictable color adjustments and consistent contrast ratios.
Is OKLCH supported in all browsers?
Yes! OKLCH is part of CSS Color Level 4 and is supported in all major browsers since 2023: Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. For older browsers, we provide HEX fallbacks alongside OKLCH values in our exports.
Can I export palettes in OKLCH format?
Absolutely. Aura Mixer exports every palette in multiple formats: OKLCH, HEX, RGB, and HSL. You get CSS custom properties with OKLCH values plus Tailwind-compatible configurations. Use whichever format fits your project.
How does OKLCH help with accessibility?
Because OKLCH lightness is perceptually accurate, contrast calculations become reliable. When you set text at 90% lightness on a 20% lightness background, you know exactly how much contrast you're getting. No more surprises when testing against WCAG guidelines.
Generate your OKLCH palette
Get a complete 5-color palette with OKLCH exports. Perceptually uniform, WCAG-ready, and future-proof.
Generate OKLCH PaletteLearn more about color formats