踩了无数坑后，我总结的配色经验分享

刚开始做设计那两年，我最怕的就是配色。排版能对齐，字体能挑，唯独颜色一上手就翻车：要么灰扑扑像没睡醒，要么花得像儿童乐园。后来做前端、做运营页，前前后后改过两百多个页面，才算摸到点门道。下面这些是我自己踩坑踩出来的经验，不是教科书上抄的。

先定主色，别一上来就配

很多人打开调色盘就开始调，东挑一个西挑一个，最后凑出五六种颜色打架。我的做法是先定一个主色，这个主色通常来自品牌logo或者产品调性，占整个页面60%的视觉面积，剩下的才是配角。

配色比例我一直用 60-30-10：主色占大头，辅助色三成，点缀色一成。听起来简单，真做的时候最容易犯的错是点缀色用太多。一个按钮、一个标签、一条分割线全用亮色，眼睛就不知道往哪看。我现在会把所有想用的亮色先摆出来，然后删掉一半，通常剩下那个才是对的。

• 主色定调性，占 60%，一般用在背景、大块区域
• 辅助色做层次，占 30%，用在卡片、次级按钮
• 点缀色只留给最重要的动作，占 10%，比如"立即购买"
• 颜色超过 4 种就该警惕，除非是插画风页面

明度对比比色相更管用

新手盯着色相看，老手先看明度。同样两个蓝色，一个深一个浅，放在一起就有层次；两个明度差不多的颜色，哪怕色相差很远，也会显得糊。我判断对比够不够，常用一个笨办法：把设计稿截图转成灰度，还能看清层级，说明明度差是够的。转成黑白就糊成一片，那配色肯定有问题。

还有个细节，纯黑 #000 和纯灰 #ccc 我基本不用了。正文文字用 #1a1a1a 到 #333 之间，背景灰用带一点色相的，比如 #f7f8fa 或者 #faf9f7。这样页面看起来柔和，不会那么生硬。

实在没灵感，就去偷色

我不觉得从别人作品里取色丢人。真实项目里赶时间，哪有空慢慢调。我常做的三件事：

• 找一张氛围对得上的照片，用取色器抓 3 到 5 个色，按明度排一排，直接当色板用
• 去 Dribbble 或 Behance 搜同类产品，看十张图，记下反复出现的那个色相
• 用现成的配色站生成一组，再手动改掉最扎眼的那一个

去年改一个课程报名页，原来的按钮是橙色，背景也是暖黄，整个页面黏在一起。我把背景换成冷灰，主色保持蓝，橙色只留给按钮。测试了两周，按钮点击率从 4.1% 涨到 6.3%。改动其实很小，就是把颜色重新分了下工。

配色这事没有标准答案

同一个页面换个行业、换个用户群，结论就变了。我的建议是别追求"高级感"这种虚的词，先保证三件事：层级清楚、重点突出、看久了眼睛不累。做到这三点，配色就已经及格了。

还有一点，做完先给别人看一眼。自己盯久了会麻木，我经常觉得自己调得挺好，同事一句"这俩颜色看着有点脏"就把我点醒了。多问几个人，比闷头调色板有用得多。