toolready. Color Converter & Picker

Color Converter & Picker

Hex, RGB, HSL, OKLCH — convert between formats with a live preview.

What this does

Four fields — hex, RGB, HSL and OKLCH — all describing one colour. Type into any of the first three and the rest recalculate as you type; the swatch and the native colour picker at the top follow along. The picker works the other way too: drag in your operating system's colour dialog and the text fields update. The page opens on #c45a3a, which reads as: 

#c45a3a
rgb(196, 90, 58)
hsl(14, 54%, 50%)
oklch(59.36% 0.144 37.43)

Each row has its own copy button, so you can grab just the format your stylesheet uses.

What formats can I paste in?

The hex field takes six-digit values and three-digit shorthand, with or without the leading # — #f0a expands to rgb(255, 0, 170). The RGB field accepts both the legacy comma form rgb(10, 20, 30) and the modern space-separated rgb(10 20 30), and it tolerates an rgba() prefix. HSL wants percent signs on the saturation and lightness, as CSS does: hsl(0, 100%, 50%). Anything that does not parse is ignored rather than clearing the other fields, so a half-typed value never wipes your work. OKLCH is output only — it is computed from the other three, not parsed.

Does this handle alpha or transparency?

No. This is an opaque-colour converter. An rgba() string will parse, but only its three channels are read and the alpha is dropped from the output. If you need a translucent value, convert the base colour here and append the alpha yourself — or use the box-shadow generator, which has its own alpha slider and writes rgba() directly.

How do I convert hex to HSL?

  1. Paste the hex value into the Hex field (the # is optional).
  2. Read the HSL row — hue in degrees, then saturation and lightness as percentages, already rounded to whole numbers.
  3. Press copy on that row to put hsl(…) on the clipboard.
  4. To go the other way, type or paste into the HSL field instead and read the hex row.

What is OKLCH and why is it here?

OKLCH is the polar form of Björn Ottosson's OKLab space, and CSS supports it natively. Its three numbers are lightness as a percentage, chroma (roughly colourfulness, typically 0 to about 0.37 for sRGB colours) and hue in degrees. Unlike HSL it is perceptually uniform: hsl(60 100% 50%) and hsl(240 100% 50%) claim the same lightness, but the yellow is obviously brighter than the blue. In OKLCH the L axis tracks what your eye actually reports, so a palette built by stepping L evenly produces steps that look even. That is why the L value here shows two decimals and chroma three — design-token scales need the precision.

Why does the OKLCH hue differ from the HSL hue?

They are measured in different spaces. The default colour is at 14° in HSL and 37.43° in OKLCH — same colour, different coordinate system, since OKLCH's hue circle is warped to match perception rather than the raw RGB cube. Do not mix the two numbers when building a scale; pick one space and stay in it.

Where do I go next?

Check a foreground and background pair with the contrast checker, build a full set from one seed in the palette generator, see how the colour holds up for colour-blind users in the colour-blindness simulator, or feed it into the gradient tool. All the maths runs in your browser.