三级色图必须使用三种不同色相吗？

不必须。同一色相的深、中、浅三级往往更稳定，尤其适合连续数据和层级背景。

三级配色的常用面积比例是多少？

可从70%主色或中性色、20%辅助色、10%强调色起步，再根据页面信息密度调整。

查看灰度版本，并在手机、普通显示器和投影环境中测试；只靠高色差屏幕判断并不可靠。

2026-07-28

三级色图攻略先解决一个实际问题：界面需要主色、辅助色和强调色时，究竟该用同色阶、邻近色还是对比色？本文限定在设计与数据可视化场景，通过逐项问答比较辨识度、协调性、适用范围和制作难度，帮你快速选出稳妥方案。

在设计场景中，三级色图可理解为由三个视觉层级组成的配色图：一级色负责主体与核心信息，二级色用于分区和辅助内容，三级色承担提示、状态或少量强调。它不是统一行业标准，制作前应先写清层级含义，避免把三个随意挑选的颜色误当成完整体系。本文只讨论界面与图表配色。

同色阶方案是在同一色相上调整明度和饱和度，例如深蓝、中蓝、浅蓝。优点是统一、制作快，适合后台页面、地图分级和连续数据；缺点是投影或低亮度屏幕上容易混成一片。邻近色方案可选蓝、蓝绿、绿色，分区能力更强，画面仍较协调，但要统一明度，否则某一级会无意中抢占注意力。

会员专享，海量内容

红、黄、绿等对比明显的三级色图，适合表达危险、提醒、正常这类离散状态，识别速度通常快于同色阶。不过颜色本身带有固定联想，不宜用于没有高低或好坏含义的普通分类。与同色阶相比，它的层级更醒目；与邻近色相比，它更容易产生冲突，因此强调色面积最好控制在约10%。

先判断数据是连续还是分类：连续数据优先同色阶，普通分类可用邻近色，强状态提示再考虑对比色。随后制作灰度预览，确认三层即使去掉色相仍能区分；再检查小字号、投影和手机屏幕。三级色图攻略的关键不是找三种漂亮颜色，而是让层级含义、视觉强弱和使用场景一一对应。