OKLCH to HEX converter for exact sRGB codes
This OKLCH to HEX converter turns an oklch() color into a six-digit HEX code you can paste into any design tool, email template or older stylesheet. You adjust Lightness, Chroma and Hue with sliders and see the HEX update live. The tool also warns you when a color falls outside sRGB. It is free, runs in your browser and needs no signup.
How to convert OKLCH to HEX step by step
You can convert OKLCH to HEX in four steps, and the result updates as you move each control.
- Set Lightness (L) %, Chroma (C), Hue (H) ° and Alpha % with the sliders or type exact numbers. You can also paste
oklch(70% 0.1 290)into the paste field and press Enter. - Read the HEX (sRGB) value in the preview. The left swatch shows your OKLCH color as your browser renders it, and the right swatch shows the HEX.
- Check the gamut chips for sRGB, Display P3 and Rec.2020. A warning appears if the color is outside sRGB.
- Copy the HEX, OKLCH or every format with the copy buttons, or switch the code tabs between CSS, Tailwind CSS v4 and JSON.
The default color, oklch(70% 0.1 290), converts to #9D94D9, also written rgb(157, 148, 217). That is a soft violet.
OKLCH to HEX settings and outputs you can use
The converter gives you more than a single HEX code. Each control and output below is visible on the page.
- Four sliders with number fields: Lightness runs 0 to 100%, Chroma 0 to 0.4, Hue 0 to 360 degrees and Alpha 0 to 100%.
- Paste field: accepts
oklch(),oklab(), HEX orrgb()values, including 8-digit HEX with alpha. - Chroma limit tick: a dark mark on the Chroma track shows the highest sRGB chroma for the current lightness and hue.
- Many formats: HEX, HEX + alpha, OKLCH, OKLCH 0-1, RGB, HSL, OKLab, CIE LCH and Display P3, each with a copy button.
- Harmonies and Lightness scale: complementary, analogous, triadic and split-complementary colors, plus nine lightness steps at the same chroma and hue.
- Quick actions: Copy HEX, Copy OKLCH, Copy all, Export JSON, Download SVG and Share link, which restores your color from a URL.
You can also start from a HEX color with the HEX color picker, which converts it into OKLCH values you can then adjust.
What do OKLCH lightness, chroma and hue mean?
OKLCH describes a color with three numbers: Lightness (L), Chroma (C) and Hue (H). It is the cylindrical form of the Oklab color space created by Björn Ottosson, and his Oklab write-up explains the design goals. CSS supports it through the oklch() function, documented on MDN Web Docs.
OKLCH values explained
- Lightness: 0 is black and 1 (or 100%) is white.
- Chroma: 0 is a pure gray. Higher values are more saturated, and the usable maximum depends on hue and lightness.
- Hue: an angle from 0 to 360 degrees around the color wheel.
Because the space is designed to be perceptually uniform, two colors with the same L look about equally light. HSL does not guarantee that, which is why OKLCH versus HSL matters when you build palettes.
OKLCH hue angles and approximate colors
| Hue (degrees) | Approximate color |
|---|---|
| 30 | Red |
| 70 | Orange |
| 110 | Yellow |
| 140 | Green |
| 195 | Cyan |
| 265 | Blue |
| 330 | Magenta |
These OKLCH hues do not match HSL hues. Blue sits near 265 here, not 240.
OKLCH to HEX conversion examples with real values
A conversion goes from OKLCH to Oklab, then to linear sRGB, then applies the sRGB transfer curve and rounds each channel to a two-digit hexadecimal pair. These examples show typical results.
| OKLCH value | HEX | Note |
|---|---|---|
oklch(70% 0.1 290) | #9D94D9 | Soft violet |
oklch(65% 0.15 250) | #3A93E6 | Mid blue |
oklch(50% 0.1 180) | #007565 | Deep teal |
oklch(80% 0.12 80) | #E6B55D | Warm gold |
oklch(62.8% 0.2577 29.23) | #FF0000 | sRGB red, near the chroma limit |
Need to go further once you have the HEX? Use the HEX to RGB converter for decimal channels or the HEX to HSL converter for hue, saturation and lightness.
Why is my OKLCH color out of sRGB gamut?
An OKLCH color is out of sRGB gamut when its chroma is higher than any sRGB screen color can reach at that lightness and hue. HEX can only describe sRGB, so the converter must bring the color back inside. For example, oklch(70% 0.3 150) is far more saturated than sRGB green can be at that lightness.
Gamut mapping versus simple clipping
The tool maps out-of-range colors with the method in CSS Color Module Level 4. It lowers chroma while keeping lightness and hue, until the result fits sRGB. Plain per-channel clipping can shift the hue or flatten the lightness instead.
When a color is outside sRGB, the warning shows the original chroma, the lowered chroma and what clipping would have given. For oklch(70% 0.3 150), clipping gives #00CB00. If the color still fits Display P3, the warning says so, and the Use the in-gamut chroma button applies the lowered value.
To understand the wider spaces, read the sRGB vs Display-P3 guide. Your own screen matters too: the page tells you whether your display reports Display P3 or sRGB only, because on an sRGB-only screen both swatches look identical.
How to check WCAG contrast of the converted HEX color
The converter shows the WCAG 2 contrast ratio of your HEX color on white and on black, with pass or fail badges for AA and AAA. Ratios are rounded down, so a displayed 4.5:1 genuinely meets the threshold. When alpha is below 100%, the color is blended over each background first.
Under WCAG 2.2, normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 and 4.5:1. The W3C explanation of Contrast (Minimum) defines these levels.
For the default #9D94D9, the ratio is about 2.74:1 on white and 7.67:1 on black. That means the violet works as text on a black background but not on white. To test it against any other background, use the Contrast Checker.
OKLCH to HEX tips and common mistakes
- Do not guess chroma. Watch the dark tick on the Chroma track. Values to its right will be reduced in the HEX.
- Keep lightness steady in a palette. The Lightness scale and Harmonies keep L and C fixed, so the steps look balanced. Out-of-sRGB steps appear gamut-mapped.
- Use percentages or decimals consistently.
oklch(70% 0.1 290)andoklch(0.7 0.1 290)are the same color, but 70 without a percent sign is not. - Expect rounding. HEX stores 256 steps per channel, so converting back to OKLCH can differ slightly in the third decimal.
- Remember alpha. Below 100%, the tool adds an 8-digit HEX (
#RRGGBBAA) and alpha in the RGB and OKLCH outputs. - Gray has no hue. At chroma 0, the hue number has no visible effect.
When to use OKLCH in CSS and when to keep HEX
Use OKLCH when you design or adjust colors, and keep HEX where a tool only accepts sRGB codes. OKLCH makes it simple to create a hover state by changing only lightness, or a matching accent by rotating hue. HEX stays useful for design handoff, email, and legacy systems.
A common workflow is to author in OKLCH and ship a HEX fallback before the oklch() line. Copy both from the CSS tab. For design systems, build a full ramp with the Tailwind Scale Generator, or compare the formats in HEX vs RGB.
Next, check whether a whole palette stays inside sRGB with the OKLCH Gamut Checker, or convert a long list of values at once with the Bulk Color Converter.