LAB (also called L*a*b* or CIELAB) describes color using perceptually meaningful coordinates. Its lightness axis runs from black to white, while two opponent-color axes run from green to red and blue to yellow. Designed so equal numerical changes approximate equal perceived differences, LAB helps reason about whether colors are visually distinguishable. section 7.1.3
Read the three coordinates as follows:
- L represents brightness: 0% is black and 100% is white. section 7.1.3
- A represents the green–red axis, typically ranging from −125 to 125 or −100% to 100%. section 7.1.3
- B represents the blue–yellow axis, using the same numeric or percentage ranges. section 7.1.3
- Increase the absolute values of A or B for more saturation; set both to zero for grayscale. section 7.1.3
Purple text with CSS
Use CSS lab() by supplying lightness, green–red, and blue–yellow coordinates. Add a slash and alpha value when transparency is needed: h1 { color: lab(30% 60 -50); } section 7.1.3
Figure 7.3 You can visualize the LAB color space as a sphere.
Visualize LAB as a sphere: lightness forms the vertical dimension, while the opponent-color coordinates spread around it. section 7.1.3
