图形 / 颜色

颜色调色板生成器：一键创建协调配色方案

根据色彩理论生成配色方案：相邻色、互补色、三角色、分裂互补色、单色或随机配色，支持3到8种颜色。锁定喜欢的颜色并重新生成其余颜色，查看每种颜色与白色的对比度，还可将配色导出为CSS变量、Tailwind配置、JSON、十六进制颜色代码或PNG。

颜色调色板生成器：一键创建协调配色方案: 每个配色方案都从基础色相开始；如果已锁定颜色，则使用其中的颜色作为基础色相。其他色相会按照所选规则确定：相邻色每次偏移30°，互补色使用相反色相，三角色每次偏移120°，分裂互补色在两侧各偏移150°，单色则使用同一色相从深到浅的变化。明度和饱和度会有所变化，使配色包含浅色、中间色和深色；每种颜色都会显示其与白色的WCAG对比度。完全在浏览器中本地运行，文件不会上传到服务器。

类别: 开发者工具
使用次数: 在浏览器中
费用: 免费·无需注册
可用性: 可直接使用

配色工作台本地处理

完全在浏览器中运行

和谐色颜色

也可以按空格键。锁定您想保留的颜色。

#64A6F5白色背景上的2.5:1

#382B9D白色背景上的10.5:1

#772BB7白色背景上的7.5:1

#BE4BBA白色背景上的4.3:1

#E0367B白色背景上的4.2:1

导出为

:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

使用调色板

常见的配色比例是：一种中性色约占60%，第二种颜色占30%，强调色占10%，这样最醒目的颜色就能少量用于按钮和高亮。

对比度

4.5:1是普通文本符合WCAG AA的最低标准，3:1适用于大号文本；7:1符合AAA标准。

使用方法

选择配色规则和颜色数量。
按“生成”或空格键，直到找到喜欢的方案；锁定颜色即可保留它们。
将配色复制为代码，或将其下载为PNG。

隐私与限制

所有内容都在你的浏览器中生成。

常见问题

如何保留喜欢的颜色？

点击该颜色上的锁定按钮即可。锁定的颜色会保持不变，其中第一个锁定的颜色还会作为其余颜色的基础色相。

可以使用我的品牌色吗？

可以：点击色块，将其设置为任意颜色，然后锁定它，再围绕该颜色生成其余配色。

配色方案上的文字易于阅读吗？

每个色块都会显示其与白色的对比度。WCAG要求普通文字的对比度至少为4.5:1，因此低于该值的颜色需要使用深色文字。

免费工具·使用在浏览器中次·无需账户

使用调色板

对比度

使用方法

隐私与限制

相关工具

常见问题