OKLCH to HEX converter.
Type an OKLCH color, such as one from Tailwind v4, and get its hex code, mapped into sRGB the way browsers do it when the color is too vivid for hex.
OKLCH to HEX converter.
Need the UI around it? With Pro, your AI agent builds the form, the result card and the rest of the page from a prompt.
Get ProHow it works
3 steps, no account. It runs in your browser and nothing is uploaded.
Type the OKLCH
As oklch(), with percentages or plain numbers.
Read the hex
The hex appears under it, marked when it had to be mapped into sRGB.
Copy it
Copy the hex, or keep the P3 value for wide-gamut screens.
Related tools
More color tools. Every one free, in the browser.
Pricing
Build it with Pro
The tool is free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds the product around it.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
Questions and answers
Before you trust the result: what to know about the format, the limits, your data and the tools next to it.
OKLCH can describe colors no hex code can hold: Tailwind v4's blue-500, oklch(62.3% 0.214 259.815), is more vivid than sRGB allows. The converter gives the nearest sRGB color, found the way CSS Color 4 tells browsers to (lower the chroma, keep the lightness and hue), and marks the hex as mapped.
Clipping each channel to 0 to 255 shifts the hue and lightness: a vivid orange can turn noticeably redder. Mapping by chroma keeps the color recognizably the same, just less saturated, which is what a browser shows on an sRGB screen.
On a P3 screen, yes: modern browsers paint oklch() at its full chroma. Keep the oklch() in your CSS and use the hex only where a tool needs one, or as a fallback.
oklch(62.3% 0.214 259.8), oklch(0.623 0.214 259.8), chroma as a percentage, hue with angle units or none, alpha after a slash, or the three numbers alone.
The swatch splits in two: the color as written on the left, the hex on the right. On a P3 screen you can see the difference; on an sRGB screen they match.
No. The conversion runs in your browser.
No. The OKLCH to HEX converter is free and opens without a sign-in, an account or an install.
Nothing. The OKLCH to HEX converter holds your input in the page's memory, so closing or reloading the tab clears it, and it saves nothing in this browser.
Closest to the OKLCH to HEX converter: HEX to OKLCH converter, Color converter, Tailwind color finder, Tailwind color generator. Each opens on its own page, free and in the browser.
The OKLCH to HEX converter is one of 17 in its group. The group's page, /tools/color, lists them all.
The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.
4.9 out of 5 from 150+ developers
Build the product around it
Every block, template and icon, installed by your AI agent in your theme. The tools stay free.
Get Pro