颜色令牌导出器
颜色调色板的单一事实来源，一键导出到你正在发布的任何技术栈。按名称和 hex（3、6 或 8 位）添加令牌，选前缀（`color`、`brand`、`surface` 等），输出会以所选格式重新生成。CSS 在 `:root` 下给 `--color-primary` 自定义属性。Tailwind 给一个 `theme.extend.colors` 块，可粘贴到 `tailwind.config.js`。SCSS 同时给 `$color-primary` 变量和 `map.get` 用的 `$colors` 映射。JSON 遵循 Design Tokens Community Group 的 `{ value, type }` 形式。iOS 给 SwiftUI `Color` 扩展；Android 给带下划线的 `colors.xml` 资源格式。预设让你从品牌、中性刻度或状态颜色开始。
:root {
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-surface: #ffffff;
--color-surface-muted: #f5f5f5;
--color-text: #111827;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
--color-danger: #ef4444;
}名称规范化为 kebab-case。Hex 自动展开 #abc → #aabbcc。
使用方法
- 选预设，或从零构建调色板。名称会被规范化为 `kebab-case`。
- 设置对你技术栈合理的前缀：CSS 用 `color`，Tailwind 用 `colors`（或留空），SCSS 想要纯 `$primary` 就留空。
- 切换格式。复制。粘贴到样式表、主题文件或资源目录。
常见问题
- 为什么前缀?
- 前缀防止冲突并使意图明确。当你还有间距令牌、圆角令牌等时 `--color-primary` 比 `--primary` 读起来更好。Tailwind 中前缀变成 `extend` 下的键 — `extend.colors` 是 Tailwind 默认惯例，但你可能想要 `extend.brand` 或 `extend.surface` 作为带作用域的调色板。
- Design Tokens JSON 是否匹配 W3C 规范?
- 接近。每个令牌使用 `{ value, type: 'color' }`，与 Design Tokens Community Group 草案匹配。严格 W3C 合规可能需要将令牌嵌套在组对象下 — 但大多数工具（Style Dictionary、Specify、Cobalt）能很好处理扁平形状并运行自己的转换。
相关工具
颜色名称查找
为任意 hex/RGB 颜色查找最接近的 CSS、Tailwind 或 XKCD 调查色名 — 按 OKLab 空间感知距离排序。
色盲模拟器
查看你的图片对 8 种色觉异常（CVD）人群分别如何呈现。
从图片提取调色板
拖入图片，工具通过 Canvas 分析主色并提取调色板——复制 HEX 或一键复制全部。
Tailwind 调色板
完整 Tailwind CSS 默认调色板 — 22 色相 × 11 色阶（50 至 950）— 点击复制为 Tailwind 类、HEX 或 rgb()。
Material Design 3 色调（Tonal）调色板
从任意源色生成 Material You / Material Design 3 色调调色板（色调 0–100），含与黑白的对比度，以及 CSS / Tailwind / JSON / SCSS 导出。
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。