让你的视觉体验“色”不思蜀!的关键，不是把画面塞满鲜艳颜色，而是用三种具有层次的黄色建立明确秩序：浅黄负责大面积铺陈，中黄负责识别和氛围，深黄或赭黄负责强调与收束。白色、米色、炭黑等中性色可以作为文字和留白的辅助色，但不必算进黄三色的核心配色。

黄三色并非简单地选择三种亮黄色。更实用的做法，是从明度、饱和度和使用面积三个维度拉开差异，让画面同时具备温度、对比和阅读舒适度。浅黄适合背景，正黄适合按钮、图标或局部图形，深黄适合边框、标题装饰和小面积视觉锚点。

黄三色配色先分清三种颜色的职责

黄三色配色的稳定性，首先取决于每种颜色是否承担不同任务。三种颜色如果明度和饱和度都接近，画面容易显得刺眼、平面，视觉焦点也会互相争夺。

• 浅黄色：承担空间与背景。奶油黄、雾黄、米黄色适合网页底色、卡片区域、海报留白和大面积背景。浅黄色的饱和度不宜过高，否则长时间观看容易产生疲劳。
• 中黄色：承担识别与情绪。明黄、向日葵黄、蜂蜜黄适合品牌按钮、信息标签、插画主体和局部标题。中黄色应当出现在需要被注意的位置，而不是均匀铺满整个页面。
• 深黄色：承担重点与边界。芥末黄、金棕色、赭黄色能够压住画面，适合小标题、线条、图标、投影和重点装饰。深黄色面积过大时，画面会显得沉闷，因此通常作为少量强调色使用。

黄三色配色魔法的核心，是让三种黄色形成“浅色打底、中色识别、深色收口”的关系。设计者可以先确定主色，再根据内容层级分配另外两种颜色，不能先挑三块好看的色板，再临时决定每种颜色放在哪里。

用60-30-10比例安排黄色面积

黄色三色方案的面积分配，可以借助60-30-10的比例建立初始秩序，但这个比例不是必须严格执行的规则。比例中的60%通常属于低饱和浅黄或中性色，30%属于中黄色，10%属于深黄、高饱和黄或对比强调色。

1. 先确定60%的视觉底色。如果应用场景需要轻盈、干净的感觉，可以选择奶油黄或偏米色的浅黄；如果场景强调活力，可以使用更明亮的淡黄色，但要降低饱和度。
2. 再安排30%的识别区域。中黄色可以用于导航、卡片标题、插画主体、产品包装局部或行动按钮。相同颜色应尽量承担相近功能，避免页面中每个区域都拥有同等权重。
3. 最后保留10%的强调色。深黄、金棕色或偏橙黄适合突出关键动作、价格、提示、边框和视觉焦点。强调色越少，重点越容易被看见。
4. 用中性色补足可读性。深灰、炭黑和暖白可以帮助文字、图标与黄色背景分离。中性色不是破坏黄三色风格，而是确保信息能够被准确识别。

让你的视觉体验“色”不思蜀!时，60-30-10比例能够避免黄色平均分布造成的混乱。电商促销海报可以提高中黄色和强调黄色的比例，阅读型页面则应扩大浅黄与暖白区域，减少高亮黄色对文字阅读的干扰。

网页、海报与包装的黄三色用法不同

不同视觉载体对黄三色的需求并不相同。屏幕界面重视连续阅读和交互反馈，海报重视远距离识别，包装则需要兼顾货架辨识度、印刷还原和品牌气质。

不同场景下的黄三色分配建议

使用场景	浅黄色安排	中黄色安排	深黄色与风险控制
网页或应用界面	用于页面背景、卡片底色和分区留白	用于按钮、标签、选中状态和提示区域	用于图标或边界；正文不要使用中黄直接压在白底上
活动海报	用于大面积背景，降低饱和度以保护文字空间	用于主视觉、标题块和活动信息	用于标题描边或局部装饰；避免三种颜色面积相等
食品或生活方式包装	营造自然、清爽或温和的底色	提升货架识别度，突出品类和产品名称	增加成熟、手作或复古气质；印刷前需要检查偏色
儿童与教育内容	提供明快但不刺眼的阅读背景	突出互动按钮、插图和知识模块	控制高亮区域面积，避免密集使用造成视觉疲劳

明度比饱和度更影响黄色的可读性

黄色视觉体验的主要难点，在于黄色本身明度较高，浅黄与白色之间的差异很小，中黄与浅灰之间也可能缺少足够分离度。设计稿看起来明亮，不代表用户能够快速读清文字。

• 浅黄背景配深色文字。暖黑、深灰、深棕色通常比纯黑更柔和，但文字与背景必须形成清晰明暗差异。标题、正文、按钮文字应分别检查，而不能只看整体气氛。
• 中黄按钮配深色字。明黄色按钮上使用深灰或炭黑文字，通常比使用白色文字更容易阅读。白字只有在按钮底色足够深、面积足够明确时才适合使用。
• 深黄色不要伪装成正文色。赭黄和金棕色适合标题装饰、短标签或图标，不宜承载大段正文。长文本需要更稳定的深色中性色。
• 不要只靠颜色传递状态。成功、警告、选中和错误状态还应通过文字、图标、形状或位置区分，避免用户只能依靠黄色深浅判断信息。

显示器亮度、环境光线和印刷纸张都会改变黄色的观感。屏幕上的鲜亮黄可能在纸张上变成偏暗的土黄，暖白背景也可能让浅黄几乎消失，因此重要设计需要同时查看大尺寸、缩略图和实际输出效果。

把黄三色配色魔法落地成可执行流程

黄三色配色的执行流程应当从内容重点开始，而不是从软件里的色板开始。确定视觉目的后，再决定黄色的温度、面积和强调强度，能够明显减少反复试色。

1. 写出画面唯一的第一重点。第一重点可以是产品名称、报名按钮、价格、活动主题或图片主体。第一重点只能拥有最高饱和度、最大尺寸或最强对比中的一到两项。
2. 制作三档色阶。先选一档浅黄、一档中黄和一档深黄，再观察它们转为灰度后是否仍然具有明暗层次。灰度关系完全相同，会导致彩色画面也缺少层次。
3. 先做黑白结构再上色。先用灰阶确认标题、图片、按钮和留白的位置，再把黄色分配进去。结构没有建立时，增加颜色只会掩盖布局问题。
4. 保留一组稳定的中性色。暖白用于大面积留白，深灰用于正文，炭黑用于强提示。中性色越稳定，三种黄色越容易形成品牌识别。
5. 分别检查三种尺寸。大尺寸查看细节，小尺寸检查焦点，手机尺寸检查文字与按钮。缩小后仍然能快速找到重点，说明面积和层级基本合理。

黄色过亮、过脏或过乱时如何调整

让你的视觉体验“色”不思蜀!并不意味着所有区域都要保持高亮。黄色方案出现问题时，应先判断是面积、明度、饱和度还是信息层级失衡，再进行针对性调整。

• 画面刺眼：先缩小高饱和中黄色的面积，再把背景改为低饱和浅黄或暖白，不要简单地把所有黄色同时调暗。
• 画面发灰发脏：检查深黄色是否占比过大，或是否混入过多相近的棕色。保留一个清晰的中黄色作为识别点，并用暖白拉开空间。
• 画面没有重点：减少同级按钮、标题和装饰的黄色数量。强调色只服务于需要行动或需要记忆的信息。
• 画面显得廉价：降低大面积亮黄的饱和度，增加留白和深色文字，避免渐变、描边、阴影同时使用。
• 不同设备观感差异大：不要只在一台高亮显示器上判断颜色。需要在普通亮度、暗光环境和实际印刷样张中检查黄色是否仍然清楚。

好的黄色三色方案不是颜色越多越丰富，而是让用户在第一眼看到重点，在阅读过程中保持舒适，在操作或浏览结束后留下明确的视觉记忆。只要浅色负责空间、中色负责识别、深色负责强调，黄色也能兼顾活力与秩序。

人民网校对：王志安(ydsuijfkbwerugweiurqgweiuwqhbwe)