HEX to OKLCH
← Color converterPaste a HEX value and read the same color as a CSS oklch() function. The math is the OKLab definition that the CSS Color Level 4 specification uses, so the string you copy renders as the same color in every browser that supports oklch().
That value did not parse. Check the format and try again.
How to convert HEX to OKLCH
- Paste a HEX value into the HEX field. Three-digit shorthand such as #38f works.
- Read the oklch() function in the OKLCH field. Click Copy to put it on the clipboard.
- Edit the OKLCH value to change the color. The HEX field follows.
FAQ
- What do the three OKLCH numbers mean?
- Lightness as a percentage from 0% (black) to 100% (white), chroma from 0 (grey) to about 0.37 at the most saturated sRGB colors, and hue in degrees. Equal steps in OKLCH lightness look like equal steps to the eye, which HSL lightness does not manage.
- Why does the chroma of #3b82f6 read 0.188 and not 0.214?
- Because 0.214 is the chroma of the Tailwind v4 blue-500, which is a Display P3 color that no HEX value can express. #3b82f6 is the older sRGB blue-500, and its chroma is 0.188.
- Why does my oklch() differ from another tool in the last digit?
- Rounding. This page shows two decimals of lightness and hue and four of chroma, which is the least that converts back to the same HEX. A tool that shows one decimal can lose up to five HEX steps at the edge of the sRGB gamut.
- Does this store or send my colors anywhere?
- No. The conversion runs in your browser and makes no network requests.
