颜色色阶生成器

颜色色阶生成器使用指南

📌 简介

颜色色阶生成器是一款专为 UI 设计师和前端开发者打造的专业调色工具。在现代 UI 设计中（如 Material Design 或 Tailwind CSS），我们很少只使用单一的颜色作为按钮或背景。一个完整的颜色系统通常包含从极浅（50）到极深（950）的 11 个色阶，用于表示不同的状态（如 hover、active、disabled 或不同的背景深度）。本工具只需输入一个主色，即可利用 HSL 色彩模型，通过数学算法精确计算出与之和谐搭配的整套色板。

📖 色阶生成的数学原理

简单地把颜色加白或加黑（RGB 线性插值）往往会导致颜色显得脏或失去原本的质感。本工具在底层将您选中的主色转换为 HSL（色相、饱和度、亮度）模型。在生成浅色（50-400）时，工具大幅提升亮度（L），同时微调降低饱和度（S），使其呈现出柔和、通透的视觉效果；在生成深色（600-950）时，工具不仅降低亮度，还会略微增加饱和度，防止颜色在暗处发灰。这种基于感知色彩学（Perceptual Color）的算法，能生成出媲美专业设计系统的高级色板。

💼 常见应用场景

• 构建设计系统： 为品牌的 VI 主色快速扩展出一套可用于全站的主题色板。
• 适配深色模式： 使用 800、900 级别的深色作为暗黑模式的背景色，使用 200 级别的浅色作为暗黑模式的文字色。
• 图表可视化： 在绘制柱状图或折线图时，使用同一色系的不同深度来区分不同类目的数据。

⚙️ 使用步骤

1. 在顶部选择您的品牌主色（通常对应色板中的 500）。
2. 下方会立即生成从 50 到 950 的整条色阶。
3. 鼠标悬停会显示微交互效果。
4. 点击任意色条即可将其 HEX 色值复制到剪贴板。

⚠️ 注意事项

• 由于不同主色的基础亮度不同，生成的具体数值可能会有轻微波动，这是正常现象。
• 本工具采用业界主流的 11 级色阶划分标准，与 Tailwind 的默认色板非常接近。

❓ 常见问题 (FAQ)