OKLCH Color Wheel Picker
Escape the distortion of legacy HSL. Generate color harmonies where 50% lightness actually looks 50% bright across every hue on the spectrum.
OKLCH Color Harmonizer Studio
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#895AF6oklch(0.601 0.221 292.3)
Secondary
#F6895Aoklch(0.740 0.147 43.3)
Accent
#5AF689oklch(0.866 0.199 150.0)
Live UI Component Preview
Apex Analytics
Team Dashboard
$84,290
14,820
Optimal
Interactive Button & State Styles
Verify clickability, state contrasts, and visual weight across primary and secondary controls.
WCAG 2.1 Contrast Matrix
Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).
| Color Role | Hex | On Pure White (#FFF) | On Dark Obsidian (#0B0F19) | Recommended Usage |
|---|---|---|---|---|
Primary Base | #895AF6 | 4.32:1(AA (large text)) | 4.43:1(AA (large text)) | Best on Dark UI / Buttons |
Secondary | #F6895A | 2.43:1(Fail) | 7.88:1(AAA) | Best on Dark UI / Buttons |
Accent | #5AF689 | 1.40:1(Fail) | 13.66:1(AAA) | Best on Dark UI / Buttons |
50–950 Tailwind Shade Ramp
Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.
Ready-to-Use Code Snippets
// tailwind.config.js / CSS @theme
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F6F5FA',
100: '#EBE7F4',
200: '#C8B1FB',
300: '#A581F8',
400: '#7B47F5',
500: '#895AF6',
600: '#450BCB',
700: '#3709A5',
800: '#290679',
900: '#1A0057',
950: '#0F0033',
},
secondary: '#F6895A',
accent: '#5AF689',
}
}
}
};Why OKLCH is Superior to Legacy HSL and RGB
For decades, web developers have relied on HSL (Hue, Saturation, Lightness). However, standard HSL has a fatal mathematical flaw: human eyes are far more sensitive to green and yellow light than blue light. In HSL, pure yellow (hsl(60 100% 50%)) has a relative luminance of ~0.93 (blindingly bright), while pure blue (hsl(240 100% 50%)) has a relative luminance of ~0.07 (nearly black).
1. Perceptually Uniform Lightness
In OKLCH, the Lightness axis (L) is modeled directly on human ocular perception. If two colors share the same L value, they will appear equally bright, allowing programmatic accessible color pairs.
2. Uncapped Display-P3 Wide Gamut
Standard Hex and RGB are clamped to the 1996 sRGB color space. OKLCH unlocks up to 50% more vivid colors on modern OLED, iPhone, and MacBook retina displays.
Color Space Comparison: OKLCH vs HSL vs sRGB Hex
| Feature | OKLCH (CSS 4) | HSL | Hex / sRGB |
|---|---|---|---|
| Perceptual Uniformity | ✓ Yes (Exact human match) | ✗ No (Heavy hue distortion) | ✗ No (Hardware-based) |
| Wide Gamut (Display P3) | ✓ Yes (Unbounded) | Clamped to sRGB | Clamped to sRGB |
| Accessible Scale Generation | ✓ Trivial (Fixed L values) | ✗ Requires manual tweaks | ✗ High trial & error |
| CSS Example | oklch(0.7 0.15 250) | hsl(250 80% 70%) | #9D8DF1 |
Frequently Asked Questions
What is OKLCH and how is it different from HSL?
OKLCH is a cylindrical representation of the Oklab color model designed by Björn Ottosson in 2020. Unlike HSL, where 50% lightness looks yellow-bright or dark-blue depending on the hue, OKLCH is perceptually uniform: an L value of 0.70 has the identical perceived optical lightness across every hue.
Is OKLCH supported across modern web browsers?
Yes. All modern evergreen browsers (Chrome 111+, Safari 15.4+, Firefox 113+, and Edge 111+) natively support OKLCH in CSS Color Module Level 4 without requiring preprocessors or polyfills.
How does OKLCH unlock the Display-P3 wide color gamut?
Standard sRGB hex codes are mathematically limited to a narrow chromatic triangle defined in 1996. OKLCH supports unbounded chroma, allowing modern MacBook, iPhone, iPad, and OLED screens to render ultra-vivid neons and deeper greens that were physically impossible to express in standard sRGB hex.
Can I use OKLCH with Tailwind CSS?
Yes! In Tailwind v4, you can declare `@theme { --color-primary: oklch(65% 0.22 260); }`. In Tailwind v3, you can write `colors: { primary: 'oklch(65% 0.22 260 / <alpha-value>)' }` to support opacity modifiers.