색상 시스템: RGB, HSL, OKLCH

수십 년간 웹 개발자는 hex와 RGB를 사용했습니다. HSL이 인간 친화적 색상/채도/명도를 줬고, 이제 OKLCH가 지각적 균일성을 제공해 디자인 시스템이 전환 중입니다.

RGB와 Hex

color: #ff6633;

직접적인 하드웨어 표현. 관련 색상 선택에 무용.

HSL

color: hsl(15, 100%, 60%);

색상 수학에 더 좋지만, 50% 명도의 노란색이 50% 명도의 파란색보다 훨씬 밝아 보입니다.

OKLCH

color: oklch(0.7 0.18 30);

같은 L의 두 색상은 인간 눈에 동일한 밝기.

중요성

--brand-100: oklch(0.95 0.05 250);

--brand-500: oklch(0.65 0.18 250);
--brand-900: oklch(0.25 0.10 250);

체계적 색상 생성이 마침내 작동.

넓은 색역 지원

Display P3 색상을 자연스럽게 표현.

브라우저 지원

2023년부터 모든 에버그린 브라우저 지원.