Color lab uses perceptual color models (specifically, CIELCh) to give real-time feedback on accessibility.
Get startedTo get the most from color lab, it’s helpful to be familiar with terms used to describe a color’s position within the color spectrum.
RGB is a popular color model that describes color in three dimensions: red, green and blue.
The hexademical (hex) syntax used in web design is a derivation of RGB. These descriptions of color are convenient when working with an existing system, but are unintuitive when mixing a new color set.
HSL (hue, saturation and lightness) remaps RGB into dimensions that makes human interpretation simpler. Hue is the color type (like red, blue or yellow); saturation controls the amount of color used, and lightness reflects the intensity of color.
The trouble with RGB and its derivations is that they are irregular, meaning the way we perceive the spectrum of hues with fixed lightness and saturation is non-linear. Notice that some of the colors appear lighter or more saturated than others.
Perceptually uniform color spaces attempt to model human perception of color. CIELCh (lightness, chroma and hue) is one example where colors that share the same value for a dimension are guaranteed to look similar.
This color spectrum blends together more seamlessly thanks to color transformations that account for human perception. These transformations can result in so-called imaginary colors that aren’t perceivable to the human eye and that’s the real magic of building color systems with perceptually uniform models — feedback on accessibility.