Too Much Color

I've been working a lot on colours (or "color") in CSS, for csskit's minifier. This gives me the unfortunate burden of now having Opinions™ about colours. I also built a minifier test suite in the hopes that the ecosystem can get smarter. The minifier tests are not a vanity project: csskit currently has the worst pass rate and fails in some rather bad ways.

During this work, trying to minify oklch colours, I wondered "just how precise is precise enough?". Is a color like oklch(0.659432 0.304219 234.75238) needlessly precise? Spoiler alert: yes. I contend that you almost never need more than 3 decimal places. For oklch and oklab that's a safe ceiling, and for their less-than-ok variants (lab & lch) you can get away with even less. Writing more is just wasting bytes.

TL;DR for Developers

• When writing colors: 3dp is enough. If your colour picker hands you oklch(0.659432 0.304219 234.75238), round it to oklch(.659 .304 234.752) and move on.
• Perception: No human can see the difference, and the maths hold up even if you're chaining colours through color-mix() or relative colour syntax.
• For Minifiers: You can be even more aggressive. lab() and lch() only need 1dp. sRGB specific notations like rgb() & hsl(), or units like degrees can be 0dp.

Does this matter? A few extra digits is not going to harm anyone, but if you're spending any significant time tweaking colour values by hand then anything beyond 2 or 3 decimal places is just a waste of time.

How do you tell if two colours look the same?

To prove this claim, we need a way to measure whether two colours are actually different. The International Commission on Illumination (CIE) created a formula for this: Delta-E (ΔE).

Delta-E gives you a single number representing how far apart two colours look:

• 0.0: Identical colours.
• 100.0: Comparing black and white.
• JND (Just Noticeable Difference): For dE00, JND is around 2.0. Below that, people struggle to tell two colours apart. Below 1.0, basically no one can.

Oklab and Oklch use a variant called dEOk. Because Oklab is "perceptually uniform," the numbers are different. Due to scaling (0-1 ranges), dEOk's JND is 0.02, not 2.0.

Testing Rounding Precision

Armed with Delta-E, we can model what happens when we chop decimal places off a colour:

1. Integer (0dp): A terrible idea. Colors pop out of gamut or shift drastically to black/white.
2. 1 Decimal Place (1dp): Easily perceived as a different colour. dE00 values often climb over 5.0 and as high as 10.0.
3. 2 Decimal Places (2dp): Within the "imperceptible range" for most values, but right on the perceptual limit for high chroma colours.
4. 3 Decimal Places (3dp): The perfect sweet spot. dE00 for 3dp never goes beyond 0.08 (way below the 2.0 JND), and dEOk values cap out at around 0.004 (below the 0.02 JND).

Conclusion

While 2dp might seem fine for static colors, 3 decimal places is the safe ceiling to prevent rounding errors from accumulating during color math or palette generation. If you are writing CSS or building minifiers, 3dp is all you need to save bytes without sacrificing visual quality.