Color converter
One value in, every notation out — plus the perceptual properties that decide how a colour will behave in a system.
Input
HEX, rgb(), hsl(), oklab(), oklch() or a CSS color name.
Properties
- Name
- Light Blue
- Lightness
- 63%
- Chroma
- 0.2010
- Hue
- 266°
- Alpha
- 100%
- Max chroma here
- 0.2010
#4F7CFF
Light Blue, #4F7CFF, lightness 63 percent, chroma 0.201, hue 266 degrees
Every notation
- HEX
#4F7CFF - RGB
rgb(79 124 255) - HSL
hsl(224.7 100% 65.5%) - OKLAB
oklab(62.5% -0.0128 -0.2006) - OKLCH
oklch(62.5% 0.201 266.34) - CSS VAR
--light-blue: #4f7cff;
Legibility
8-bit sRGB: R 79, G 124, B 255 · HSL 225°, 100%, 65%
How this works
Conversions run through linear-light sRGB and OKLab using Björn Ottosson’s published matrices, then to OKLCH by taking the polar form. Round-tripping a hex value returns exactly the same hex.
Why OKLCH is worth learning
HSL lightness is a geometric convenience: hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) claim the same lightness, but one is nearly white to the eye and the other nearly black. OKLCH lightness is perceptual, so equal numbers look equally light. That is what makes a single lightness ramp work across every hue in a design system.
Powerless hue and gamut
When chroma reaches zero the colour is grey and its hue carries no visual information — Colorstruct reports the hue as powerless rather than pretending the number means something. OKLCH can also describe colours sRGB cannot show; those are flagged, with a one-click mapping that reduces chroma while holding lightness and hue exactly.