Colour Converter

Different CSS colour formats are suited to different workflows. HEX is compact and universal — most design tools export it. RGB gives direct control over red, green, and blue channels, useful for colour mixing in code. HSL (Hue, Saturation, Lightness) maps to how humans perceive colour — easier to adjust brightness or desaturate a colour without trial and error. oklch is the modern perceptually-uniform colour space used in the ruxox design system and in CSS Color Level 4.

Why oklch?

HSL is not perceptually uniform — a green and a blue with the same lightness value look different to human vision. oklch (OKLab Chroma and Hue) corrects this: colours at the same L value actually look the same brightness. This makes it ideal for generating colour palettes programmatically — you can adjust chroma or hue without accidentally changing perceived lightness. The ruxox design system uses oklch tokens throughout for this reason.

Color space support in browsers

All modern browsers (Chrome, Safari, Firefox, Edge) support oklch and the full CSS Color Level 4 syntax. oklch(60% 0.15 180) is a valid CSS value. For older browser support, use @supports (color: oklch(0% 0 0)) to check, or provide an HSL fallback. P3 colour gamut (wider than sRGB) is supported on Safari/iOS and Chrome on supported displays — oklch colours with high chroma may exceed the sRGB gamut and appear differently on non-P3 screens.