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에 매핑합니다. 이 도구는 원시 톤 스케일만 제공합니다 — 역할 할당은 테마 명세의 영역입니다.

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 라이브러리 테마, 접근성 색 시스템 구축에 유용합니다. 각 톤마다 흑/백 중 더 좋은 쪽과의 대비비를 표시하므로 안전한 전경/배경 짝을 고를 수 있습니다.

—

기준 색상

name내보내기 형식

프리셋

토널 팔레트

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를 근사하지만 비트 단위로 일치하지는 않습니다.

사용법

색상 선택기로 기준 색을 고르거나 hex 코드를 붙여넣습니다.
팔레트 이름을 바꿀 수 있습니다(예: `--primary-40` 의 접두사로 사용).
내보내기 형식 선택 — CSS 변수, Tailwind 설정, JSON 토큰, SCSS 변수 — 후 복사합니다.
각 스와치를 클릭하면 해당 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에 매핑합니다. 이 도구는 원시 톤 스케일만 제공합니다 — 역할 할당은 테마 명세의 영역입니다.

Material Design 3 토널 팔레트

사용법

자주 묻는 질문

관련 도구

컬러 토큰 익스포터

이미지에서 컬러 팔레트 추출

컬러 팔레트 생성기

색상 명도·채도 변형 생성기

컬러 포맷 변환기

색맹 시뮬레이터

랜덤 음악 연습 드릴 생성기