配色生成器
选择一个基础颜色，立即生成一组由浅到深的渐变色阶，可随时复制到你的设计系统中。
🔒 在您的浏览器本地处理
Loading…
使用方法
- 在“基础颜色”字段中输入 HEX 色值，或点击色块选取器以直观方式选择颜色。
- 只要识别到有效颜色，下方就会自动出现一整组色阶——无需点击任何按钮。
- 色阶范围从非常浅的亮色到非常深的暗色，全部与你的基础颜色保持相同色相。
- 点击任意色块即可将其 HEX 色值复制到剪贴板——界面会短暂显示“已复制！”提示，告知你操作成功。
功能特点
- 从任意基础颜色生成平滑的 9 阶由浅到深色阶
- 每个色阶都保持相同的色相与饱和度，就像 Tailwind 自带的颜色色阶一样
- 色阶中包含你输入的确切基础颜色，而非近似值
- 任意色块的 HEX 色值均支持一键复制
- 100% 在浏览器端运行——你的颜色值永远不会离开浏览器
常见问题
这个工具会把我的颜色发送到任何地方吗？
不会。整组色阶都是通过简单的 JavaScript 运算直接在你的浏览器中生成的——数据从不会被上传或发送到服务器。
色阶是如何计算出来的？
工具会先把你的基础颜色转换为 HSL，然后固定色相与饱和度，让明度从非常浅均匀递减到非常深。你输入的确切基础颜色会被放在色阶的中间位置。
我可以在 Tailwind 或其他设计系统中使用这些配色吗？
可以。这组色阶遵循与 Tailwind 的 50/100/.../900 色阶相同的理念——单一色相的由浅到深渐变——因此你可以直接把 HEX 色值复制到自己的主题或 CSS 变量中。
可以输入哪些颜色格式？
仅支持 HEX 色值，带或不带开头的 #，可以是 3 位缩写（如 #abc）或 6 位完整格式（如 #3b82f6）。如果想直观选择，也可以使用颜色选择器。
为什么会出现错误提示？
你输入的文本与已知的 HEX 颜色格式都不匹配。请确保格式类似 #3b82f6（或 3b82f6，或缩写的 #abc）。