适用人群
- 整理配色的设计师
- 编写按钮与背景样式的开发者
Developer Design Utility
色板生成器
通过一个基础颜色生成 Tailwind 风格的 50~900 色阶调色板，并导出为 CSS Variables、SCSS Variables 或 JSON 格式。
自动生成调色板
以品牌主色为基础自动生成不同明度的颜色层级。
HEX / RGB 预览
以卡片形式查看每个颜色，并可点击复制。
CSS · SCSS · JSON 输出
生成可直接用于项目配置和样式文件的代码。
调色板名称
primary
基础颜色
#2563eb
生成层级
10级
输出格式
CSS
Palette 设置
请选择品牌颜色、调色板名称、生成方式和输出格式。
用于 CSS 变量名、SCSS 变量名以及 JSON 键名。
请输入品牌主色或按钮主要颜色。
设计系统推荐 Tailwind Style，简单界面推荐 Compact。
请选择适合项目样式管理方式的格式。
颜色调色板预览
点击颜色卡片即可复制对应 HEX 颜色值。
请输入基础颜色后点击“生成调色板”。
生成结果
可将以下代码用于 CSS、SCSS 或主题配置文件。
生成调色板后，代码会显示在这里。
从一个HEX颜色生成明暗色阶
从基准色生成浅色和深色，导出CSS变量、SCSS变量或JSON。可选择10级、9级或5级色阶，用于整理界面的颜色标记。
使用场景
- 为品牌色准备明暗变化。
- 将颜色名称和值导出为代码。
从输入到检查结果
- 1
输入色板名称和3位或6位HEX颜色。
- 2
选择10级、9级或精简5级模式。
- 3
生成色板并查看各色的HEX和RGB值。
- 4
选择CSS、SCSS或JSON，再次生成输出。
- 5
应用前检查实际背景和文字之间的对比度。
保留基准色
- 输入
- #2563eb；10级模式
- 结果
- 生成10种颜色，500级保持为#2563eb。
编号风格类似Tailwind，但不是官方色板。
精简CSS
- 输入
- primary；精简模式；CSS输出
- 结果
- 包含100、300、500、700、900，悬停样式使用700。
示例引用当前色阶中存在的变量。
计算与处理原理
低于500的级别将RGB分量与白色混合，高于500的级别与#020617混合，500保留原色。名称会转换为可用标识符，以数字开头时添加palette-前缀。
限制与注意事项
- 这是明暗色阶工具，不提供补色或HSL色彩和谐模式。
- 等间隔RGB混合不代表视觉亮度均匀。
- 示例按钮的白色文字不会自动通过对比度检查。
- 不支持CMYK、专色或带透明度的HEX。
数据处理
颜色和名称在浏览器内处理，不上传到win-j。
参考资料
相关工具
- 玻璃拟态CSS生成器
在有纹理的背景上放置卡片。
- CSS Grid布局生成器
创建随宽度变化的卡片列表。
常见问题
这些是Tailwind官方颜色吗？
不是。工具使用类似的编号，但颜色由自身的RGB混合算法生成。
5级模式包含600吗？
不包含。它使用100、300、500、700、900，悬停示例使用700。
错误的HEX为什么变成蓝色？
当前实现会回退到#2563eb。复制前请确认显示的基准色。