HEX to OKLCH converter.

L is perceived lightness from 0% (black) to 100% (white), C is chroma, how colorful, from 0 (gray) up to about 0.37 for the most vivid colors a screen shows, and H is the hue angle in degrees. oklch(62.3% 0.188 259.8) is a mid, strong blue.

Tailwind CSS v4 defines its whole palette in OKLCH, and modern CSS reads it everywhere. Because its lightness is perceptual, you can build shades by changing L alone, and hover states, disabled states and dark-mode variants stay in the same hue family.

Hex to RGB, RGB decoded to linear light, then through the OKLab matrices to lightness, a and b, and from a and b to chroma and hue. The converter follows CSS Color 4's math, so the browser reads back the same color.

Yes: hex is sRGB, and OKLCH holds every sRGB color, so converting back gives the same hex. The converter writes lightness to two decimals in percent and chroma to four, enough for that round trip.

Under the answer, with its class and how close it is in ΔE OK, so you can see whether a Tailwind shade already matches your hex.

No. The conversion runs in your browser.

No. The HEX to OKLCH converter is free and opens without a sign-in, an account or an install.

Nothing. The HEX to OKLCH 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 HEX to OKLCH converter: OKLCH to HEX converter, Color converter, Tailwind color generator, Tailwind color finder. Each opens on its own page, free and in the browser.

The HEX to OKLCH 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.