Material Design 3 色调（Tonal）调色板
颜色
从一个源色出发，按 Material Design 3 规范生成 13 个色调（0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100）的调色板。每个色调保持源色的色相，在目标亮度下把彩度推到 sRGB 色域所允许的上限，使用感知均匀的 OKLCH 亮度阶梯。适合用于 design tokens、给 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，但并非逐比特一致。
使用方法
- 用拾色器选择源色，或粘贴 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。
- 深色模式下的角色（role）呢？
- M3 在浅色模式把 `primary` 映射到色调 40，在深色模式映射到 80；`on-primary` 映射到色调 100 / 20 等等。本工具只提供原始色调阶 —— 把色调分配到角色由你的主题规范决定。