OKLCH Color Converter
Convert between OKLCH, hex, RGB and HSL, adjust lightness and chroma perceptually, and see which OKLCH values fall outside the sRGB gamut and what they clip to.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Why HSL lightness lies
In HSL, yellow at fifty percent lightness and blue at fifty percent lightness look nothing alike: the yellow is dazzling and the blue is dark. HSL lightness is a geometric coordinate in the RGB cube, not a measure of how bright a colour appears. This is why a palette built by varying HSL lightness produces steps that jump in some hues and barely move in others, and why so much effort goes into hand-correcting palettes that should have been uniform by construction.
OKLCH is built on how people see
OKLCH separates lightness, chroma and hue in a space designed so that equal numerical steps look like equal perceptual steps. Setting several colours to the same lightness makes them genuinely equally light. Rotating hue at fixed lightness and chroma keeps the colours matched in weight, which is exactly what a palette needs and exactly what HSL cannot do. It is supported in every current browser and is the reason CSS gained the oklch function.
The gamut is the catch
OKLCH can express colours no sRGB screen can show. High chroma at extreme lightness frequently falls outside the gamut, and the value is then clipped to something displayable, which quietly breaks the uniformity you chose the space for. Checking whether a value is inside the gamut before committing to it is the one piece of extra care OKLCH demands, and this shows the clipped result alongside the requested one so the difference is visible.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why not just use HSL?
Because HSL lightness measures a coordinate rather than perceived brightness. Yellow and blue at the same HSL lightness look completely different, so palettes built by varying it come out uneven and need hand correction.
What do the three OKLCH values mean?
Lightness from 0 to 100 percent as it actually appears, chroma as colourfulness with no fixed maximum, and hue in degrees. Equal numerical steps in each look like equal perceptual steps, which is the whole point of the space.
What happens outside the sRGB gamut?
The colour cannot be displayed and is clipped to the nearest one that can, which silently breaks the uniformity you chose OKLCH for. High chroma at very high or very low lightness is where this happens most.
Is OKLCH supported in browsers?
Yes, in every current browser. For older ones a hex fallback declared before the oklch value is enough, since a browser that does not understand the later declaration keeps the earlier one.
How does it differ from LCH or Lab?
OKLCH is based on the OKLab space, which corrects the hue shifts that older CIE Lab exhibits, most visibly in blues, where increasing lightness in the older space turns them purple.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Enter a colour in any format to convert it and adjust it in OKLCH.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.