OKLCH Color Picker
Explore perceptual color with live dynamic slider tracks, wide Display-P3 gamut monitoring, and persistent design-token collection for Tailwind CSS v4.
Why Choose the OKLCH Color Space?
The OKLCH color space (Oklab Lightness, Chroma, Hue) solves the historic flaws of RGB and HSL. In HSL, blue and yellow with 50% lightness appear vastly different in perceived brightness to human eyes. OKLCH guarantees perceptual uniformity: 60% lightness looks equally bright regardless of hue angle, making accessible UI themes, dark modes, and dynamic color systems predictable and effortless.
How to Pick and Export Colors
Move the sliders to set your base hue and lightness. The dynamic slider tracks render real-time color spectra along each individual axis.
Click Add to Cart to assign your color to a semantic token role (--color-trusty-button-500). Colors auto-slot into shade steps 50 to 950.
Open the Export page to copy a ready-to-use @theme block or download a custom CSS variable stylesheet with VS Code inline color decorators.
Popular Color Swatches & OKLCH Equivalents
Build-Time Computed| Color Swatch | Name | HEX Code | OKLCH CSS Value | Gamut Profile |
|---|---|---|---|---|
| Pure White | #ffffff | oklch(100.0% 0.000 0.0) | sRGB | |
| Pure Black | #000000 | oklch(0.0% 0.000 0.0) | sRGB | |
| Tailwind Blue 500 | #3b82f6 | oklch(62.3% 0.188 259.8) | sRGB | |
| Tailwind Indigo 600 | #4f46e5 | oklch(51.1% 0.230 277.0) | sRGB | |
| Emerald 500 | #10b981 | oklch(69.6% 0.149 162.5) | sRGB | |
| Red 500 (Danger) | #ef4444 | oklch(63.7% 0.208 25.3) | sRGB | |
| Amber 500 (Warning) | #f59e0b | oklch(76.9% 0.165 70.1) | sRGB | |
| Cyan 500 (Info) | #06b6d4 | oklch(71.5% 0.126 215.2) | sRGB | |
| Neutral Gray 500 | #737373 | oklch(55.5% 0.000 0.0) | sRGB | |
| Dark Slate 900 | #0f172a | oklch(20.8% 0.040 265.8) | sRGB |
Important Gotchas: Gamut Clipping & Browser Fallbacks
- Display-P3 Gamut: OKLCH can describe colors outside the standard sRGB triangle. On displays that support P3, colors will appear more vivid. On older screens, modern browsers clamp chroma automatically.
- Lightness Rounding: Lightness in CSS OKLCH can be expressed as a percentage (
62%) or decimal (0.62). Both represent identical optical lightness. - Tailwind v4 @theme: When exported to Tailwind v4, custom CSS variables prefixed with
--color-{role}-{step}instantly become utilities likebg-trusty-button-500.
Frequently Asked Questions
Using the badge on the colour canvas? Click it — sRGB, Display-P3 and Clipped each jump to their own answer here.
What is the difference between OKLCH and HSL?
HSL distorts perceived brightness: yellow at 50% lightness looks almost white, while blue at 50% lightness looks dark. OKLCH fixes this with mathematically modeled human visual perception, ensuring lightness is uniform regardless of hue.
Do all modern browsers support CSS oklch()?
Yes! Chrome 111+, Safari 15.4+, Firefox 113+, and Edge 111+ support oklch() natively, representing over 93% global browser adoption.
How does the color cart work?
Whenever you click "Add to Cart" or tap a swatch from our palettes, that exact single color is placed into your chosen UI role (e.g. Primary, Trusty Button, Danger). It automatically slots into the closest shade step (50–950), which you can then preview on real dummy UI components or export to Tailwind v4.
What does "sRGB" mean on the gamut badge?
The color fits inside sRGB — the standard gamut that every screen, browser, and CSS color function can display. The badge's green dot means what you see on the canvas is exactly what the copied oklch() value will render: nothing is being clamped, so the swatch is a literal preview of the value.
What does "Display-P3" mean on the gamut badge?
The color is more vivid than sRGB can reproduce, but still fits Display-P3 — the wider gamut used by modern phones, laptops, and monitors. Wide-gamut displays show it at full intensity; on older sRGB-only screens the browser gamut-maps it back toward sRGB, so it may look slightly less vivid there. It is a real, usable color — just one that benefits from a P3 display to appreciate fully.
What does "Clipped" mean on the gamut badge?
The color is too saturated even for Display-P3, so no current screen can show it as authored — the browser clamps it to the nearest displayable color and the swatch becomes an approximation of your OKLCH values rather than the values themselves. Lower the Chroma slider (its max label shows the sRGB ceiling for that lightness and hue) until the badge reads sRGB or Display-P3 to get a color you can trust.