ColorShift

How color conversion works

Every color format represents the same sRGB space in a different way. HEX and RGB are direct (base-16 vs. three 0-255 numbers); HSL describes color as hue/saturation/lightness; OKLCH uses a more modern perceptual model where lightness and hue changes feel uniform to the human eye:

#6C4FE0
→ rgb(108, 79, 224)
→ hsl(252, 70%, 59%)
→ oklch(54.2% 0.209 286.3)

HEX/RGB/HSL conversions use the standard color-conversion formulas; OKLCH is computed by passing through linear sRGB and OKLab per Björn Ottosson's specification — all the math runs in your browser, no external libraries.

Frequently asked questions

What is OKLCH and why use it instead of HSL?

OKLCH is a perceptually uniform color space: changing lightness (L) or hue (H) doesn't distort perceived brightness the way it does in HSL. It's the format recommended by CSS Color Module Level 4 for consistent palettes.

Do all the formats update at the same time?

Yes. Editing any of the four fields (HEX, RGB, HSL or OKLCH) instantly recalculates the other three and the preview.

Does it support colors outside the sRGB space?

No; this tool works within sRGB (the standard display space), just like HEX and RGB. An OKLCH value outside that range gets clipped to the closest sRGB color.

What happens if I type an invalid value?

That field is marked in red and the others keep the last valid color until you fix the value.