Color Token Generator

为什么每个设计系统都需要颜色色阶

颜色色阶是统一视觉语言的核心支柱。没有它，设计师和开发者只能做临时决策——"悬停状态用稍深一点的蓝色"或"卡片背景用很浅的版本"——这会产生数十个几乎相同却毫无系统关系的十六进制值。久而久之，代码库中充斥着一次性颜色值，无法统一更新。

一个构建良好的11级色阶能解决这个问题：浅色档（50–200）用于有色调的表面和背景，中间档（300–600）承载按钮、链接和焦点环等交互元素，深色档（700–950）负责文本和高对比度边框。每个决策都能追溯到色阶，更改品牌颜色只需更新一个基础值，而无需在样式表中搜索数百个十六进制代码。

Tailwind 颜色色阶规范

Tailwind CSS 推广了11档数字命名规范——50、100、200至900、950——此后被 Radix UI、shadcn/ui、Material Design 3 以及大多数现代组件库生态系统采纳为标准。其优势在于可预测性：使用过这些系统的开发者能立即判断出500级令牌是中范围基础色，100级令牌是非常浅的色调，800级令牌是用于浅色背景的深色调。

本工具生成的色阶与 Tailwind 内置调色板（蓝色、红色、绿色等）视觉兼容，便于添加能与 Tailwind 默认值自然融合的自定义品牌颜色。Tailwind 导出格式与 tailwind.config.js 中 theme.extend.colors 的期望格式完全一致，CSS 变量导出格式适用于 Tailwind v4 的 @theme 块。

理解 WCAG 对比度比率

文本颜色与背景之间的对比度比率由相对亮度计算——衡量每种颜色在人眼中的感知亮度。WCAG 公式为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮颜色的亮度，L2 是较暗颜色的亮度。结果范围从 1:1（颜色相同，无对比度）到 21:1（白底黑字，最大对比度）。

WCAG AA 要求普通文本达到 4.5:1，大文本（18pt+）达到 3:1。在本工具中，每个色块的白色文本和黑色文本对比度比率都会被计算，并以 W✓ 和 B✓ 徽章显示。中间色阶档（400–600）通常两个阈值都无法通过——它们适用于装饰性填充和交互强调色，而非文本背景。可访问的文本配色存在于两端：非常浅的档用于深色文本，非常深的档用于白色文本。

色彩空间：HSL、OKLCH 及其重要性

传统调色板生成器在 HSL（色调、饱和度、亮度）色彩空间中工作。HSL 直观且支持广泛，但感知上并不均匀：相同的数值亮度步长在不同色调下看起来差异显著。从 50% 到 60% 的亮度变化在蓝色中看起来是大跳跃，在黄色中却是小步骤，因为人眼在整个光谱中对颜色的感知方式不同。

OKLCH 是一个感知均匀的色彩空间，无论色调如何，相同的数值亮度步长对人眼来说都显得相等。Tailwind CSS v4 正是因此在内部切换到了 OKLCH。对于调色板生成器来说，OKLCH 生成的色阶中每一档都真正看起来像是向更浅或更深方向的均匀一步——对于无障碍调色板设计尤为宝贵。

导出为 CSS、Tailwind、SCSS、JSON 和 DTCG

CSS 变量导出在 :root { } 内使用 --color-N 命名模式。Tailwind 导出直接插入 tailwind.config.js 中的 theme.extend.colors——将 'color' 重命名为你的令牌名称（例如 'primary' 或 'brand'）。SCSS 导出使用与 Sass 和 Less 兼容的 $color-N 变量语法。JSON 导出遵循 W3C DTCG 令牌格式，与 Style Dictionary、Theo、Supernova 以及现代令牌管道生态系统中的任何工具兼容。

所有四种格式输出相同的 11 个十六进制值，因此生成后在格式间切换无需任何更改。点击任意单个色块可将其十六进制值直接复制到剪贴板——在需要为 Figma 设计文件、一次性内联样式或快速颜色参考获取特定色调时非常实用。

与 Coolors、Adobe Color 和 Material Design Color Tool 的比较

Coolors.co 是一款调色板发现工具，专为生成随机5色组合而设计。非常适合寻找灵感，但不生成令牌色阶，不输出 Tailwind 配置，也不显示每个色块的 WCAG 对比度徽章。

Adobe Color 提供基于色轮的色彩和谐生成及部分导出选项，但保存和导出调色板需要 Adobe 账号。它不生成 Tailwind 兼容的颜色色阶或 DTCG JSON，也缺乏每档对比度比率显示。

Google 的 Material Design Color Tool 生成10档色阶（缺少50档），专为 Material Design 主题设计——输出结果无法干净地映射到 Tailwind 或其他生态系统。

本工具生成完整的11级色阶，在每个色块上显示 WCAG W✓/B✓ 徽章，导出四种格式，无需登录。所有操作在浏览器中运行——颜色数据不会上传到服务器。