M3 색상 시스템 정리

🎨 Color System

M3의 색상 시스템은 단순히 "예쁜 색 조합"이 아닙니다. 하나의 씨앗 색상에서 라이트/다크 모드, 접근성, 개인화를 모두 자동으로 해결하는 알고리즘 기반 시스템입니다.

Color - Material Design 3 - Create personal color schemes

전체 흐름 한눈에 보기

M3 색상 시스템은 아래 흐름으로 동작합니다. 이 흐름을 먼저 이해하면 각 개념이 어디에 위치하는지 명확해집니다.

Source Color (씨앗 색 1개)
    ↓  HCT 알고리즘
5 Key Colors 생성
    ↓  각 Key Color별 Tonal Palette 생성 (13 Tones)
Tonal Palette × 5개
    ↓  라이트 / 다크별 Tone 지정
Color Scheme (29개 Color Role)
    ↓  컴포넌트에 Role 매핑
UI 완성 — 접근성 자동 보장

1단계. Source Color - 시작점

모든 것은 색상 1개에서 시작합니다. 이 색을 Source Color(씨앗 색)라고 부릅니다.

Source Color를 얻는 방법은 세 가지입니다.

방법	설명	사용 시점
배경화면 추출	사용자 배경화면을 양자화(Quantization)해 대표 색 추출	Dynamic Color (Android 12+)
브랜드 색 지정	디자이너가 직접 브랜드 색상 입력	커스텀 테마
콘텐츠 추출	앨범 아트, 영화 포스터 등 인앱 콘텐츠에서 추출	미디어 앱

⚠️ Source Color는 반드시 Primary 색상이 되는 것이 아닙니다. 알고리즘이 HCT 색 공간에서 Hue를 유지하되 Chroma와 Tone을 조정해 Primary, Secondary, Tertiary 등을 파생시킵니다. 입력한 색의 Tone이 86이면 Primary Container에 가깝게 배정되는 식입니다.

2단계. HCT 색 공간 - M3 색상의 핵심 엔진

M3는 일반적인 RGB나 HSL 대신 HCT(Hue-Chroma-Tone) 색 공간을 사용합니다. 사람의 시각 인지 방식을 반영한 색 공간으로, 접근성과 조화로운 색 관계를 수학적으로 보장합니다.

축	의미	범위
Hue (색상)	빨강, 노랑, 초록, 파랑 등 색의 종류	0 ~ 360°
Chroma (채도)	색의 선명함. 0에 가까울수록 무채색(회색)	0 ~ ~120
Tone (밝기)	0 = 완전한 검정, 100 = 완전한 흰색	0 ~ 100

HCT를 쓰는 이유는 Tone 값이 실제 밝기(Luminance)와 선형으로 대응하기 때문입니다. 덕분에 "Tone 40 위에 Tone 100을 쓰면 WCAG 접근성 기준을 통과한다"는 식의 수학적 계산이 가능합니다.

예시: Primary가 Tone 40이면 → On Primary는 항상 Tone 100 (흰색)
→ 이 조합은 자동으로 명도 대비 4.5:1 이상 보장 (WCAG AA 기준)