Color Space Reference: RGB vs HSL vs CMYK
Three ways of describing the same color, built for three different jobs. Here's the actual math and where each one belongs.
Gamut & size comparison
| Space | Model | Approx. addressable colors | Built for |
|---|---|---|---|
| RGB | Additive (light) | ~16.7 million (8-bit/channel) | Screens, web, digital images |
| HSL | Cylindrical remap of RGB | Same gamut as RGB | Human-friendly hue/lightness editing |
| CMYK | Subtractive (ink) | ~16,000 practically reproducible | Print production |
RGB and HSL describe exactly the same set of colors — HSL is just a rotation of the RGB cube into a cylinder so hue, saturation, and lightness can be adjusted independently. CMYK is a genuinely smaller, physically different gamut: some saturated RGB colors (electric blues, neon greens) simply cannot be printed and will shift when converted, because ink pigments can't reproduce every wavelength combination a backlit screen can.
RGB → HSL
Given R, G, B normalized to 0–1, with max/min the largest/smallest channel:
L = (max + min) / 2 S = (max − min) / (1 − |2L − 1|) [0 if max = min] H depends on which channel is max, computed in 60° segments
RGB → CMYK
The naive (non-color-managed) conversion used by most web tools, including this one:
K = 1 − max(R', G', B') C = (1 − R' − K) / (1 − K) M = (1 − G' − K) / (1 − K) Y = (1 − B' − K) / (1 − K)
where R', G', B' are 0–1 normalized. This is a mathematical approximation, not a color-managed conversion — real print output also depends on your printer's ICC profile, paper stock, and ink set. Treat the CMYK values from any browser-based converter (including Pigomentry's) as a starting estimate, not a press-ready value.
Which one should you use?
| Task | Best space |
|---|---|
| CSS, HTML, UI design | Hex / RGB |
| Building a color scale by hand (lighter/darker variants) | HSL |
| Canvas pixel manipulation, image processing | RGB |
| Sending artwork to a commercial printer | CMYK — via your design software's real ICC profile, not a browser approximation |