配色方法｜70:25:5法则、3种颜色的选法与不出错的配色技巧

结论：配色由“3种颜色·70:25:5·明度差”决定

在配色上犹豫时，首先要掌握的只有三点：按用途把颜色限定为三种；让这三种颜色使用的面积有明显差距；文字与背景之间保留足够的亮度差（明度差）。只要做到这三点，大部分配色失败都能避免。

颜色本身的喜好和“审美”，其实要在满足这三点之后才开始起作用。反过来说，即使对选色没有信心，只要按规则把数量、面积和明度差调整好，配色就会显得“很专业”。下面依次说明每一点具体怎么定。

底色·主色·强调色的作用

配色的基础是给颜色分配“角色”。不是把喜欢的颜色排在一起，而是分别确定一种作为背景的颜色、一种作为主角的颜色、一种用来吸引目光的颜色。角色清楚之后，新增元素时只要想“它属于哪个角色”，颜色就能马上定下来。

文字颜色不算在三种颜色里，是因为文字是“用来阅读的颜色”，与营造配色印象的颜色作用不同。正文用接近黑色的深色，就能在不破坏配色印象的前提下保证可读性。#333333 或 #1F2937 这样的深灰与白色背景的对比度都在12:1以上，很多人觉得比纯黑更不累眼。

什么是70:25:5法则｜面积差让配色统一

70:25:5法则是底色、主色、强调色使用面积比例的参考标准。室内设计和服装搭配中也使用同样的思路，在设计领域广为人知。重点不在数字本身，而在于“让主角和配角的面积有明确差距”。

人眼会把面积相近的颜色看作“同样重要的东西”。如果主色和强调色是50:50，就不知道该看哪里，整体显得嘈杂。相反，当强调色只用在很小的面积上时，视线会自然地集中到那里。越想突出的东西，越要缩小它的面积，这是配色的诀窍。

• 比例不需要精确测量，“底色占绝对多数，强调色只用一点点”的感觉就足够了。也有介绍为60:30:10的，思路相同。
• 照片或插画多的页面，照片中的颜色也要算作主色或强调色。照片鲜艳时，底色和主色收敛一些，整体就会稳重。
• 如果使用强调色的地方越来越多，说明比例已经乱了。请重新收窄到真正想突出的1〜2处。

决定配色的5个步骤

下面是从零开始决定配色的步骤。顺序很重要：先定主色，再定底色，最后定强调色。比一上来就随意排列颜色要快得多，也不容易犹豫。

1. 1

   用语言确定想传达的印象

   用2〜3个词写下希望观看者感受到的印象，比如“信赖感”“亲切”“高级感”“活力”“沉稳”。写成文字后，选色的标准不会摇摆，向别人说明配色时也很有用。

2. 2

   选一种主色

   选一个符合印象的色相，再调整明暗和鲜艳度。诚实感可以从藏青或蓝色出发，自然感从绿色，温暖感从橙色或棕色出发。纯原色（#FF0000、#0000FF）直接用太强烈，稍微调暗或降低饱和度会更雅致。

3. 3

   确定底色

   犹豫时选白色（#FFFFFF），或非常淡的米白、浅灰。把与主色相同色相调得很淡的颜色作为底色（例如主色是藏青时用 #F1F5F9 这样带蓝调的灰），整体会更统一。

4. 4

   确定强调色

   在色相环上选一个与主色相距较远的颜色。用互补色（对面的颜色）最醒目，用互补色两侧的颜色（分裂互补色）则稍微柔和。强调色只用于按钮和强调部分，所以稍微鲜艳一些也没关系。

5. 5

   用数值确认可读性和观感

   确认文字与背景、按钮文字与按钮颜色的对比度，看正文是否达到4.5:1以上。同时确认不同色觉下的观感，以及变成黑白时能否区分。不够时保持色相不变，只调整明暗。

这5个步骤中，最后的“用数值确认”是很难靠肉眼判断的部分。使用配色检查器，只要输入文字颜色和背景颜色，就能知道对比度和WCAG是否合格；达不到标准时，还会给出保持色相和饱和度、只改变明度的“最接近的合格颜色”。

从色相环选择的配色方案｜互补色·类似色·三角配色

主色确定后，强调色和辅助色按照在“色相环”上的位置关系来选，就能得到协调的组合。色相环是把红·黄·绿·蓝·紫等色相排成圆形的图，颜色在圆上的角度差不同，配色的性格也会改变。

第一次搭配色时，“同色系＋一种互补色的强调色”是最不容易出错的组合。用主色调亮或调暗后的颜色做底色和辅助色，只把对面的颜色用在强调色上，就能同时得到统一感和醒目的重点。互补色的性质，以及红色的互补色为什么既被说成青色又被说成绿色，请参阅什么是互补色。

统一色调（明度·饱和度），颜色多了也不会乱

颜色由“色相（红、蓝等色彩倾向）”“明度（亮度）”“饱和度（鲜艳度）”三个属性决定。其中明度和饱和度的组合称为“色调”。配色看起来不协调，多数原因不在色相，而在于色调不统一。

• 统一为粉彩调（明亮、低饱和度）：温柔·可爱，适合婴儿用品和春季活动
• 统一为鲜艳调（高饱和度）：活力·流行感，适合促销和儿童活动
• 统一为暗色调：厚重·高级·成熟。文字用白色或浅色
• 统一为灰调（偏暗淡的颜色）：沉稳·时尚，适合自然系品牌和咖啡馆

只要色调统一，即使用四五种不同色相的颜色，看起来也很协调。需要给图表分色、或按类别改变颜色时，“统一色调、只改变色相”的方法很方便。相反，在粉彩粉色旁边放纯原色的蓝色，即使颜色很少也会显得突兀。

预先准备几档只改变主色明度的颜色，浅色背景、分隔线、鼠标悬停时按钮的颜色等都能从同一种颜色中做出来，非常方便。配色检查器的“不同明度的色调”中，会显示与基准色色相·饱和度相同、只改变亮度的5个档位。

颜色给人的印象｜选主色的参考

颜色有很多人共同容易感受到的印象。当然这会因文化和个人经历而不同，但作为选主色的出发点已经足够有用。即使是同一色相，调亮会显得轻快，调暗会显得厚重，降低饱和度则会显得沉稳。

选好一种主色后，请把它“调亮的颜色”和“调暗的颜色”也一起试试。同样是蓝色，明亮的水蓝显得清爽，藏青显得可靠，偏灰的蓝灰显得沉稳。寻找与印象关键词相符的明暗，比反复更换色相能更快找到答案。

用对比度确认是否易读

配色中最容易被忽视的是“能不能读”。即使在自己的显示器上看得很清楚，在户外看手机屏幕、用投影仪投放、或者视力较弱的人观看时，明度差小的文字会一下子变得读不清。用数值来确认这一点的就是对比度。

对比度是两种颜色亮度（相对亮度）之比，同一种颜色为1:1，白与黑为最大的21:1。网页无障碍的国际指南 WCAG 2.1 给出了以下标准值。

用实际颜色比较，就能清楚看到外观印象和数值之间的偏差。特别是黄色、橙色、水蓝这类明亮的颜色，看起来鲜艳醒目，但与白色背景或白色文字之间几乎没有明度差。

达不到标准时不必整个换掉颜色。保持色相和饱和度不变，只降低（或提高）明度，几乎不改变印象就能变得易读。在配色检查器中试一下，白色背景上 #999999 的文字会给出 #757575（4.60:1）的方案；放白色文字的橙色按钮 #FF7A00，会给出把背景调暗为 #BD5A00（4.53:1）的方案。

也要照顾色觉差异｜不要只靠颜色传达信息

颜色的看法存在个体差异。据说在日本，男性约每20人中有1人、女性约每500人中有1人具有难以区分红色和绿色等颜色的色觉特性（许多其他国家的比例也相近）。决定配色时，要以“自己看到的颜色差别，并不是所有人都能同样看到”为前提。

• 红与绿、橙与黄绿、蓝与紫等亮度相近的组合会变得难以区分。
• 不要像“红字表示错误”“绿色表示完成”那样只靠颜色传达含义，还要能通过图标·文字·线条形状来区分。
• 图表的系列不只改变色相，也要拉开明度差。如果黑白打印也能区分，大多数色觉下都能区分。
• 比起把图例放在远处，把标签直接写在图表的线或柱旁边更能确切传达。

在配色检查器的“色觉模拟”选项卡中，可以输入最多8种颜色，并排比较第一型（P型）·第二型（D型）·第三型（T型）和灰度下的观感，容易混淆的组合会附带色差数值显示出来。资料和图表颜色区分的具体改法汇总在照顾色觉多样性的配色中。

分场景的配色示例｜附颜色代码和对比度

这里按用途介绍可以直接使用的配色示例。每个示例都由底色·主色·强调色·文字颜色四种组成，并已用对比度确认文字能否读清。主色按钮上以放白色文字为前提，也列出了对应的比值。

底色不用纯白，而用略带主色或强调色色彩的米白，整体印象会变得柔和。咖啡馆示例的 #FFF8F0 和美容示例的 #FFF5F7 就是这样，比白纸或白色屏幕更有温度。

像儿童向示例那样，有些强调色放白色文字的按钮时只能达到3:1左右。这时可以把按钮文字做大做粗，使其适用“大号文字”的标准（3:1）；或者强调色只用于不放文字的装饰和图标，这样既保留活泼的印象，又能保证可读性。

常见的配色失败与改法

犹豫时，建议先把整体转成黑白（灰度）看看。转成黑白后，如果标题和正文、按钮和背景仍能清楚区分，明度差的设计就是成功的。相反，转成黑白后元素融在一起的地方，不要靠加颜色，而要靠拉开亮度来解决。

用配色检查器决定配色的步骤

以上内容都可以用配色检查器在浏览器中一并确认。颜色全部在浏览器内计算，输入的颜色不会发送到服务器。

1. 1

   把主色输入到“文字颜色·基准色”

   除了 #1E40AF 这样的颜色代码，也能读取 rgb() 或 hsl() 的写法。还可以用取色器选择。

2. 2

   在“配色方案”选项卡中查看强调色候选

   会显示互补色·类似色·分裂互补色·三角配色·四角配色的颜色，以及5档不同明度的色调。点击颜色即可复制颜色代码。

3. 3

   在“对比度”选项卡中确认文字颜色和背景颜色

   输入文字颜色和背景颜色后，会列出普通文字·大号文字·UI组件的AA／AAA是否合格。达不到时，会给出只改变明度的最接近的合格颜色。

4. 4

   在“色觉模拟”选项卡中确认是否容易区分

   按下“载入基准色的配色”，配色方案中的颜色会一次性填入。请确认没有残留容易混淆的组合。

5. 5

   用分享URL或复制功能保存结果

   输入的颜色会保留在分享URL中，向团队发送配色方案时很方便。也可以把判定结果或配色以文本形式一并复制。

如果想亲身体验互补色的残像，颜色残像错觉工具也可以参考。能切身理解为什么互补色并排时眼睛会觉得闪烁。

常见问题

配色的70:25:5法则是什么？

这是一个参考标准：底色约占70%、主色约占25%、强调色约占5%的面积时，配色容易协调。不必严格遵守数字，重要的是底色占绝对多数、越想突出的颜色面积越小。它也被称为60:30:10法则。

配色最多用几种颜色比较好？

基本是底色·主色·强调色三种，加上正文的文字颜色共四种。图表分色等需要更多颜色时，统一明度和饱和度（色调）只改变色相，颜色多了看起来也很协调。

主色和强调色有什么区别？

主色是决定整体配色印象的主角，用于标题、页眉等较大面积。强调色是用来吸引视线的颜色，只用在按钮、想强调的数字等很小的地方。选择与主色色相相距较远的颜色作为强调色效果更好。

没有配色天赋也能做出好看的配色吗？

可以。只要遵守把颜色限定为三种、保持70:25:5的面积比、统一色调、文字与背景的对比度达到4.5:1以上这些规则，大部分配色失败都能避免。选好一种主色后，其余颜色可以根据色相环上的位置关系机械地选出。

易读的文字颜色和背景颜色组合是什么？

白色背景上，#333333 或 #1F2937 这样的深灰文字易读，两者的对比度都在12:1以上。按 WCAG 2.1 的标准，正文文字与背景之比应在4.5:1以上，24px以上的大号文字在3:1以上。浅灰（#999999）在白色背景上只有2.84:1，达不到标准。

橙色或黄色的按钮上放白色文字可以吗？

多数情况下会难以阅读。白色文字与橙色（#FF7A00）只有2.61:1，与黄色（#FFFF00）只有1.07:1。请把按钮颜色稍微调暗，或者用深色文字代替白色。#F59E0B 的按钮配 #1F2937 的文字可达6.83:1。

使用互补色后配色太花哨了，怎么办？

缩小互补色一方的面积，让它只作为强调色；或者降低其中一方的饱和度。改用互补色两侧颜色的分裂互补色，既醒目又不容易冲突。互补色的文字和背景容易闪烁，不用于文字比较稳妥。

网页和印刷可以用同一套配色吗？

基本可以，但屏幕颜色（RGB）中有印刷（CMYK）无法再现的鲜艳颜色，特别是明亮的蓝绿色和荧光色会显得发暗。印刷品请按印刷厂的要求用CMYK指定颜色，并用试印稿确认。配色检查器中的CMYK是参考值，不能直接用于印刷交稿。

怎样做出照顾色觉差异的配色？

避免红与绿这类亮度相近的组合，并让信息不仅靠颜色，还能通过明度差·图标·文字·线条形状来区分。确认转成黑白后仍能区分，是判断大多数色觉下能否区分的简单方法。