颜色色阶生成器
从任意基础颜色生成 10 个 Tailwind 风格色阶（50–900），显示每个色阶的 HEX、HSL 和 RGB 值。点击复制单个颜色，或一键复制全部 CSS 变量。纯浏览器运行。
使用方法
- 使用颜色选择器或输入 HEX 值（如
#3b82f6）设置基础颜色。 - 调色板即时更新，显示从最浅（50）到最深（900）的 10 个色阶。
- 每个色块显示 HEX、HSL 和 RGB 值。
- 点击任意色块即可将其 HEX 值复制到剪贴板。
- 点击复制全部（CSS 变量格式）将所有色阶复制为
:rootCSS 块。
复制全部的输出格式
:root {
--color-50: #EFF6FF;
--color-100: #DBEAFE;
--color-200: #BFDBFE;
--color-300: #93C5FD;
--color-400: #60A5FA;
--color-500: #3B82F6;
--color-600: #2563EB;
--color-700: #1D4ED8;
--color-800: #1E40AF;
--color-900: #1E3A8A;
}在设计系统中使用色阶
10 步色阶适用于：
- 主色 / 强调色：用 500 作为主品牌色，浅色阶用于背景和悬停态，深色阶用于文字和边框
- 状态反馈：50–100 用于警告背景色调，700–900 用于其上的文字颜色
- 暗色模式：反转刻度方向——用 900 作背景，50 作文字
- 组件变体：按钮的默认、悬停、激活状态分别可用 500、600 和 700
相关工具
FAQ
色阶是如何计算的？
工具将基础颜色转换为 HSL（色相、饱和度、亮度），保持色相和饱和度不变，在 10 个级别之间插值亮度——从约 96%（最浅，色阶 50）到 10%（最深，色阶 900）。产生类似 Tailwind CSS 颜色系统的自然色板。
什么是 Tailwind 风格的色阶命名？
Tailwind CSS 使用 50 到 900 的数字刻度表示颜色亮度。50 是最浅的色调（接近白色），900 是最深的（接近黑色），500 最接近输入的原始颜色。这种命名约定已成为设计系统的标准模式。
显示哪些颜色格式？
每个色阶显示三种格式：HEX（如 #3b82f6）、HSL（如 hsl(217, 91%, 60%)）和 RGB（如 rgb(59, 130, 246)）。点击任意色块即可复制其 HEX 值。
如何一次复制全部色阶？
点击「复制全部（CSS 变量格式）」按钮，将 10 个色阶以 :root 块的形式复制，CSS 自定义属性名为 --color-50 到 --color-900。
工具是纯客户端运行的吗？
是的。所有颜色计算均在浏览器中完成，不向服务器发送任何数据。