Color Converter & Picker (HEX, RGB, OKLCH)

There is only one colour

before and after are two windows onto the same colour. Move either one and the other follows. They may both be the same format — then you are only changing the notation.

Typing a value and picking one by eye are different jobs, so every format has both. The text field does not care about format — put oklch(...) into the HEX field and it still reads it. Whoever pastes a colour does not get to choose where they copied it from.

A different picker for each format

No slider is reused across formats, because each format works on something different.

• HEX — a saturation × value pad plus a hue axis. HEX is not a colour space, it is a notation for sRGB, so there is no "HEX-shaped axis". What you need here is what you need when you do not know the value yet: a surface to pick from
• RGB — three axes. Each track is painted by sweeping that axis with the other two fixed at their current values. A red track that is always black-to-red has nothing to do with the colour in front of you
• HSL — a colour wheel plus saturation and lightness. H is an angle; flattened onto a slider its two ends are the same red yet look furthest apart. A circle removes that seam
• OKLCH — three axes plus the sRGB boundary

In OKLCH, L is the lightness you actually see

HSL calls hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) the same 50%. They are nothing alike — the yellow is glaring, the blue is dark.

OKLCH was built around perceived lightness, so it writes those two differently. That is why holding L fixed and rotating the hue really does hold the brightness. Building a palette needs exactly this.

The range outside sRGB

OKLCH is wider than what a screen can show. Push a value far enough and it becomes a colour your display does not have.

Where that starts depends on both L and H, so no fixed ceiling can be drawn. It is computed each time and hatched onto the slider. Not only on C — on the L and H axes too, because holding chroma still and moving only lightness or hue can also walk you out of range.

Export a value from inside the hatching as HEX, RGB or HSL and you get the clipped colour. The swatch and the result say so.

You choose the notation

The same colour has a notation your project already settled on. Paste a space-separated value into a codebase that uses commas and it comes back in review.

The notation is chosen on the after side. before is left alone — it is what you are converting from, not a result.

#fff only works when all three channels are a repeated pair. For colours where it does not, that option simply is not offered.

Alpha

All four formats carry alpha. When the colour is opaque it is not written at all — nobody writes rgb(0 0 0 / 1).

Each format writes it differently.

• HEX grows to eight digits — #1a2b3c80, or #fff8 when it can be shortened
• Space notation attaches it with a slash — rgb(26 43 60 / 0.5)
• Comma notation changes the function name — rgba() rather than rgb(), hsla() rather than hsl()

Pick from the screen, keep what you used

The eyedropper takes any colour on your screen, windows outside the browser included. The button only appears in browsers that implement the EyeDropper API — today that is Chrome and Edge.

Copying the result puts that colour into the recent row. Not while you drag a picker, but when you copy — the colour you copied is the one you actually used. It keeps ten, never the same colour twice, and stays in this browser.