ColorShift

What is ColorShift?

The same color can be written in several different formats depending on where it's used — CSS, design tools and older software each favor different notations like HEX, RGB, HSL or the newer OKLCH. ColorShift is a converter that keeps all four formats in sync: change any one of them and the other three update instantly, so you never have to look up a conversion formula or manually recalculate a color by hand.

How to use ColorShift

1. Pick a color with the color picker, click Random, or type directly into any of the format fields (HEX, RGB, HSL, OKLCH).
2. Watch the Preview swatch and the other three fields update automatically.
3. Click the copy icon next to any field to copy that format.

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.