Color Space Explorer
Visualize 2D slices through different color spaces. Click to pick a color, adjust the third dimension with the slider, and see its representation in every space simultaneously. Compare perceptual uniformity between RGB and CIELAB.
Perceptual uniformity — 10 equal steps
RGB lightness gradient
CIELAB lightness gradient
About this lab
Why do we need different color spaces?
RGB describes what a screen does — how much red, green, and blue light to emit. But “what a screen does” and “what a human sees” are very different things. The RGB color space is not perceptually uniform: a step of 10 units in the greens looks like a much smaller change than the same step in the blues. Two colors that are equidistant in RGB can look either nearly identical or dramatically different, depending on where in the space they sit. This makes RGB a poor choice for tasks like choosing harmonious palettes, measuring color difference, or creating smooth gradients.
HSL and HSV
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) rearrange the RGB cube into a cylinder. The hue angle corresponds roughly to the wavelength of the dominant color, while saturation and lightness/value separate chromatic intensity from brightness. These spaces are more intuitive for color picking — you can adjust “how vivid” and “how bright” independently. But they are still based on the RGB model and inherit its non-uniformity. HSL lightness 50% yellow looks far brighter than HSL lightness 50% blue, because the human eye is more sensitive to yellow-green light.
CIELAB: perceptual uniformity
In 1976, the Commission Internationale de l’Éclairage (CIE) defined the L*a*b* color space (CIELAB) specifically to be perceptually uniform. L* represents lightness (0 = black, 100 = white). The a* axis runs from green (negative) to red (positive). The b* axis runs from blue (negative) to yellow (positive). A Euclidean distance of ΔE = 1 in CIELAB corresponds roughly to the smallest color difference a trained observer can detect. This makes CIELAB the standard for industrial color matching, print production, and any application where “how different do these look?” matters.
The perceptual uniformity demo above this section shows this concretely. Ten equal steps in RGB produce an uneven visual gradient — some steps look bigger than others. The same number of equal steps in CIELAB L* produce a gradient that looks even, because the space was designed to match the human visual system.
Gamut boundaries
Not every point in CIELAB corresponds to a color that sRGB monitors can display. The sRGB gamut is a irregular volume inside the larger CIELAB space. Colors outside the gamut are “imaginary” from the perspective of your screen — they require a signal the hardware cannot produce. The “Gamut boundary” preset shows this: out-of-gamut regions appear as a checkerboard pattern. The gamut is smallest at the extremes of lightness (near black and near white) and largest in the mid-tones.
CMYK
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in printing. Instead of adding light (RGB), you subtract it by layering inks. A cyan ink absorbs red light, magenta absorbs green, and yellow absorbs blue. In practice, combining CMY inks produces a muddy brown rather than true black, so a separate black (K) ink is added. The conversion from RGB to CMYK is approximate without a specific ICC profile, but the relationships here are instructive.
Mantis shrimp vision
Mantis shrimp have 16 types of photoreceptor cells compared to our three cones. This sounds like superhuman color vision, but research by Thoen et al. (2014) showed that mantis shrimp are actually worse at distinguishing similar colors than humans. Their visual system works more like a barcode reader — each photoreceptor type acts as a simple present/absent detector for a narrow wavelength band. Humans use just three cone types but combine their signals through complex neural processing to achieve fine color discrimination. More detectors does not mean better vision; what matters is how the signals are processed.
Structural color vs pigment
Most colors in nature come from pigments — molecules that absorb certain wavelengths and reflect others. But some of the most vivid colors arise from structure: nanoscale physical features that interfere with light. Morpho butterfly wings, peacock feathers, and opals all produce color through thin-film interference and diffraction, not through any pigment. Structural colors can be brighter, more saturated, and angle-dependent (iridescent) in ways that pigments cannot achieve. No color space fully captures this distinction, because color spaces describe the result (what reaches the eye) rather than the mechanism (how it was produced).