颜色令牌导出器
颜色
颜色调色板的单一事实来源，一键导出到你正在发布的任何技术栈。按名称和 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` 资源格式。预设让你从品牌、中性刻度或状态颜色开始。
—
预设:
令牌
预览
primary
primary-hover
surface
surface-muted
text
text-muted
border
danger
输出
: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）能很好处理扁平形状并运行自己的转换。