The Precision Paradox: How Many Decimal Places Do CSS Colors Really Need?

In the intricate world of web design, we've grown accustomed to treating color values with scientific precision, often copying long decimal strings from design tools without question. Keith Cirkel, while working on color minification for csskit, embarked on an extensive investigation that challenges this precision obsession, revealing that most CSS color values contain unnecessary digits that contribute nothing perceptible to the final rendered result.

The journey began with a simple question: "just how precise is precise enough?" When confronted with a color like oklch(0.659432 0.304219 234.75238), Cirkel wondered whether such precision served any practical purpose. The spoiler, as he reveals early in his analysis, is that yes, this precision is indeed needlessly excessive. His research contends that three decimal places represent a safe ceiling for oklch and oklab color spaces, while their less-perceptually-uniform variants (lab and lch) can function adequately with even less.

To understand why this matters, we must first appreciate how we measure color difference. The International Commission on Illumination (CIE) developed Delta-E (dE) formulas to quantify perceptual color differences. The modern standard, dE00 (CIE2000), assigns a single numerical value representing how far apart two colors appear, with 0.0 indicating identical colors and 100.0 representing the maximum difference between black and white. The critical threshold is the "Just Noticeable Difference" (JND), which for dE00 stands at approximately 2.0—below this value, humans struggle to perceive any difference between colors.

Oklab and Oklch have their own measurement variant called dEOk, which operates on a different scale due to the perceptual uniformity of Oklab space. Here, the JND is 0.02 rather than 2.0, meaning the numerical values are one-hundredth of those in dE00 for equivalent perceptual differences. This distinction becomes crucial when evaluating precision requirements across different color spaces.

Through interactive demonstrations and systematic testing, Cirkel established clear patterns in how decimal precision affects perceptual accuracy. For oklch colors, rounding to three decimal places for lightness and chroma, and one decimal place for hue, produces dE values consistently below the JND threshold. Even when colors undergo mathematical operations—such as scaling chroma or rotating hue—the three-decimal precision maintains imperceptible differences, whereas two-decimal precision begins to show visible errors in chained calculations.

The reason for this precision differential lies in how different color components map to perceptual difference. In oklch, changes in lightness (L) or chroma (C) directly correspond to dE values, making each 0.001 increment equivalent to 0.001 dE. Given that the third decimal place represents twenty times below the JND threshold, it literally cannot be perceived by the human eye. Hue proves even less sensitive, with even whole degrees often being imperceptible except at extremely high chroma values.

When examining other color spaces, the pattern becomes clearer. Lab and lch operate on dramatically different scales—lightness from 0-100, chroma potentially reaching 150—meaning integer rounding already provides precision equivalent to two decimal places in Oklab. This leads to the practical recommendation: lab and lch need only one decimal place for all channels, while sRGB notations like rgb and hsl can function with zero decimal places (integers), as browsers quantize to 8-bit internally anyway.

The implications of this research extend beyond mere academic interest. For developers, it means confidently rounding color values without fear of visual degradation. For minifiers like csskit, it enables more efficient compression without compromising visual fidelity. Cirkel's own implementation journey—from complex dE calculations and binary searches to a simple static lookup table—demonstrates how this knowledge translates to practical, efficient code.

Browser behavior further contextualizes these findings. Current browsers store colors as 32-bit floating-point numbers, preserving all decimal places far beyond what's perceptually necessary. This represents a missed optimization opportunity, as the precision serves no purpose in the final rendering, which itself is quantized to discrete color values.

The most compelling argument for additional precision comes from understanding error accumulation. While two decimal places might suffice for static colors, chained operations—whether through CSS variables, calc() functions, or relative color syntax—can compound small rounding errors. In palette generation or color mixing scenarios, these errors can accumulate to cross the JND threshold, creating visible discrepancies. The third decimal place provides a safety margin against this compounding effect.

Even edge cases like near-zero chroma, near-black, near-white, or high-chroma colors at the gamut boundary conform to this pattern. At these extremes, rounding errors actually become smaller, reinforcing the three-decimal rule as uniformly safe. Cross-space conversions and alpha channels similarly adhere to established precision guidelines when properly analyzed.

Cirkel's research ultimately transforms a niche optimization problem into a broader reflection on how we handle precision in digital design. The excessive decimal places we carry in our CSS files represent a form of digital clutter—information that costs bandwidth and storage but delivers no perceptual value. By understanding the relationship between numerical precision and human perception, we can make more informed decisions about what information truly needs preservation.

As web technologies continue to evolve, with more sophisticated color manipulation capabilities emerging in CSS, this research provides a foundation for thinking about precision in color systems. It reminds us that in the pursuit of technical perfection, we must never lose sight of the human element—the perceptual limits that ultimately determine what matters in visual design.

For those interested in implementing these optimizations, Cirkel has updated the css-minify-tests repository to include these precision guidelines, offering other minifiers an opportunity to adopt these proven approaches with minimal effort. The implementation itself is remarkably simple—a static lookup table mapping color spaces to decimal precision requirements—yet represents the culmination of extensive research and experimentation.

In the end, this investigation serves as a valuable case study in balancing technical precision with practical constraints. It demonstrates how deep understanding of underlying principles can lead to simpler, more effective solutions than complex heuristics or brute-force approaches. As we continue to push the boundaries of web design, such principled approaches to optimization will become increasingly valuable.