基准色扩展成色阶
输入一个基准色后，快速得到适合主题系统的多档配色候选。
浏览器本地出结果
颜色计算和复制都在浏览器本地完成，不上传服务器，适合设计稿和前端联调。
适合主题变量整理
适合生成 CSS 变量、组件状态色和设计交接时的配色草稿。
颜色方案 · 本地生成
随机基准色或自定义颜色都能生成调色板
适合随机找灵感、延展主题色、制作按钮状态色和快速试配视觉方案。支持单色、邻近色和互补色。
#0848AF
rgb(8, 72, 175)
hsl(217, 91%, 36%)
#0B60EA
rgb(11, 96, 234)
hsl(217, 91%, 48%)
#3C83F6
rgb(60, 131, 246)
hsl(217, 91%, 60%)
#77A8F9
rgb(119, 168, 249)
hsl(217, 92%, 72%)
#B1CEFB
rgb(177, 206, 251)
hsl(216, 90%, 84%)
已生成默认调色板。
工具使用说明
怎么用 TailwindCSS 调色板生成器
选择基准色
先输入或随机生成一个基准色，作为整组色阶的起点。
切换调色模式
按需要切换单色延展、邻近色或互补色，快速比较不同方向。
复制结果交付
确认后把颜色值或 CSS 变量复制到 Tailwind 配置、设计稿或样式表中。
功能说明
这个工具解决什么问题
这页适合哪些场景
适合产品主题配色、Tailwind 变量草稿、设计交接和前端联调时的快速配色延展。
如果你已经有一个品牌主色，需要顺手拉出一整组可用色阶，这种本地工具会比手工试色更快。
这页的边界
当前页优先解决轻量配色延展，不做完整品牌系统、无障碍对比审计或设计资产管理。
如果要上生产设计系统，仍建议结合真实组件、背景和对比度做最后校验。
常见问题
关于 TailwindCSS 调色板生成器，用户常问这些
会上传颜色参数吗？
不会。当前页默认在浏览器本地生成调色板和 CSS 变量。
适合直接拿去配 Tailwind 吗？
适合做第一轮色阶草稿和变量整理，后续再按真实组件场景微调。
能随机出基准色吗？
可以，当前支持随机基准色和手动输入 HEX 两种方式。
会生成 CSS 变量吗？
会，当前页支持直接复制整组颜色变量文本。