PickClicker

Digital Color
Theory

We manipulate light through numbers. Understanding the math behind those numbers is the difference between a resilient design system and one that breaks under edge cases.

The Legacy of sRGB

sRGB (Standard Red Green Blue) was created in 1996 by HP and Microsoft. It uses additive color mixing—starting with black (no light) and adding Red, Green, and Blue light to create colors, peaking at white.

While ubiquitous and safe, sRGB is severely limited. It only covers about 35% of the visible colors the human eye can perceive according to the CIE 1931 xy chromaticity diagram. This means highly saturated neons and deep, vibrant greens cannot be accurately represented in standard sRGB or Hex codes.

The Hex Limitation: #FF0000 is the reddest red possible in sRGB, but not the reddest red a modern monitor can display.
R: 255
G: 255
B: 255

CSS Implementation

/* Standard Fallback */
.button {
  background-color: rgb(255, 0, 0);
}

/* P3 Enhancement */
@media (color-gamut: p3) {
  .button {
    background-color: color(display-p3 1 0 0);
  }
}

Notice that P3 uses decimal values (0 to 1) rather than integers (0 to 255).

Display P3

Display P3 is a wide-gamut RGB color space created by Apple, based on the DCI-P3 digital cinema standard. It offers a 25% larger color gamut than sRGB.

With CSS Color Module Level 4, developers can use the color(display-p3 r g b) function to target modern OLED displays and high-end IPS panels that support this wider gamut, providing access to colors that simply do not exist in Hex.

The Future Standard

Perceptual Uniformity:
OKLCH vs HSL

HSL (Hue, Saturation, Lightness) is mathematically simple but perceptually broken.

In HSL, a pure yellow and a pure blue both have a "Lightness" of 50%. Yet to the human eye, the yellow is blindingly bright, and the blue is quite dark. If you build a theme system that dynamically shifts Hue while keeping Lightness constant, your contrast ratios will fail wildly.

OKLCH (Lightness, Chroma, Hue) maps to human perception. If two colors in OKLCH have a Lightness of 60%, they appear equally bright, regardless of their hue. This makes algorithmic palette generation mathematically sound and accessible by default.

Read OKLCH Guide →
Color HSL Lightness Actual Perceived Luminance OKLCH Lightness
Pure Yellow 		50% ~74% 85%
Pure Blue 		50% ~8% 45%
Pure Red 		50% ~21% 57%
Conclusion: HSL claims these three colors share the same "Lightness" (50%). The actual perceived luminance proves this false. OKLCH correctly identifies that the yellow is vastly brighter than the blue.