CSS 색상, 소수점 3자리만으로 충분할까? 성능과 시각적 차이 분석

게시물에서는 CSS 색상 표현 시 불필요한 소수점 자릿수를 줄여 바이트 수를 절감(Byte Reduction)할 수 있다고 주장한다. 특히, oklch와 oklab과 같은 색상 공간에서 3dp, lab/lch에서는 1dp의 정밀도로도 충분하며, 이는 CSS minifier의 성능 향상에 기여할 수 있다. 저자는 dE00 및 dEOk를 활용하여 색상 차이를 측정하고, 2dp는 정적 색상에 적합하지만, 색상 연산 시에는 오차가 누적될 수 있음을 강조한다.

게시물에서는 두 색상의 시각적 차이를 측정하기 위해 dE00 및 dEOk와 같은 색상 차이 공식(Color Difference Formula)을 사용한다. dE00의 JND(Just Noticeable Difference)는 2.0이며, dEOk의 JND는 0.02로, 이 값 이하에서는 사람의 눈으로 두 색상의 차이를 구별하기 어렵다. 이러한 지표를 통해 저자는 다양한 정밀도로 색상을 표현했을 때의 시각적 차이를 분석하고, 3dp가 안전한 수준임을 증명한다.

저자는 2dp의 정밀도가 정적 색상에는 적합하지만, 색상 혼합, 팔레트 생성 등 색상 연산 시에는 오차 누적(Error Accumulation)으로 인해 시각적인 차이가 발생할 수 있다고 지적한다. 특히, 2dp로 표현된 색상이 반복적인 연산을 거치면서 원래 색상과 멀어지는 현상을 예시로 제시하며, 3dp의 정밀도를 사용함으로써 이러한 문제를 해결하고 색상 일관성(Color Consistency)을 유지할 수 있다고 강조한다.

게시물에서는 sRGB, hsl, rgb, color() 함수 등 다양한 색상 공간에 따른 정밀도 권장 사항을 제시한다. sRGB의 경우, rgb()는 0-255의 정수 값을 사용하므로 별도의 반올림이 필요 없으며, hsl() 및 hwb()는 1dp를 권장한다. color() 함수를 사용하는 경우, oklab과 유사하게 3dp를 사용하는 것이 안전하다. 이러한 권장 사항은 각 색상 공간의 특성과 색상 채널 범위(Color Channel Range)에 기반하여 결정된다.

댓글에서는 스크린의 품질과 개인의 시력에 따라 색상 구별 능력에 차이가 있다는 점을 언급하며, 스크린의 색상 정확도(Color Accuracy)와 시야각(Viewing Angle)이 색상 인지에 영향을 미칠 수 있다고 지적한다. 또한, 특정 색상 영역, 특히 올리브색과 같은 색상에서 구별이 어려울 수 있다는 의견도 제시된다. 이러한 의견들은 색상 정밀도에 대한 논의가 단순히 기술적인 문제뿐만 아니라, 사용자 경험(User Experience)과도 관련 있음을 보여준다.