配色是为界面、海报或品牌挑选一组协调的颜色。常用方法基于色轮：在色相环上按固定角度取色，再通过调整明度和饱和度形成层次。
基于色轮的配色规则
- 互补色：色相相差 180°，对比强烈，例如 #1E90FF 的互补色约为 #FF8D1E
- 类似色：色相相差 30° 以内，柔和统一
- 三角配色：色相间隔 120°，例如 #1E90FF、#FF1E90、#90FF1E
- 分裂互补：主色加上互补色两侧各 30° 的颜色
- 单色配色：同一色相，只改变明度和饱和度
60-30-10 比例
界面配色常用 60% 主色（背景、大面积）、30% 辅助色、10% 强调色（按钮、链接）。强调色只用于需要引起注意的地方，效果最好。
可读性检查
文字与背景的对比度应满足 WCAG 标准：正文至少 4.5:1，大号文字至少 3:1。配色好看但对比度不足，会让内容难以阅读。
配色步骤
- 确定一个主色（通常来自品牌色）
- 按色轮规则选出辅助色和强调色
- 为每个颜色准备深浅不同的几个层级
- 检查文字对比度
- 在真实页面中预览并微调
需要动手操作时，可以使用本站的配色方案生成器工具，打开网页即可使用。
常见问题
【互补色怎么算？】把颜色转换为 HSL，色相加 180°（超过 360° 减去 360°），饱和度和亮度保持不变。
【一套界面用几种颜色合适？】一般 1 个主色、1–2 个辅助色、1 个强调色，再加中性灰色。
【配色要考虑色盲用户吗？】要，不要只用红绿区分状态，同时配合文字或图标。
涉及个人信息和账号数据时，请注意保护隐私。
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
