CSS Color Systems: From Named Keywords to Modern Color Spaces

The history of CSS color is a history of compromise between what screens could display, what designers wanted to specify, and what browsers could agree to implement. The original 16 named colors from CSS Level 1 -- red, blue, green, yellow, and their relatives -- were inherited from the Windows VGA color palette: a set of colors that could be reliably displayed on the monitors of 1996. They were not designed for aesthetic coherence or completeness. They were designed to work. CSS Level 3 expanded the named color vocabulary to 147 keywords by incorporating the X11 color names from Unix workstation systems -- which is why CSS includes names like cornflowerblue, papayawhip, and mediumspringgreen that sound more like paint chips than web standards. These names have no particular design logic; they are historical artifacts of the X11 system. The 148th named color, rebeccapurple, was added in CSS Level 4 in honor of Rebecca Meyer, daughter of CSS standards advocate Eric Meyer -- the only named color with a deliberate human story. The more significant modern evolution is not in named colors but in color spaces. CSS Color Level 4 introduced the ability to specify colors in display-p3 (the wider gamut used by modern monitors and phones), oklch (a perceptually uniform polar color space), and lab (a device-independent space modeled on human vision). These additions matter because sRGB -- the implicit color space of all prior CSS color -- cannot represent the most saturated colors that modern displays can show. For designers, the practical implication is that oklch is now the best color space for building systematic color scales. Because oklch is perceptually uniform, equal numeric steps produce equal perceived differences -- which means a 50-unit hue rotation always looks like 50 degrees, and a 10% lightness change always looks like 10% brighter. HSL, the previous designer-friendly space, is not perceptually uniform: a 50% lightness yellow looks far brighter than a 50% lightness blue. Building scales in oklch avoids the mismatch between numeric and perceived uniformity that makes HSL-based design tokens so difficult to evaluate visually.