An in-gamut red
Input
oklch(62.8% 0.2577 29.23)Output
#ff0000This is pure sRGB red expressed in OKLCH, so the conversion is exact.
Ctrl+↵
Input
COLOR input
Output
ResultAbout this tool
OKLCH is the better space to design in, but hex is what older browsers understand. This conversion exists mainly to produce fallback values: declare the hex first, then the OKLCH, and browsers that support the newer syntax will use it.
The conversion is exact for any OKLCH colour that fits inside sRGB. Outside it, there is no exact answer, and the tool says so rather than silently producing a duller colour.
How to use it
- Paste or upload your colorDrop a file onto the input pane, use the file picker, or paste the text directly.
- Adjust the options if neededThe defaults suit most input; open Options to change the behaviour.
- ConvertPress Convert, or use Ctrl+Enter (Cmd+Enter on macOS).
- Copy or downloadCopy the result, or download it as a .txt file.
Worked examples
Each example below is executed against this tool by the test suite, so what you see is what the tool actually produces.
What to watch for
The details that decide whether a conversion is correct, and where information can be lost without any error being raised.
- Input syntax
- Lightness may be a percentage or a 0–1 number, chroma is an unbounded non-negative number (though sRGB colours rarely exceed about 0.37), and hue is degrees. An alpha value after a slash is preserved as an 8-digit hex value.
- Gamut clipping, and why it is visible
- OKLCH can express colours no sRGB screen can produce, particularly at high chroma in the green and blue regions. Converting those clips each channel into range, which reduces saturation, sometimes noticeably. The warning tells you when the hex is an approximation rather than a match.
- How the conversion works
- OKLCH is converted to OKLab, then to linear sRGB, then gamma-encoded to the 0–255 values hex uses. Each step is a defined transform, so results match any correct implementation. The reverse conversion is also exact, meaning a hex value round-trips through OKLCH unchanged.
Limitations
- Out-of-gamut colours are clipped, so the hex is approximate.
- Outputs sRGB hex only, not display-p3 or other wide-gamut formats.
- Processing happens in your browser, so very large inputs are bounded by available memory. Files above roughly 10 MB are handled but will feel slower, and multi-hundred-megabyte files are better suited to a command-line tool.
Questions
- Why do I need a hex fallback?
- Browsers without OKLCH support ignore the declaration entirely. Declaring hex first and OKLCH second means old browsers get the hex and new ones use the OKLCH.
- What does the gamut warning mean?
- The OKLCH colour cannot be displayed in sRGB, so the hex is the nearest available colour and will look less saturated.