什么是调色板生成器?
调色板生成器创建随机的 5 色调色板,可用于网页设计、平面设计、插画和品牌项目。每个色块显示其十六进制、RGB 和 HSL 值,您可以在重新生成其余颜色时锁定单个颜色。
该工具完全在浏览器中运行,无需注册或账户。调色板可以导出为 CSS 自定义属性、Tailwind 配置值或纯十六进制列表——可直接粘贴到您的项目中。
如何生成调色板
创建调色板快速而直观:
- 点击生成或按空格键创建新的随机 5 色调色板。
- 点击任意色块将其十六进制代码复制到剪贴板。
- 将鼠标悬停在色块上并点击锁定图标以固定该颜色。
- 再次按空格键——只有未锁定的颜色会改变,让您可以围绕最喜欢的颜色构建。
- 使用导出部分以您喜欢的格式复制调色板。
导出格式
该工具支持三种导出格式,便于集成到您的工作流中:
- CSS 变量 — 生成一个 :root 块,包含可放入任何样式表的自定义属性。
- Tailwind — 生成一个 colors 对象,可直接用于 tailwind.config.js 文件。
- 十六进制列表 — 一个简单的换行分隔的十六进制值列表,适用于设计工具和文档。
构建优秀调色板的技巧
- 锁定一两个与品牌匹配的颜色,然后生成以找到互补的强调色。
- 查看 HSL 亮度值,确保文字和背景颜色之间有良好的对比度。
- 对于无障碍设计,文字颜色对比度至少为 4.5:1。
- 生成多个调色板并截图比较,然后再确定最终方案。
常见使用场景
- 为网站、应用和落地页寻找配色方案。
- 为 Logo 和营销材料创建品牌调色板。
- 探索插画和数字艺术的颜色组合。
- 为演示文稿和幻灯片生成主题调色板。
- 使用现成的 CSS 或 Tailwind 值进行快速原型设计。