Too Much Color

2 days ago

CSS color precision: 3 decimal places (dp) are sufficient for most color spaces like oklch and oklab, ensuring no perceptible difference.
Rounding colors to fewer decimal places can lead to visible differences, especially when colors are manipulated or chained in operations.
Delta-E (dE) metrics (dE00 and dEOk) measure color difference, with Just Noticeable Difference (JND) thresholds of 2.0 for dE00 and 0.02 for dEOk.
Different color spaces require different precision levels: lab and lch can use 1dp, while sRGB notations like rgb and hsl can use 0dp or 1dp.
Alpha channels should also be rounded to 3dp to avoid visible errors in transparency effects.
Browsers store color values in f32 format, preserving high precision, but sRGB colors are ultimately quantized to 8-bit internally.
Rounding errors can accumulate in color operations, making higher precision (3dp) necessary for maintaining accuracy across manipulations.
Cross-space color conversions can introduce additional errors, but 3dp precision generally keeps these below perceptible levels.
The research and interactive demos confirm that 3dp for 0-1 ranges and 1dp for larger ranges is a safe and effective rule for color precision in CSS.

Hasty Briefsbeta