인터페이스를 위한 색채 이론
UI에서 색상은 대부분 명도 문제이며, 단지 색상(hue)이라는 옷을 입고 있을 뿐입니다. 계층, 대비, 가독성, 다크 모드는 모두 명도에 의해 결정됩니다. 색상은 정체성과 의미를, 채도(chroma)는 강조를 전달합니다. 이 순서대로 작업하세요.
도구 키트 — 추측 대신 사용하세요
scripts/palette.py (Python 3, 의존성 없음)는 모든 것을 OKLCH로 계산하고 sRGB로 색역 매핑합니다. 손으로 대비율을 어림잡거나 램프를 고안하지 마세요. 계산할 수 있습니다.
S=<skill-dir>/scripts/palette.py # <skill-dir> = 이 스킬이 로드될 때 표시되는 기본 디렉토리
python3 $S system "#6d28d9" # 전체 시스템: 램프 + 라이트/다크 롤, 모든 쌍 검증 완료
python3 $S system "#6d28d9" --format tailwind # Tailwind v4 @theme + 시맨틱 변수 (css, json = DTCG도 가능)
python3 $S ramp "#0f766e" --format css # 하나의 50–950 램프 (입력값은 가장 가까운 단계로 스냅됨)
python3 $S neutral "#0f766e" --tint 0.01 # 브랜드 색상으로 틴트된 회색 램프
python3 $S contrast "#fff" "#7c3aed" # WCAG 비율 + 레벨 + APCA Lc
python3 $S cvd "#16a34a" "#dc2626" "#2563eb" # 색맹 시뮬레이션 + 혼동 가능한 쌍
python3 $S harmony "#6d28d9" --scheme split # OKLCH에서 색상 관계
python3 $S convert "hsl(...)/#hex/oklch(...)" # 표기법 변환 + 채도 정보
system 명령은 쌍이 실패할 때 램프 단계를 자동으로 조정하며(예: text-muted가 4.5:1이 될 때까지 더 어둡게 이동) 모든 조정 사항을 출력합니다. 이 내용을 사용자에게 전달하세요. 이는 설계 결정입니다.
워크플로: "색상이 필요해"에서 배포된 토큰까지
- 앵커 찾기. 기존 브랜드 색상이 있나요? 사용하세요. 없나요? 제품의 성격에서 도출하고(색상 선택 참조), 단순히 하나를 고르기보다 2~3개의 시드와 각각에 대한 한 줄 설명을 제안하세요.
- 시스템 생성
palette.py system <seed>명령으로. 하나의 강조 램프, 하나의 중립 램프, 그리고 제품이 실제로 렌더링하는 상태 램프만 포함합니다. - 시맨틱 롤에 매핑, 컴포넌트에서 절대 원시 값을 사용하지 마세요(
--color-accent,--color-text-muted,--violet-600금지). 디자인 시스템 구축 스킬이 토큰 아키텍처를 깊이 다룹니다. - 검증: 렌더링된 쌍의 대비(텍스트와 실제 배경, 알파/오버레이 포함), 두 테마 모두, 색상으로 의미를 전달하는 모든 요소(차트, 상태, 태그)에 대한 CVD 검사.
- 제한적으로 적용(아래 참조), 그런 다음 렌더링된 결과를 확인합니다.
색상 사용량: 분포
- 중립색이 작업의 약 90%를 담당합니다. 배경, 표면, 텍스트, 테두리. 좋은 중립색과 하나의 강조색으로 구성된 UI는 여러 색상을 사용한 것보다 거의 항상 더 전문적으로 보입니다.
- 60-30-10은 유용한 기준입니다: ~60% 지배적인 중립색, ~30% 보조 표면/중립 변형, ~10% 강조색. 강조색이 픽셀의 ~10–15%를 넘으면 "여기를 클릭하세요"라는 의미가 약해집니다.
- 뷰당 하나의 채워진 기본 동작. 버튼 배경의 색상은 멀리서도 기본 동작으로 읽힙니다. 색상이 있는 텍스트는 링크로 읽힙니다.
- 하나의 색상, 하나의 의미. 보라색이 "브랜드/상호작용"을 의미한다면, 카테고리 태그에 사용하지 마세요. 상태 색상은 강조색과 명확히 구분되어야 합니다(도구는 OKLCH 색상에서 ≥25° 유지).
- 색상만으로 신호를 보내지 마세요. 남성의 약 8%, 여성의 약 0.5%가 색각 이상을 가지고 있습니다. 색상을 아이콘, 레이블, 패턴 또는 위치와 함께 사용하세요.
색상 선택(브랜드가 없을 때)
연상 작용은 문화에 따라 다르고 실행에 비해 약합니다. 잘 만들어진 팔레트는 "심리적으로 올바른" 색상을 잘못 사용한 것보다 훨씬 낫습니다. 다음 표는 결정을 내릴 때 참고하세요:
| 색상군 | 일반적인 UI 해석 | 일반적인 제품 | 주의사항 |
|---|---|---|---|
| 파랑 / 남색 | 신뢰, 차분, 능력 | 핀테크, SaaS, 건강, 엔터프라이즈 | 가장 흔한 선택; 채도를 높이거나 남색/시안 계열로 이동하여 차별화하세요 |
| 보라색 | 창의적, 프리미엄, "AI" | 창의 도구, AI 제품 | 매우 채도 높은 보라색은 이제 "AI 냄새"가 납니다 |
| 초록 / 청록 | 성장, 돈, 건강, 성공 | 금융, 지속 가능성, 웰니스 | "성공" 상태와 충돌 — 상태 색상을 조정하세요 |
| 빨강 / 장미 | 에너지, 긴급함, 열정 | 음식, 미디어, 엔터테인먼트 | "위험"과 충돌; 브랜드 순간에 사용하고 파괴적 동작과는 구분하세요 |
| 주황 / 호박색 | 따뜻함, 친근함, 행동 | 소비자, 음식, 마켓플레이스 | 어두운 주황은 갈색이 됩니다; 라이트 모드 채움 색상을 확인하세요 |
| 노랑 / 라임 | 낙관, 주의 | 소비자, 장난기 있는 | 흰색 텍스트를 담을 수 없음; 노랑 채움에는 어두운 텍스트를 사용하거나 강조-미묘로 브랜드를 사용하고 채움에는 더 어두운 단계를 선택하세요(--hue-shift -15는 색조가 올리브가 아닌 황금색을 유지) |
| 거의 중립 (검정/스톤/모래) | 럭셔리, 에디토리얼, 도구 | 개발 도구, 패션, 포트폴리오 | 비어 보이지 않도록 타이포그래피와 공간 구성 기술이 필요 |
알아두면 좋은 지역별 참고사항: 빨간색은 중국에서 행운/축하를 의미하지만 서양 금융에서는 손실을 의미합니다(중국/일본 주식 티커에서는 상승). 흰색은 동아시아 일부 지역에서 애도와 관련됩니다. 금융 UI의 경우 상승/하락 색상을 구성 가능하게 만드세요.
지각적 색상 — OKLCH를 사용하는 이유
HSL 명도는 거짓말을 합니다: hsl(60 100% 50%) (노랑)과 hsl(240 100% 50%) (파랑)은 "L=50%"로 같지만 지각적 밝기는 크게 다릅니다. 이것이 HSL 램프가 불균일한 대비를 가지며 색상 간에 어둡고 밝은 단계가 일치하지 않는 이유입니다.
OKLCH = L (지각적 명도 0–1) · C (채도, ~0–0.37) · H (색상 각도). 동일한 L ≈ 색상 간 동일한 지각적 명도를 의미하므로:
- 모든 램프의 동일한 단계(모든
-600s)는 흰색에 대해 유사한 대비를 가집니다. - 명도를 변경하지 않고 색상을 회전할 수 있습니다(하모니, "일치하는" 상태 색상).
- 다크 모드는 L에 대한 추론으로 도출할 수 있습니다.
주의사항: sRGB 색역은 불규칙합니다 — 각 색상은 각 L에서 최대 채도가 다릅니다(노랑은 L≈0.95 근처에서 최고, 파랑은 L≈0.45 근처). 도구는 채도를 줄여 색역 매핑하며 L과 H를 유지합니다. 넓은 색역(Display-P3) 색상은 개선 사항입니다. 먼저 sRGB 값을 선언한 다음 @media (color-gamut: p3) 내에서 P3/oklch() 생생한 값을 선언하세요.
CSS는 모든 최신 브라우저에서 oklch()를 지원합니다. 새 웹 프로젝트에서 사용하세요. 네이티브 플랫폼에서는 플랫폼 표기법(hex/sRGB, Color(red:green:blue:), Color(0xFF…))으로 변환하세요. 도구의 --notation hex가 도움이 됩니다.
램프, 중립색 및 틴트
- 램프는 하나의 색상을 처음부터 끝까지 담습니다. 밝은 쪽에서 더 세밀하게 단계를 나누고(배경이 위치하고 눈이 가장 민감한 곳), 램프 중간에서 채도가 최고조에 달합니다. 11단계(50–950, Tailwind 규칙) 또는 12단계(Radix 규칙, 각 단계에 명명된 역할) — 역할 맵은
references/ramps-and-roles.md를 참조하세요. - 틴트된 중립색: 회색에 브랜드 색상을 약간 혼합합니다(채도 ≈ 0.005–0.02). 전체 UI를 일관성 있게 만듭니다. 순수한 #808080 회색은 채도 높은 강조색 옆에서 생명력이 없어 보입니다. 따뜻한 브랜드 → 따뜻한 회색; 차가운 브랜드 → 차가운 회색.
- 브랜드 UI의 긴 텍스트에는 절대 순수한 검정을 순수한 흰색 위에 사용하지 마세요. 거의 검정(neutral-950)을 거의 흰색 위에 사용하면 눈부심을 줄일 수 있습니다. 다크 모드에서 순수한 검정 배경은 스크롤 시 OLED에서 번짐 현상을 일으킵니다. L ≈ 0.13–0.18을 사용하세요.
다크 모드는 반전이 아닙니다
- 높이는 더 밝게, 그림자처럼 어둡게가 아닙니다: 표면 > 배경을 약 0.03–0.06 L만큼.
- 강조색을 약간 탈포화하고 명도를 높이세요. 채도가 높은 중간 톤은 어두운 배경에서 진동해 보입니다.
- 본문 텍스트는 약간 오프 화이트(neutral-50/100), 흐리게 표시된 텍스트는 neutral-400 정도.
- 채움 색상은 종종 레이블을 어두운 텍스트로 뒤집습니다(도구가 대비에 따라 결정).
- 모든 쌍을 다시 측정하세요. 대비는 반전에서 유지되지 않습니다.
references/dark-mode.md를 참조하세요.
대비 — 표준
| 쌍 | WCAG 2.2 AA | AAA | APCA 지침(참고용) |
|---|---|---|---|
| 본문 텍스트(<24px / <18.66px 굵게) | 4.5:1 | 7:1 | Lc 75+(90 권장) |
| 큰 텍스트(≥24px 또는 ≥18.66px 굵게) | 3:1 | 4.5:1 | Lc 60+ |
| UI 컴포넌트 및 이해에 필요한 그래픽 객체(입력 테두리, 아이콘, 포커스 링, 차트 표시) | 3:1 (SC 1.4.11) | — | Lc 45+ |
| 비활성화된 컨트롤, 장식 요소, 로고 | 면제 | — | — |
WCAG 2.x는 법적/규정 준수 기준입니다(ADA, EN 301 549 / 유럽 접근성 법). APCA(WCAG 3 후보)는 특히 다크 모드와 밝은 텍스트에 대한 지각을 더 잘 모델링하지만 WCAG 3는 아직 최종이 아닙니다. WCAG 2.2 AA를 충족하고 APCA를 추가 의견으로 사용하세요. 세부 사항, 포커스 링 규칙 및 주의사항은 references/contrast-and-cvd.md에 있습니다.
그라데이션, 오버레이 및 알파
- 그라데이션은
in oklab로 보간하세요(부드럽고 중간이 탁해지지 않음). 여러 색상 스윕의 경우in oklch를 사용하세요(중간이 회색이 되는 것을 방지). 텍스트 뒤의 배경인 경우 중간 단계의 명도를 비슷하게 유지하세요. - 이미지 위의 텍스트: 스크림(그라데이션 오버레이) 또는 단색 배경 사용; 최악의 영역을 측정하세요.
- 알파 색상(
/50,rgba)은 아래에 무엇이 있느냐에 따라 대비가 달라집니다. 텍스트에는 단색 토큰을 선호하고 알파는 오버레이, 호버 및 그림자에만 사용하세요.
데이터 시각화
범주형 팔레트는 비슷한 명도와 최대 색상 분리가 필요합니다. 순차형 팔레트는 명도가 단조롭게 변합니다. 발산형 팔레트는 중립 중간점을 공유합니다. 가능하면 dataviz 스킬을 사용하세요(검증된 팔레트 방법이 있음). 차트 계열 색상에 대해 항상 palette.py cvd를 실행하세요.
다른 사람의 색상 검토 — 빠른 체크리스트
- 모든 텍스트/배경 쌍이 두 테마에서 측정되었음(추정 아님)
- 입력 테두리, 포커스 링, 의미를 전달하는 아이콘 ≥ 3:1
- 컴포넌트에 원시 hex/rgb 없음, 시맨틱 토큰만 사용
- 하나의 강조색, 상호작용/기본 의미에만 사용
- 상태 색상이 강조색과 서로 CVD 시뮬레이션에서 구분됨
- 중립색이 일관되게 틴트됨(차가운 회색과 따뜻한 회색 혼합 금지)
- 다크 모드가 설계되었음(높이를 위한 더 밝은 표면, 조정된 강조색), 반전되지 않음
- 색상만으로 의미를 전달하지 않음
심각도 순위가 매겨진 전체 색상 시스템 감사를 위해서는 better-colors 스킬이 훌륭합니다. 색상 선택/도출/생성을 위해서는 여기에 머무르세요.
참고 자료
references/ramps-and-roles.md— 단계별 역할 매핑(Tailwind 50–950 및 Radix 1–12), 상태 색상(호버/활성/비활성/선택됨)references/dark-mode.md— 다크 테마 구축, 높이, 플랫폼별 세부 사항(iOS 시맨틱 색상, Material 톤 표면)references/contrast-and-cvd.md— WCAG 2.2 세부 사항, APCA 레벨, 포커스 표시기, CVD 설계 규칙references/harmony-and-brand.md— 하모니 스킴, 보조 색상 도출, 브랜드-UI 변환, 온도, 동시 대비