About color formats
Different color formats describe the same color in different ways. They're all converting between the same RGB color space.
HEX
A 6-digit hexadecimal representation — two digits each for red, green, blue. Sometimes 3-digit shorthand (#0AF = #00AAFF).
RGB
Three integers from 0 to 255 for each channel. The CSS-friendly form is rgb(0, 122, 255).
HSL & HSV
HSL describes color by Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). HSV uses Value instead of Lightness — useful for color picking interfaces. Both are more intuitive than RGB for adjusting tone or brightness.
Which format to use, and when
All four formats describe the same colour, but each shines in a specific use. Picking the right one saves you needless conversions and display bugs.
- HEX — for copy-pasting from Figma, Photoshop or a brand guide. Compact, universal, the default exchange format.
- RGB / RGBA — whenever you need transparency (the alpha channel) or want to manipulate channels in JavaScript (
canvas, image processing).
- HSL — for tweaking a colour by hand: raising lightness, desaturating, shifting hue without starting over. Far more intuitive than guessing in HEX.
- HSV — the model behind colour pickers (the square plus vertical bar). Handy for thinking in terms of "a pure hue I lighten or darken".
Reference conversions worth knowing
A few useful equivalences to sanity-check your results: #000000 = rgb(0, 0, 0) = black; #FFFFFF = rgb(255, 255, 255) = white; #FF0000 = rgb(255, 0, 0) = hsl(0, 100%, 50%) = pure red; #808080 = rgb(128, 128, 128) = mid grey. A fully desaturated colour (S = 0 in HSL) is always a grey, whatever the hue.
Frequently asked questions
Why does my orange turn grey in the middle of an HSL gradient?
In HSL, interpolating between two distant hues crosses intermediate hues where perceived saturation collapses — producing muddy grey midpoints. A gradient from orange to violet in HSL passes through unsaturated yellows and greens. The fix: use linear-gradient(in oklch, ...) or color-mix(in oklch, ...). OKLCH interpolates through perceptually vivid intermediate colors with no grey mud.
HEX or HSL: which should I use in modern CSS?
HEX for copy-pasting from design tools. HSL or OKLCH for CSS you'll maintain: hsl(220 70% 50%) is readable without a calculator. In 2026, OKLCH is the forward-looking choice — it handles out-of-sRGB colors for P3 displays natively and produces perceptually correct lightness variations without hue drift.
My design passes WCAG AA — is that enough for accessibility?
WCAG AA (4.5:1) is the legal minimum in many countries and covers most users. It is not a ceiling: elderly users and those with reduced vision benefit from AAA (7:1). WCAG 2.x also has known flaws on light-on-white text, which APCA (planned for WCAG 3.0) corrects. Treat AA as a floor, not a goal — aim for AAA on long body text.
Is OKLCH supported everywhere in 2026?
Yes. oklch() is supported in Chrome 111+, Firefox 113+, Safari 15.4+ and Edge 111+ — over 93% of browsers as of May 2026 (Can I Use). A HEX fallback via @supports (color: oklch(50% 0.1 220)) handles the remaining legacy browsers through natural CSS cascade.
How do I test whether my palette is color-blind friendly?
Three free tools: (1) Chrome DevTools > Rendering > Emulate vision deficiencies — live simulation on any page. (2) Sim Daltonism (macOS/iOS) — a floating lens for 8 deficiency types across the whole screen. (3) Coblis.com — upload a screenshot for simulations. Golden rule: never use color as the only information channel — always reinforce with shape, icon or text.
