Too Much Color

The author, while developing a CSS minifier for csskit, delves into the precise world of color representation and asks: 'Just how precise is precise enough?' His extensive research reveals that many decimal places found in color pickers are superfluous, leading to the core assertion that 3 decimal places (dp) are sufficient for most color notations.

• The article introduces Delta-E (dE00 and dEOk) as metrics to quantify color differences, defining the 'Just Noticeable Difference' (JND) as the threshold below which humans cannot perceive a distinction (dE00 JND ~2.0, dEOk JND ~0.02).
• Through interactive demos, the author illustrates how rounding to 0, 1, or 2 decimal places can lead to perceptible color shifts or accumulation of errors in chained operations (like color-mix() or relative color syntax).
• The primary recommendation is 3dp for color channels with a 0-1 range (e.g., oklab L, a, b; oklch L, C; alpha) and 1dp for larger ranges (e.g., oklch h, lab/lch L, C, h; XYZ D50/D65). This provides a crucial safety margin against rounding errors that compound in complex color calculations.
• For sRGB notations like rgb() or hsl(), where values are often integers or percentages, the 8-bit quantization of browsers means extra precision is typically discarded. Integers suffice for static colors, while 1dp is recommended for chained calculations.
• Browsers store color values as 32-bit floats, meaning they don't perform internal rounding or optimization, making external minification efforts like the author's relevant.

Ultimately, the author's quest for a 'smart' rounding algorithm for his minifier led him to a surprisingly simple solution: a static lookup table of recommended decimal places per color space. This eliminates complex, error-prone calculations at minify time while ensuring perceptually identical results and robust color handling.