05 — Color & Visual Effects

한 줄 답: 모던 CSS의 시각 효과는 **“색을 어떤 색공간(color space)에서 다루느냐”**가 모든 결정을 지배한다. sRGB·HSL은 30년 묵은 표준이고, OKLCH가 perceptually uniform — 같은 L이면 사람 눈에 정말로 같은 밝기다. 거기에 color-mix()·relative color·gradient interpolation·@media (color-gamut: p3)가 붙어 2024년 이후의 색은 코드로 합성하는 시대가 됐다.

이 챕터가 답하는 질문

1. HSL로 만든 다크모드가 왜 어떤 색은 너무 밝고 어떤 색은 너무 어두운가?
2. oklch(70% 0.15 200)의 세 숫자는 정확히 무엇인가?
3. color-mix(in oklch, blue 30%, white)를 디자인 토큰에 어떻게 쓰는가?
4. linear-gradient(red, blue)가 중간에 회색이 끼는 이유는?
5. backdrop-filter: blur(20px)는 왜 iOS Safari에서 자주 떨어지는가?
6. mix-blend-mode: multiply와 background-blend-mode: multiply는 어떻게 다른가?
7. outline은 왜 부활했고 border로 포커스 링을 만들면 안 되는가?
8. P3·Rec2020 색공간은 정말 보이는 색인가? HDR 디스플레이가 필요한가?

이 8가지에 답할 수 있다면, “디자이너가 준 색이 화면에서 이상해요” 는 디버깅이 아니라 색공간 변환 문제로 환원된다.

챕터 구조

5-레이어 모델 안에서의 위치

이 챕터는 Visual 레이어의 절반이다. 나머지 절반(타이포그래피)은 04-typography에서 다룬다. 색·효과는 픽셀 단위의 합성, 타이포는 문자 단위의 합성 — 같은 픽셀을 다른 축으로 자르는 두 시각.

Why — 왜 색이 통째로 한 챕터인가

색은 단순한 속성이 아니라 변환 파이프라인이기 때문이다.

이 6단계를 한 번에 정리하지 않으면 “디자이너 시안과 색이 달라요” 가 매주 발생한다.

How — 어떻게 읽나

순서대로 읽기를 권장한다. 색공간(01)이 모든 후속 문서의 전제다.

• 빠르게 핵심만: 01-color-spaces → 02-gradients → 07-borders-and-outlines. (OKLCH·color-mix·focus ring)
• 이펙트 헤비 UI 만들 거라면: 03-shadows + 04-filters + 05-blend-modes. (neumorphism·glassmorphism·blend 합성)
• 디자인 시스템 토큰 설계: 01 + 02 + 08-architecture의 토큰 챕터 함께.

What — 다루는 표준의 범위

• CSS Color Module Level 4 (W3C CR, 2022) — oklch(), oklab(), color(), lab(), lch(), hwb(), relative color syntax
• CSS Color Module Level 5 (W3C ED) — color-mix(), relative color syntax 확장
• CSS Color HDR (Level 6) — HDR 색공간, dynamic-range-limit
• CSS Backgrounds and Borders Module Level 3/4 — background-clip: text, border-image
• Filter Effects Module Level 1/2 — filter, backdrop-filter
• Compositing and Blending Module Level 1 — mix-blend-mode, isolation
• 사실상 표준 — Open Props 색 팔레트, Tailwind v4의 OKLCH 채택, Radix Colors

브라우저 지원 (2024-2026 Baseline):

• oklch() — Chrome 111+ / Safari 15.4+ / Firefox 113+ (Baseline 2023)
• color-mix() — Chrome 111+ / Safari 16.2+ / Firefox 113+ (Baseline 2023)
• backdrop-filter — 보편, iOS Safari 성능은 별개 문제
• relative color — Chrome 119+ / Safari 16.4+ / Firefox 128+
• HDR color(rec2020 ...) — 일부, 디스플레이 의존

What-if — 이 챕터를 건너뛰면

• HSL로 만든 다크모드: hsl(220 50% 50%)을 hsl(220 50% 30%)로 어둡게 했더니, 다른 hue(예: 노랑)는 같은 50%에서 너무 밝아서 위계가 깨진다.
• gradient의 회색 함정: linear-gradient(red, blue)가 sRGB 보간이라 중간이 진흙색. in oklch로 바꾸면 보라색.
• backdrop-filter 사파리 흔들림: iOS Safari는 backdrop-filter의 GPU 비용을 절약하려고 스크롤 중 효과를 떨어뜨린다.
• focus ring 사라짐: outline: none만 쓰고 대체 없으면 키보드 사용자 차단 — WCAG 위반.
• color-mix 미사용: 1색에서 4단계 파생을 사람이 손으로 계산 → 100색 토큰 시스템 → 다크모드 추가 시 100개 다시 계산.

Insight — 색공간의 30년 잠

“sRGB는 1996년 CRT 모니터를 위해 만들어진 표준이다”

sRGB는 Microsoft와 HP가 1996년에 CRT 모니터의 평균 색역을 표준화한 것이다. 이후 30년간 웹의 모든 색은 이 좁은 삼각형 안에 갇혔다. 한편 영화·사진은 일찍이 P3(2005, DCI)·Rec2020(2012, UHD)으로 옮겨갔지만, 브라우저는 따라가지 못했다.

변화는 2017년 iPhone X의 P3 디스플레이에서 시작됐고, 2022년 CSS Color 4가 color(display-p3 ...)을 표준화하면서 본격화됐다. 2023년 Björn Ottosson의 OKLab 논문 — “perceptually uniform한 색공간” — 이 Tailwind v4·Open Props에 채택되면서 2024년은 OKLCH의 해가 됐다.

흥미로운 반전: OKLCH의 L(lightness)은 0~1이지만, 실제로 디자이너들이 쓰는 값은 0.2 ~ 0.95 사이다. 그 밖은 사람 눈이 잘 구분 못 한다. HSL의 L=50%가 hue마다 밝기가 다르다는 오래된 직관의 위배를 OKLCH가 30년 만에 고친 셈이다.

요약

• 색은 6단 파이프라인이다 — 공간 → 모델 → 합성 → 보간 → 출력 → 호환성.
• OKLCH는 perceptually uniform — 같은 L이면 진짜 같은 밝기. 디자인 토큰의 기본값.
• color-mix()·relative color는 1색에서 N색을 코드로 파생시키는 도구.
• gradient·shadow·filter·blend는 픽셀 합성의 4대 도구 — 각자 다른 스택 위치.
• focus ring은 부활한 outline + :focus-visible의 조합이 사실상 표준.

다음: 01-color-spaces에서 sRGB가 좁은 삼각형이고 OKLCH가 왜 다른지부터 시작한다.