配色方案生成器

什么是配色方案生成器？

如何使用配色方案生成器

1. 1

   选生成规则：在页面顶部的规则选项区，点击选中你需要的配色生成规则，比如类比色、互补色、单色等不同的配色方案类型，为后续生成做好准备

2. 2

   选基础颜色：点击页面上的拾色器区域，在拾色面板里滑动挑选，或者直接输入色值，确定你想要的起始基础色，生成逻辑会围绕这个基础色展开

3. 3

   调整参数：拖动色相偏移角度的调节滑块，或者直接输入具体的角度数值，微调参数后工具会实时更新配色，直到得到符合你需求的和谐方案

4. 4

   复制色值：点击结果区里你需要的单色色块，系统就会自动把对应色值复制到剪贴板，你可以直接粘贴到设计软件里使用

什么场景会用到？

计算示例

注意事项

• 不同浏览器对HSL颜色转换的精度保留略有差异，色值偏差一般在1个亮度单位以内，不影响常规设计使用。
• 工具仅生成HEX格式色值，如需RGB/CMYK格式，可使用单独的色值转换工具转换。
• 锁定某一个色块后，重新生成只会修改未锁定的色块，适合固定品牌主色后搭配其他颜色。
• 常见配色规则只适合屏幕UI设计，印刷输出需要单独校准CMYK色域适配。

常见问题

参考资料

• W3C CSS Color Module Level 4 颜色规范
• 国际色彩协会（ICC）色彩空间基础定义

本页工具遵循主流UI设计的通用配色规则，所有生成色值均经过前端程序实时计算校验，由工具集编辑组维护，规则适配常见网页、移动端UI设计场景。