Free OKLCH Color Picker
Convert HEX to OKLCH and explore colors with perceptually uniform lightness. Instantly see whether your color is sRGB-safe or requires a wide-gamut P3 display. Perfect for Tailwind v4 and modern CSS workflows.
OKLCH Values
CSS Output
oklch()
oklch(0.702 0.150 200)
HEX
#00b9c4
RGB
rgb(0, 185, 196)
Related Developer Tools
Last updated: May 24 2026
Reviewed by the QuickTooly Team
OKLCH Color Picker Guide
Why Use the OKLCH Color Space?
- Perceptually uniform: Equal changes in L always produce equal perceived lightness steps — unlike HSL where the same numeric jump looks different across hues.
- Wide-gamut ready: OKLCH can express colors beyond sRGB, including the P3 gamut used on modern Apple and Android displays.
- Tailwind v4 native: Tailwind CSS v4 uses OKLCH internally for its entire palette — understanding OKLCH unlocks full control of your design system.
- Accessible color palettes: Build contrast-safe palettes by holding L constant while varying C and H — something HSL cannot guarantee.
- Native CSS support: Modern browsers support
oklch()natively — no preprocessor needed. - 100% private: All conversions run in your browser using the open-source culori library — no data leaves your device.
What is OKLCH?
OKLCH is a perceptually uniform color space built on top of the OKLab model developed by Björn Ottosson in 2020. It represents colors using three coordinates: L (lightness, 0–1), C (chroma, 0–0.4+), and H (hue angle, 0–360°). Unlike the older HSL space, OKLCH produces consistent perceived brightness across all hues, making it ideal for generating accessible color scales programmatically.
OKLCH is now part of the CSS Color Level 4 specification and is supported in all modern browsers. It is the foundation of Tailwind CSS v4's color system, making it an essential tool for modern frontend developers.
Understanding P3 Gamut Warning
Because OKLCH can represent colors wider than the sRGB color space, some combinations of C and H land outside what a standard monitor can display. This tool detects three zones:
- sRGB safe — the color is displayable on any screen, including older monitors and most web images.
- P3 gamut — the color exceeds sRGB but fits within Display P3, used on iPhone, Mac, and modern Android devices. These vivid colors display correctly on wide-gamut hardware and fall back gracefully on others.
- Outside P3 — the color is theoretically valid in OKLCH but cannot be rendered on any current consumer display. Reduce chroma (C) to bring it into gamut.
OKLCH vs HSL
HSL has been the go-to human-friendly color format since CSS2. But it has a critical flaw: colors at the same L value look dramatically different in brightness. A yellow at hsl(60 100% 50%) appears far lighter than a blue at hsl(240 100% 50%), even though both have L=50%. OKLCH fixes this by grounding lightness in how human vision actually perceives brightness, making it the professional choice for design systems, accessibility work, and palette generation.
How to Use This OKLCH Color Picker
- Start from HEX — paste any hex color to instantly see its OKLCH equivalent
- Use the native color picker — click the color swatch icon to open your OS color picker
- Adjust sliders — move L, C, or H independently and watch the color update in real time
- Check the gamut badge — ensure your color is safe for the target display environment
- Copy the CSS value — grab the
oklch()string and paste directly into your stylesheet or Tailwind config
Frequently Asked Questions
What browsers support oklch() in CSS?
All modern browsers support oklch() natively: Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. Global browser support is above 90%. For older browsers, consider providing a hex fallback.
Why does my color show as P3 gamut?
High chroma (C) values at certain hues fall outside the sRGB triangle. This is expected — you've chosen a color that's more vivid than sRGB allows. To make it sRGB-safe, reduce C until the gamut badge turns green. Browsers automatically clamp out-of-gamut colors to the nearest in-gamut value on sRGB displays.
How does Tailwind v4 use OKLCH?
Tailwind CSS v4 defines its entire built-in color palette using oklch() values. This allows the palette to take advantage of wide-gamut displays while remaining backward compatible. You can use this picker to generate custom palette entries that match Tailwind's perceptual consistency.
What is the maximum chroma value in OKLCH?
Technically there is no hard upper limit, but most real-world colors fall within C=0 to C=0.37. Values above 0.4 are almost always outside even the P3 gamut. This tool's chroma slider goes to 0.4 — plenty of range to explore all visible vivid colors.
Is the conversion accurate?
Yes. This tool uses culori, a rigorously tested open-source color science library used by thousands of developers. Conversions follow the official OKLab/OKLCH specification and match browser-native behavior.
Can I use the generated oklch() value directly in CSS?
Yes. The output is valid CSS Color Level 4 syntax. Copy it and paste directly into any CSS property: color: oklch(0.702 0.150 200); or use it in a Tailwind config as a custom color value.