How to Convert a Color Between HEX, RGB, HSL, and OKLCH

The color converter keeps a color in HEX, RGB, HSL and OKLCH at once, and every field is a real input, not a read-only result - type or paste into any of the four and the other three update immediately. There's no "from" format you're required to start in.

Step 1 - start from whatever you already have

If a design file gave you a hex code, paste it into the HEX field. If you copied an hsl() value out of a spec document, paste it into the HSL field instead - it works exactly the same way, because every field parses its own format and recomputes the same underlying color from it. There's no hidden preference for hex as the "real" input; a value pasted into any of the four fields becomes the new color the other three are derived from. This is the actual difference from most single-purpose "hex to rgb" converters, which take one input format and give you one output format - here, any of the four can be either.

Comma-separated and space-separated forms both parse for RGB and HSL (rgb(59, 130, 246) and rgb(59 130 246) both work), matching how those values actually show up copied from different tools and browsers' own devtools. What comes back out of the field, once you edit it, is always the comma-separated form - the more broadly copy-pasteable one across CSS and design tools.

Step 2 - read the other three

The moment a pasted or typed value parses successfully, the swatch above the fields updates along with the other three text fields and the native color picker's own value. Nothing needs a separate "convert" click - the update happens on every completed edit. If what you're typing doesn't parse yet (a half-typed hex code, an hsl() with a missing parenthesis), the field you're actively editing is left alone rather than being overwritten mid-keystroke, and the other three simply wait until it does.

Step 3 - or start from the picker instead

The swatch also doubles as a native color-picker input. Clicking it and choosing a color visually updates all four text fields immediately - the picker is always hex-accurate, so this path skips the "does it parse" question entirely.

A worked example

The tool's own default color (the one Start fresh restores), #3b82f6, converts to rgb(59, 130, 246), hsl(217, 91%, 60%), and oklch(0.6231 0.188 259.81) - all four shown at once, all four editable. Paste that same OKLCH string back into the OKLCH field and the HEX field returns to exactly #3b82f6, not something a shade off. That round trip is the actual proof that the reverse OKLCH-to-RGB math is correct, not just the forward direction.

Why OKLCH shows more decimal places than the others

L and C display to four decimal places and H to two - more precision than HEX, RGB or HSL ever show, because OKLCH's numbers are fractional by nature rather than the small whole numbers the other formats use. That precision isn't decorative: it's the amount needed for a color to survive a real round trip. Round L or C to two decimal places instead of four and a hex-to-oklch-to-hex conversion stops returning the exact original color; four decimal places is the minimum this tool's own testing found that keeps it exact.

What happens with alpha

All four formats carry alpha when the color has any: an eight-digit hex, rgba(), hsla(), or OKLCH's own / A syntax. When the color is fully opaque, alpha is simply left out of every format rather than shown as a redundant / 1 or a two-digit hex suffix of ff - the same behavior across all four fields, so a partially-transparent color pasted into any one of them carries its transparency through to the rest automatically.

What happens with a color your browser can't render as OKLCH yet

The conversion itself doesn't depend on your browser supporting oklch() as a CSS color value - the math runs in plain JavaScript either way. If your browser can't yet paint an oklch() color directly in a stylesheet, the tool says so plainly next to the fields, but the OKLCH value it shows you is still correct and safe to use once you need it.

What happens with an out-of-gamut OKLCH value

OKLCH can describe colors that fall outside what a standard screen can actually display. When that happens here, the result is clamped to the nearest color a screen can show, not rejected and not gamut-mapped to a more visually careful approximation - a stated simplification that only matters for saturated colors near the edge of what's representable at all. For the overwhelming majority of real design colors, this never comes up.

You don't have to fill in all four

The tool starts with a default color already converted into all four formats, so there's always something to read even before you type anything. If all you actually need is one conversion - say, an HSL value turned into hex - paste into the HSL field and copy straight out of the HEX field. Nothing requires touching the other two; they're there if the next step of whatever you're doing needs them too.

Copying the value you need

Each field has its own Copy button directly next to it, so there's never a question of which field a click copies from. Copying puts the exact text in that field on your clipboard, formatted exactly as shown - no extra whitespace, no reformatting.

Nothing here is uploaded. The conversion happens entirely in your browser, on every keystroke. For the broader reason this matters across a project rather than in one field at a time, the why guide covers where hand conversion actually goes wrong, and this guide is for anyone specifically deciding whether to move a color scale from HSL to OKLCH.