How color is represented on screens
Computer screens emit color by mixing three primary lights: red, green, and blue. Every color a screen can show is a triple (R, G, B) where each component is a brightness value from 0 to 255 (24-bit color) or 0 to 1 (normalized). This system is called additive RGB — primaries add together to produce light, so all three at maximum is white and all three at zero is black.
HEX — the same numbers, written compactly
A hex color code like #E85D26 is just three pairs of hexadecimal digits, one per channel:
E8hex =232decimal — red5Dhex =93decimal — green26hex =38decimal — blue
So #E85D26 and rgb(232, 93, 38) are the same orange. The shorthand #F00 expands to #FF0000 — each digit doubles. Hex codes can also carry an alpha channel: #E85D26CC appends 80% opacity.
RGB → HSL: thinking like a human
RGB is how screens work; HSL is how people think. HSL describes color in three perceptual axes:
- Hue (0–360°) — the dominant color on the color wheel. 0° is red, 120° is green, 240° is blue.
- Saturation (0–100%) — how vivid the color is. 0% is gray, 100% is pure color.
- Lightness (0–100%) — how light the color is. 0% is black, 50% is the pure hue, 100% is white.
HSL is much easier for design adjustments. To make a brand color lighter, change the L; to desaturate for a muted variant, change the S; to derive a complementary color, add 180 to the H.
HSV / HSB — the alternative to HSL
HSV (also called HSB) replaces Lightness with Value, which is the brightness of the most-saturated pixel. This is what most color pickers in Photoshop and Figma show. The difference:
- In HSL, S=100% L=50% is the purest version of the color.
- In HSV, S=100% V=100% is the purest version.
HSL is friendlier for derivation work (a 90% L is reliably "very light"); HSV matches how saturation behaves in painting and printing.
CMYK — for print
Cyan, magenta, yellow, and key (black) is the subtractive model used in commercial printing. Inks absorb wavelengths instead of emitting them, so the model is inverted. CMYK has a smaller gamut than RGB — vivid neon-greens and saturated blues on a screen often print as muddy approximations. Always convert to CMYK in the printer's color profile (ISO Coated v2, GRACoL, etc.) when preparing print files.
Worked conversions
Convert #E85D26 (the i-love-tools.com brand color) across formats:
| Format | Value |
|---|---|
| HEX | #E85D26 |
| RGB | rgb(232, 93, 38) |
| HSL | hsl(17°, 81%, 53%) |
| HSV/HSB | hsv(17°, 84%, 91%) |
| CMYK (approx) | cmyk(0%, 60%, 84%, 9%) |
| OKLCH | oklch(64% 0.18 39) |
The HSL "17°" hue confirms it sits between red (0°) and yellow (60°) — a warm orange. The 81% saturation says it is vivid, and the 53% lightness puts it almost in the middle of the lightness range.
Modern color spaces — OKLCH, LAB, P3
RGB is the legacy of CRT monitors; modern color spaces try to match human perception more accurately:
- LAB / OKLAB — perceptually uniform: equal numeric distance corresponds to equal perceived color difference. Better for color interpolation in gradients.
- OKLCH — the polar form of OKLAB, easier to author. CSS Color 4 supports
oklch()directly. - Display P3 — a wider gamut covering ~25% more colors than sRGB. Supported by modern Apple devices and most newer displays.
For new web work, OKLCH gradients look noticeably smoother than RGB gradients and avoid the muddy intermediate grays that plague red → green linear-gradient transitions.
Calculating contrast for accessibility
WCAG defines contrast ratio between two colors:
contrast = (L₁ + 0.05) / (L₂ + 0.05)where L₁ and L₂ are the relative luminances of the two colors (lighter and darker). WCAG 2 minimums:
- 4.5:1 for body text at normal size (AA).
- 3:1 for large text (AA) or UI components.
- 7:1 for body text at AAA.
Most automated color tools check WCAG 2; the newer APCA algorithm (in WCAG 3 draft) is generally considered more perceptually accurate, especially for dark mode.