본문으로 건너뛰기
AZ Tools

Material Design 3 토널 팔레트

기준 색상 하나로 Material You / Material Design 3 토널 팔레트(톤 0–100)를 생성합니다. 흑백 대비비와 CSS/Tailwind/JSON/SCSS 내보내기 제공.

프리셋
토널 팔레트
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;
}

톤은 Material의 CIELAB L*가 아니라 OKLCH 명도를 기준으로 나뉘고 sRGB 색역으로 클램프되므로, 각 견본은 같은 번호의 Material 3 톤보다 어둡습니다.

사용법

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

자세한 설명

펼치기

소스 색 하나에서 13단계 톤 램프 — 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100 — 를 만듭니다. 머티리얼 디자인 3이 테마 구성에 쓰는 형태입니다. 각 단계는 소스의 색상을 유지한 채 밝기를 그 단계로 맞추고, 그 밝기에서 sRGB 색역이 허용하는 만큼 채도를 밀어 올립니다. 그래서 팔레트가 조용히 잘려 나가는 대신 디스플레이가 실제로 보여 줄 수 있는 만큼 선명하게 유지됩니다. 검정과 흰색 중 더 나은 쪽에 대한 명암비가 모든 색 견본에 함께 인쇄됩니다.

톤 램프의 요점은 명암비를 뺄셈 문제로 바꿔 준다는 것입니다. 머티리얼 자신의 보장은 그쪽 톤 척도 위에서 서술됩니다. 톤이 50 떨어진 두 색은 4.5:1을 넘고, 40 떨어지면 3:1을 넘습니다. 라이트 테마에서 톤 40과 톤 100을, 다크 테마에서 톤 80과 톤 20을 짝짓는 이유이고, 테마를 뒤집는 일이 색을 다시 고르는 것이 아니라 톤 번호를 맞바꾸는 일로 끝나는 이유이기도 합니다. 회색으로 실제 확인해 보면 톤 40과 90은 5.0:1, 30과 80은 5.5:1, 10과 60은 5.4:1이 나옵니다.

토큰 파일에 붙여 넣기 전에 알아 둘 차이가 하나 있습니다. 머티리얼의 톤은 CIELAB 밝기 L*인데, 이 도구는 OKLCH 밝기를 단계로 씁니다. 둘 다 지각적 척도이고 둘 다 균등한 간격의 램프를 만들어 주지만, 같은 숫자는 아닙니다. 여기의 톤 40은 L* 30 근처에, 톤 60은 L* 54 근처에 놓입니다. 즉 각 견본이 같은 이름의 머티리얼 톤보다 대략 한 단계 어둡습니다. 램프는 그 간격 덕분에 쓰고, 각 조합에 대해서는 인쇄된 명암비를 읽으세요. 40이라고 적힌 견본이 기존 테마의 머티리얼 톤 40과 바꿔 쓸 수 있다고 가정하지는 마세요.

한계가 둘 더 있습니다. 양 끝은 고정돼 있습니다. 소스 색이 무엇이든 톤 0은 검정이고 톤 100은 흰색인데, 이것이 어떤 색에서 만든 램프든 다른 색에서 만든 램프와 비교 가능하게 만들어 주는 장치입니다. 그리고 주어진 밝기에서의 최대 채도는 색역에 달려 있으므로, 여기서 sRGB용으로 만든 팔레트는 광색역 디스플레이에서 같은 톤을 렌더링한 것보다 덜 선명해 보입니다. 그쪽에서는 요청한 색이 실제로 더 많이 확보되기 때문입니다.

자주 묻는 질문

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

관련 도구

컬러 토큰 익스포터

컬러 팔레트 한 번 정의 → CSS 커스텀 프로퍼티·Tailwind 설정·SCSS·LESS·디자인 토큰 JSON·SwiftUI Color·Android colors.xml로 익스포트. 라이브 미리보기 스워치.

색상·CSS

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

이미지를 드롭하면 Canvas로 주요 색을 분석해 팔레트 추출 — HEX 복사 또는 전체 일괄 복사.

색상·CSS

컬러 팔레트 생성기

베이스 컬러 선택 → 클래식 색상환 하모니 — 보색·분할보색·삼색·사색·정사각·유사·단색.

색상·CSS

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

기본 색에서 틴트(밝게)·셰이드(어둡게)·톤(회색 혼합) 생성. 2~20 단계, HEX·RGB·HSL 출력.

색상·CSS

컬러 포맷 변환기

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

색상·CSS

OKLCH 컬러 피커

지각적으로 균등한 OKLCH 공간(명도·채도·색조)에서 색 픽 — 각 픽이 sRGB 디스플레이 gamut 안에 들어가는지 표시.

색상·CSS