OKLCH to HEX
An OKLCH to HEX converter, free and in your browser: paste an oklch() value from a stylesheet or a Tailwind 4 theme and get the hex code that design tools, email templates and older apps expect. oklch(70% 0.12 250) becomes #61A3E6. If the OKLCH color is beyond sRGB, you get the nearest hex code and a note.
How to convert OKLCH to HEX
- 1Paste oklch() into "Color", or type L, C and H such as 0.7 0.12 250
- 2A note under the swatch means the color was outside sRGB
- 3Copy the hex code from the big line
- A hex code such as #61A3E6
How it works
- Lightness both ways.Type L as 0.7 or as 70%: both mean the same lightness
- Out of range, handled.Colors beyond sRGB lose chroma until they fit, the way CSS Color 4 maps them
- Nothing is sent anywhere.The numbers are worked out in your browser
What you can do
- Turn OKLCH into a six digit hex code, from three bare numbers or a full oklch() value
- Write chroma as a percentage too, where 100% stands for 0.4, and the hue in deg, rad, grad or turn
- See the nearest Tailwind 4 and Tailwind 3 color and the nearest CSS name for the result
- Copy RGB, HSL or CMYK of the same color from the list below
Good to know
- OKLCH reaches colors that sRGB, the range of HEX, cannot show. oklch(0.7 0.3 145), for example, becomes #00C300: same lightness and hue, less chroma
- Lightness runs from 0 to 1, or from 0% to 100%. A value outside that range gives a message instead of a color
- A hex code has whole steps, so its own OKLCH value can differ a little in the last decimals from what you typed
Questions
How do I convert OKLCH to hex?
Paste the oklch() value or type its three numbers into the field. The hex code appears in the big line, ready for "Copy". oklch(55% 0.15 300), for example, gives #8059BB.
Why is my hex color less vivid than the OKLCH color?
Your OKLCH value has more chroma than sRGB holds at that lightness and hue. HEX cannot go beyond sRGB, so the tool lowers the chroma, keeps lightness and hue, and shows a note.
Can I convert Tailwind 4 colors to hex?
Yes. Paste the oklch() value from the theme, or simply type the name, such as sky-500. The tool reads Tailwind names too.
Is my color uploaded?
No. Everything happens in your browser, and no request is made with your color.
More tools in Web & code
That page doesn't exist. Search or drop a file below to find the tool you need.
One site for every file job. What’s yours?
Stop hopping between converter sites. Pick from 410+ tools, or a recipe that chains several.
- Files Stay On Your Device
- No watermark
- Works offline
Drop a file here
A pasted file works too.
or search for a tool
Open an app
From “ugh, this file” to done, in three steps.
- Drop it, or pick a task
No file? Search for what you need. Files are processed on your device, not uploaded for processing.
- Pick what you want
Smaller, another format, signed, merged. One click, no settings to study first.
- Make it a recipe
Need three steps in a row every week? Chain them once and run the same recipe next time.
One approved toolbox for the whole team.
In offices, on building sites and in agencies, teams handle sensitive files all day. ToolRecipe gives everyone the same tools and the same recipes, and the files are processed on each person's own computer.
- Files are processed on the employee's device
- Company recipes everyone runs the same way
- One place instead of ten converter sites