OKLCH to hex converter
An OKLCH color converts to hex by rebuilding OKLab from lightness, chroma and hue, running the inverse matrices back to linear sRGB, applying the transfer function and writing each channel in base 16. Move the OKLCH sliders below to see the hex update as you go.
Chroma has no fixed maximum. Values beyond what sRGB can show are clamped to the nearest displayable color, so the slider may stop having a visible effect before it reaches the end.
Working with a design system? Paste several hex codes, one per line or comma-separated, to convert them all at once and save the set as a palette.
The gamut problem, shown
OKLCH can describe colors that no sRGB screen can display. Ask for oklch(65.00% 0.3600 150.00) and what you actually get is #00C100, which reads back as oklch(70.26% 0.2391 142.50). The chroma you requested was 0.360; the chroma you received is 0.239.
No error, no warning. This is worth knowing before you build a palette around a chroma value: check the hex you get back rather than assuming the number you typed survived.
A worked example
Starting from oklch(54.61% 0.2152 262.88):
- Convert L, C and H back to OKLab: a = C x cos(H), b = C x sin(H)
- Apply the inverse OKLab matrix, then cube each result
- Apply the inverse LMS matrix to reach linear sRGB
- Apply the sRGB transfer function and multiply by 255: rgb(37, 99, 235)
- Write each channel in base 16: #2563EB
Result: #2563EB
A chroma higher than sRGB can hold is clamped to the nearest displayable color rather than rejected.
Writing it in CSS
color: oklch(54.61% 0.2152 262.88); is the modern form. Percentages and unitless values both work for lightness, chroma is a plain number, and hue is in degrees. To support browsers that do not understand it, put a hex declaration on the line above and let the OKLCH one win where it is understood.
Frequently asked questions
What happens if the OKLCH color is outside sRGB?
It gets clamped to the nearest color the display space can hold. Nothing errors and nothing warns you in CSS, so a chroma value that looks bold in a design tool can arrive on screen noticeably duller.
How high can chroma go?
There is no single answer, and that is the point. The reachable maximum depends on both the lightness and the hue. Yellows reach a high chroma at high lightness; blues reach theirs much lower down.
Should I ship OKLCH or hex?
Design in OKLCH, ship whichever your targets support. If anything downstream might not understand oklch(), declare a hex value first and let the OKLCH declaration override it where it is supported. That degrades cleanly in one extra line.
Related tools
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.