What Is a Color Space?
A color space is a system for describing colors as numbers. Different color spaces organise those numbers in different ways, which makes some better suited for certain tasks than others. As a developer, you encounter at least three colour spaces daily: HEX, RGB, and HSL.
Choosing the right color space can make your CSS easier to read, your design system more maintainable, and your contrast calculations more accurate. This guide covers the five color spaces you will actually use in web development.
HEX — The Web Default
HEX codes represent colors as a six-character string of hexadecimal digits: two for red, two for green, two for blue. #FF6B4A means full red (FF = 255), moderate green (6B = 107), and less blue (4A = 74).
HEX is compact and universal — every browser, design tool, and CSS engine understands it. But it is hard to read: looking at #3A7CA5, you cannot quickly tell whether it is a warm or cool colour, or how light it is. That is where HSL helps.
RGB — Mixing Light
RGB describes a colour as the amount of red, green, and blue light mixed together, each ranging from 0 to 255. In CSS: rgb(255, 107, 74).
RGB maps directly to how screens produce colour — each pixel has a red, green, and blue sub-pixel. This makes RGB ideal for programmatic colour manipulation: blending, interpolation, and channel extraction. But for design work, RGB is unintuitive — increasing the green channel does not obviously make a colour "lighter".
HSL — Human-Readable Colour
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the colour wheel (0° = red, 120° = green, 240° = blue). Saturation is how vivid the colour is (0% = grey, 100% = pure colour). Lightness is how bright it is (0% = black, 50% = pure colour, 100% = white).
HSL is the best color space for design systems. Need a darker variant? Lower the lightness. Need a muted version? Reduce saturation. Need a complementary colour? Add 180° to the hue. CSS: hsl(14, 100%, 65%).
HSV/HSB — The Design Tool Standard
HSV (Hue, Saturation, Value) is almost identical to HSL but differs in how it handles brightness. In HSV, value 100% means the purest form of the colour, not white. Figma, Photoshop, and most design tools use HSV internally. If a designer gives you a colour in HSB, convert it to HSL or HEX for CSS — browsers do not support HSV natively.
OKLCH — The Modern Standard
OKLCH is a perceptually uniform colour space added to CSS in 2023. Unlike HSL, where two colours at the same lightness can look vastly different to human eyes, OKLCH guarantees that equal lightness values actually look equally bright. This makes it ideal for generating accessible colour palettes and maintaining consistent contrast ratios.
CSS syntax: oklch(65% 0.15 30). Browser support is strong in 2026 — all major browsers support it. If you are building a new design system, OKLCH is the best choice for colour tokens.
When to Use Each Color Space
- HEX — Design handoff, static values, brand colours in documentation
- RGB — Programmatic manipulation, canvas rendering, image processing
- HSL — CSS custom properties, theme generation, hover/active states
- HSV — Design tools only — convert before writing CSS
- OKLCH — New design systems, accessible palette generation, consistent contrast