AZ Tools

Material Design 3 토널 팔레트

색상

기준 색상 하나에서 Material Design 3 규약을 따라 13개 톤(0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100) 팔레트를 만듭니다. 각 톤은 기준 색의 색조(hue)를 유지한 채, 목표 명도에서 sRGB 색역이 허용하는 최대 채도(chroma)까지 밀어붙이며, 지각적 OKLCH 명도 램프를 사용합니다. 디자인 토큰, UI 라이브러리 테마, 접근성 색 시스템 구축에 유용합니다. 각 톤마다 흑/백 중 더 좋은 쪽과의 대비비를 표시하므로 안전한 전경/배경 짝을 고를 수 있습니다.

—
프리셋
토널 팔레트
T 0#000000
WCAG 21.00:1
T 10#050013
WCAG 20.67:1
T 20#1c0042
WCAG 18.62:1
T 30#341767
WCAG 14.34:1
T 40#4d3486
WCAG 9.76:1
T 50#6851a5
WCAG 6.35:1
T 60#856fc6
WCAG 5.09:1
T 70#a38de7
WCAG 7.52:1
T 80#c1b0ff
WCAG 10.92:1
T 90#dfd8ff
WCAG 15.40:1
T 95#efecff
WCAG 18.11:1
T 99#fcfbff
WCAG 20.38:1
T 100#ffffff
WCAG 21.00:1
내보내기 — CSS 사용자 속성
:root {
  --primary-0: #000000;
  --primary-10: #050013;
  --primary-20: #1c0042;
  --primary-30: #341767;
  --primary-40: #4d3486;
  --primary-50: #6851a5;
  --primary-60: #856fc6;
  --primary-70: #a38de7;
  --primary-80: #c1b0ff;
  --primary-90: #dfd8ff;
  --primary-95: #efecff;
  --primary-99: #fcfbff;
  --primary-100: #ffffff;
}

톤은 OKLCH(지각 명도) 기반으로 생성되며 sRGB 색역으로 클램프됩니다. Material 3 HCT를 근사하지만 비트 단위로 일치하지는 않습니다.

사용법

  1. 색상 선택기로 기준 색을 고르거나 hex 코드를 붙여넣습니다.
  2. 팔레트 이름을 바꿀 수 있습니다(예: `--primary-40` 의 접두사로 사용).
  3. 내보내기 형식 선택 — CSS 변수, Tailwind 설정, JSON 토큰, SCSS 변수 — 후 복사합니다.
  4. 각 스와치를 클릭하면 해당 hex가 복사됩니다.

자주 묻는 질문

Google의 HCT 알고리즘과 동일한가요?
정신은 비슷하지만 동일하지는 않습니다. Google Material Color Utilities는 CAM16 기반의 HCT를 사용하고, 이 도구는 브라우저 친화적인 지각 색공간인 OKLCH(Björn Ottosson, 2020)를 사용합니다. 같은 명도 톤은 비슷하게 보이지만 정확한 hex는 `material-color-utilities`와 약간 다를 수 있습니다.
톤마다 채도가 다른 이유는?
sRGB는 매우 어둡거나 매우 밝은 명도에서는 채도가 큰 색을 재현할 수 없습니다. 이 도구는 이진 탐색으로 색역 안에 머무는 최대 채도를 찾습니다. 그래서 톤 90(밝은 틴트)은 색이 옅고 톤 50이 대부분의 색조에서 가장 선명합니다.
대비비는 어떻게 읽나요?
흑/백 중 더 좋은 쪽에 대한 WCAG 상대 명도 대비비입니다. ≥4.5는 일반 텍스트의 WCAG AA 통과, ≥3.0은 큰 텍스트 및 UI 요소의 AA 통과 기준입니다.
다크 모드 역할은요?
M3는 라이트 모드에서 `primary`를 톤 40, 다크 모드에서 톤 80으로 매핑하고, `on-primary`를 톤 100 / 톤 20에 매핑합니다. 이 도구는 원시 톤 스케일만 제공합니다 — 역할 할당은 테마 명세의 영역입니다.

관련 도구

색맹 시뮬레이터

8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.

색상00

CSS Box Shadow 생성기

여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.

색상00

컬러 포맷 변환기

어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.

색상00

CSS 그라디언트 생성기

선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.

색상00

컬러 팔레트 생성기

기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.

색상00

색상 대비 검사기

글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.

색상00