Color Terms

이 문서가 답하는 질문: 디자인 시스템의 색 토큰을 정할 때 등장하는 색공간·접근성 용어가 정확히 무엇을 가리키는가? 한 줄 답 (Pyramid Top): 이 카테고리는 “색을 어떤 좌표계에서 정의하고, 어떻게 안전한지 검증하는가” 의 어휘다.

카테고리 개요

키워드	한 줄 정의
Color Space	색을 표현하는 좌표계 (sRGB, OKLCH 등)
Gamut	색공간이 표현 가능한 색의 범위
WCAG / APCA	텍스트 대비 접근성 표준
Radix Colors	12-step 색 스케일 사실상 표준
color-mix()	CSS의 색 혼합 함수

본문 (알파벳 순)

APCA (Accessible Perceptual Contrast Algorithm)

카테고리: Color 별칭: APCA contrast, Lc value

WCAG 3.0이 채택할 차세대 대비 알고리즘. 절대 명도가 아니라 지각적 명도를 기반으로 한다. 값은 Lc 단위로 ±108까지.

관련: WCAG, Contrast Ratio 참고: 02-color-system

Chroma (채도)

카테고리: Color 별칭: C in OKLCH, saturation (구어)

OKLCH·LCH의 채도 축. 0 = 무채색(회색), 클수록 선명. OKLCH에서는 0~0.4 정도가 sRGB 표현 가능 범위.

color-mix()

카테고리: Color 별칭: CSS color-mix function

CSS Color Module Level 5의 색 혼합 함수. color-mix(in oklch, blue 70%, red). 토큰 시스템에서 hover/disabled 변형 생성에 사용.

관련: OKLCH, Relative Color Syntax 참고: 02-color-system

Contrast Ratio (대비)

카테고리: Color 별칭: WCAG contrast, luminance ratio

WCAG 2.x의 대비 측정 — (L1 + 0.05) / (L2 + 0.05). 본문 텍스트는 4.5:1, 큰 텍스트는 3:1, AAA는 7:1.

Display-P3

카테고리: Color 별칭: P3, Apple P3

Apple이 대중화한 광역 색공간. sRGB보다 약 25% 넓은 범위. iPhone·Mac 디스플레이 표준. CSS는 color(display-p3 r g b)로 표기.

관련: sRGB, Gamut, Rec2020 참고: 02-color-system

Gamut (색역)

카테고리: Color 별칭: color gamut

색공간이 실제로 표현 가능한 색의 범위. sRGB ⊂ Display-P3 ⊂ Rec2020. OKLCH 좌표 중 일부는 sRGB 밖이라 fallback이 필요하다.

Gamut Mapping

카테고리: Color 별칭: out-of-gamut handling

색공간 밖의 색을 안전한 범위로 끌어들이는 알고리즘. Chroma를 줄이는 방식(color() fallback)이 표준. CSS Color Level 4에서 명세화.

HSL (Hue, Saturation, Lightness)

카테고리: Color 별칭: HSL color space

직관적이지만 perceptually non-uniform한 색공간. 같은 L 값이라도 색마다 체감 밝기가 다름 — 토큰 스케일에는 부적합.

HWB (Hue, Whiteness, Blackness)

카테고리: Color 별칭: HWB notation

CSS Level 4의 직관적 색 모델. hwb(220 30% 20%) — 흰색·검정 혼합 비율로 색을 만든다. 디자이너 친화적.

Hue (색상)

카테고리: Color 별칭: H in OKLCH/HSL/LCH

색의 각도. 0~360°. OKLCH·HSL·LCH·HWB가 공통으로 가지는 축. 0=빨강, 120=초록, 240=파랑.

Hue Shift

카테고리: Color 별칭: hue rotation in scales

색 스케일을 만들 때 명도에 따라 hue를 미세 조정하는 기법. 어두운 톤일수록 약간 보라로, 밝은 톤일수록 약간 노랑으로 — Radix Colors와 OKLCH 스케일이 사용.

LCH (Lightness, Chroma, Hue)

카테고리: Color 별칭: CIELCh

CIE Lab의 극좌표 표현. perceptually uniform — 같은 L이면 색마다 체감 밝기가 같다. OKLCH보다 먼저 표준화됨.

Lab (CIELAB)

카테고리: Color 별칭: CIE Lab*

1976 CIE가 만든 perceptually uniform 색공간. L(명도) · a(녹-적) · b(청-황). 잉크 산업·인쇄에서 표준.

light-dark()

카테고리: Color 별칭: CSS light-dark function

CSS Color Level 5의 함수. color: light-dark(black, white); — color-scheme에 따라 자동 분기. 다크모드 코드를 절반으로 줄인다.

관련: color-scheme, Dark Mode 참고: 06-theming

Lightness (명도)

카테고리: Color 별칭: L in OKLCH/LCH

OKLCH·LCH의 명도 축. 0(검정) ~ 1(흰색). HSL의 L과 다르다 — OKLCH의 L은 지각적으로 균등하다.

OKLCH

카테고리: Color 별칭: Oklab의 극좌표, OK LCH

Björn Ottosson(2020)의 perceptually uniform 색공간을 극좌표화한 것. L·C·H 세 축. CSS는 oklch(0.5 0.2 220)로 표기. 2024년 이후 디자인 시스템의 사실상 표준.

관련: LCH, Oklab, Chroma, Hue, Lightness 참고: 02-color-system

Oklab

카테고리: Color 별칭: OK Lab

OKLCH의 직교좌표 형태. L·a·b. 그라데이션 보간에 더 유리하다 — linear-gradient(in oklab, ...).

Radix Colors

카테고리: Color 별칭: Radix UI Colors, 12-step scale

WorkOS(구 Modulz)의 12-step 색 스케일. 각 step에 명확한 용도가 있다 — 1·2: bg, 3·4·5: subtle bg, 6·7·8: border, 9·10: solid, 11: text low, 12: text hi.

관련: Hue Shift, Color Scale 참고: 02-color-system

Rec2020

카테고리: Color 별칭: ITU-R BT.2020

UHD TV용 초광역 색공간. Display-P3보다도 넓다. 웹에서는 거의 미사용이지만 HDR 영상에서 표준.

Relative Color Syntax

카테고리: Color 별칭: rcs, color() from

CSS Level 5의 기존 색에서 새 색 만들기 문법. oklch(from var(--c) calc(l * 0.9) c h). 토큰 alias의 차세대 형태.

Color Scale

카테고리: Color 별칭: color ramp, color tonal scale

한 색에서 명도 차이로 만든 연속 단계. Material(50~~900 10 step), Tailwind(50~~950 11 step), Radix(1~12 12 step)가 대표적.

sRGB

카테고리: Color 별칭: standard RGB, default web color

웹의 기본 색공간(1996, HP+MS). 모든 브라우저·디스플레이가 가장 안전하게 표현. 명세 미지정시 모든 색이 sRGB로 해석.

WCAG (Web Content Accessibility Guidelines)

카테고리: Color 별칭: WCAG 2.1, WCAG 3.0

W3C의 웹 접근성 표준. 2.x는 contrast ratio 기반, 3.0(드래프트)은 APCA 기반. 디자인 시스템은 AA(4.5:1) 보장이 사실상 최소 요건.

관련: Contrast Ratio, APCA, forced-colors 참고: 02-color-system

요약 + Mermaid

이 카테고리는 색을 어디서 정의하고 어떻게 검증하는가를 다룬다. 핵심은 OKLCH(현대적 색공간), WCAG/APCA(접근성), Radix Colors(12-step 사실상 표준)의 삼각형.

Token Terms Typography & Spacing Terms