Developer Design Utility
Color Palette 生成器
通过一个基础颜色生成 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 或主题配置文件。
生成调色板后，代码会显示在这里。
帮助
什么时候使用 Color Palette 生成器？
当需要统一网站按钮、背景、边框、悬停效果和深色模式等整体色彩体系时使用。
50~900 色阶代表什么？
数字越小颜色越亮，数字越大颜色越深。通常将 500 或 600 作为品牌主色。
- 50~100：浅色背景
- 200~300：浅色边框或悬停背景
- 400~600：按钮、链接、强调色
- 700~900：强调文字或深色背景
推荐用法
- 品牌主色推荐使用 500 或 600 色阶。
- 按钮背景使用 500~600，悬停状态使用 600~700。
- 卡片背景或提示背景适合使用 50~100。
- 边框适合使用 200~300 色阶。
使用 CSS Variables 的优势
通过 CSS Variables 可以在多个页面中复用统一的颜色体系，未来修改品牌颜色时也更容易统一更新。
基础颜色应该如何选择？
建议使用网站最常见的按钮颜色或品牌主色。中等亮度的颜色通常比过亮或过暗的颜色更适合生成完整调色板。
应该选择 CSS Variables 还是 SCSS Variables？
普通 CSS 项目推荐 CSS Variables，使用 SCSS 构建的项目推荐 SCSS Variables。
JSON 输出有什么用途？
可用于设计令牌（Design Tokens）、主题配置、前端配置对象以及构建系统。