同一组色值在网页与移动端的落地差异
屏幕尺寸变化之后，同一主色的视觉重量会明显不同，需要在明度上做小幅修正。
主色控制焦点，中性色承载层级
主色只出现在按钮、选中态和关键链接上，出现次数越多，优先级越模糊。
- 正文用深灰而非纯黑，长文阅读更稳
- 卡片与页面背景拉开 2% 到 4% 明度差
- 危险态与品牌色分属不同色相，避免混淆
主辅色比例 · 对比度范围 · 层级色分配
人人色网站视觉搭配指南：让一组颜色在真实项目里站得住
把主色、辅助色、背景色与强调色之间的比例关系写清楚，落到网页界面、电商详情、品牌物料、移动端应用和数据图表中，都能找到可以直接取用的搭配依据。这里不堆抽象概念，只保留改一组色值就能用上的判断标准。
- 网页、电商、品牌物料、移动端、数据图表五类场景条目
- 说明每组组合适合的行业方向与情绪表达
- 标注需要避开的冲突用色与相近色干扰
- 给出文字与背景对比度、层级色深浅的量化参考
收录搭配方法条目 218 篇
覆盖使用场景 32 个
每周新增配色 40+ 组
条目长期校对更新
频道数据
搭配条目的收录规模与更新节奏
每一个数字背后都是一组可以直接对照使用的颜色关系：主色用几处、辅助色压到什么明度、背景色偏灰还是偏白，都写在对应条目里。
4860组
收录配色方案总量
218篇
搭配方法条目
32个
覆盖使用场景
40+
每周新增配色组合
91%
条目附带色值说明比例
色值标注十六进制与用途说明
同组色值覆盖网页、应用与物料
旧条目随规范变化同步校对
搭配方法矩阵
六类高频场景的主辅色分工
同一组颜色放进不同场景，比例和明度分配完全不一样。下面六个方向是素材使用最集中的地方，也是改稿次数最多的部分。
商品是主角，背景负责衬托
背景色的明度直接决定商品边缘是否清晰，反差过大反而会让细节发虚。
- 浅底色配深色商品，避免灰底压暗轮廓
- 促销色块限定在价格与利益点区域
- 同屏不超过两种强调色，防止视觉抢位
主色、辅助色与点缀色的固定秩序
品牌色必须在名片、包装、页面和海报上说同一句话，比例乱了，识别度就散了。
- 主色定识别，辅助色管分区，点缀色提亮点
- 大面积印刷前核对专色与屏幕显示的差异
- 留白区域按主色面积的三倍预留
品牌色负责识别，状态色负责反馈
小屏幕上色彩密度更高，同一种色相在两种明度下就能撑起整个层级。
- 底部导航选中态与页面主色保持一致
- 成功、提醒、错误三态色与品牌色区分开
- 深色模式下重算对比度，不直接反转色值
大字底色决定阅读距离
远距离观看时先看到对比，再看到字。底色与文字的明度差不够，字号再大也读不清。
- 标题与底色明度差保持在明显区间
- 暖色堆叠时用中性色隔开两个色块
- 印刷前按实际纸张调整整体明度
同色系深浅区分系列，避免彩虹配色
系列一多，颜色就成了噪音。同一色相拉开三到四档明度，图表反而更容易读。
- 主系列用同色相深浅，异常值单独用强调色
- 网格线与坐标轴保持弱对比，不抢数据
- 深色底图表提高系列色明度差
效果对比
凭感觉选色与按体系搭配，差别落在哪里
两种做法在开机阶段看起来差不多，真正的差距出现在第二次改稿、第三端适配和第八个人接手的时候。
| 对比维度 | 凭感觉选色 | 按搭配体系选色 |
|---|---|---|
| 主色与辅助色关系 | 逐块临时决定，模块之间色相相互冲突 | 主辅色比例固定，整页观感统一 |
| 文字与背景对比 | 正文对比度偏低，长文阅读容易疲劳 | 对比度受控，长页面阅读稳定 |
| 跨端呈现 | 网页、应用与物料各写各的色值 | 同一组色值覆盖网页、应用与印刷物料 |
| 修改成本 | 换一处颜色牵连多个组件，返工集中 | 色值集中管理，改一处全局同步 |
| 沟通方式 | 用"再亮一点""再深一点"描述方向 | 用色值区间与面积比例说明方向 |
| 上线后维护 | 新增页面时重新试色，风格逐渐漂移 | 新增页面在同一条色阶上延展 |
搭配条目参考：218 篇方法与 4860 组方案均标注适用场景
对比度参考：正文、辅助说明与占位文字分层标注
适配范围：桌面端、移动端、印刷物料与图表
更新里程碑
搭配指南的内容演进
从最早的一批基础条目，到覆盖电商、品牌物料、深色模式与数据图表，判断标准一直在跟着实际项目补充。
2026 年 1 月
视觉搭配指南频道上线
首批 60 条搭配方法整理完成，覆盖网页界面与移动端应用两个方向，明确主辅色比例与层级色写法。
2026 年 3 月
补充电商与品牌物料条目
新增商品衬托底色、促销色块面积、物料留白比例等内容，并加入印刷与屏幕显示的差异说明。
2026 年 5 月
上线对比度与层级判断清单
把正文、辅助说明、占位文字与禁用态拆成分层参考，方便在改色时快速核对可读性。
2026 年 8 月
配色方案库扩充至 4860 组
每组方案补齐适用行业与情绪方向，冲突用色单独标注，检索时可按场景与色相双向筛选。
2026 年 11 月
新增深色模式与图表配色专题
深色底下的明度重算规则、图表同色系深浅分配方式同步收录，并接入色彩专题合集的索引。
搭配资讯
近期更新的方法与案例整理
来自真实项目的搭配记录，包含色值、面积比例和修改过程，方便直接对照自己的项目。
暖色主色搭配中性背景的三种比例
从 15% 到 35% 的主色面积，画面情绪和促销感差别很大，选择取决于页面目标。
深色模式下的层级色怎么定
背景不是纯黑，文字也不是纯白，中间需要两到三档过渡色才能撑住信息层级。
图表配色：同色系深浅的分配方式
系列越多越要克制色相，用同一色相的三到四档明度，异常值单独用强调色标出。
频道入口
配色方案与专题内容的三个入口
方案库提供可直接取用的色组，搭配指南提供判断方法，专题合集按行业与情绪归类，三者配合使用效率最高。
内容保障
每条搭配条目都经得起核对
颜色是细节活，写错一位色值就可能导致落地偏差。内容在收录、标注和更新三个环节都有固定做法。
色值可核对
每组方案标注十六进制色值与用途说明，界面色与印刷色分开标注。
来源可追溯
参考公开设计规范与常见项目实践整理，注明适用条件与限制范围。
更新有节奏
每周固定补充配色组合与搭配条目，热点场景在当周内补齐。
长期可维护
旧条目随规范调整同步校对，避免出现前后矛盾的搭配结论。
4860 组 方案全部标注色值
218 篇 方法条目持续校对
32 个 场景覆盖网页到印刷
每周 固定补充新组合
常见问题
搭配过程中最常遇到的具体疑问
这些问题来自实际改稿与落地环节，答案直接给出可执行的判断标准。
主色出现几次合适？
同一屏内主色控制在三处以内，按钮、选中态与关键数字优先使用，其余位置交给中性色。
背景用纯白还是浅灰？
信息密度高的页面用浅灰打底，卡片保持白色；内容型长页面用纯白更干净。
品牌色太鲜艳怎么办？
把鲜艳色降到大面积背景的说明区域，主色只保留在面积小但位置关键的元素上。
一套界面里主色、辅助色和中性色应该怎么分配面积？
常见做法是主色占 10% 左右，用于按钮、选中态和关键强调；辅助色占 10% 到 15%，用于分区、标签和图表系列；剩下的交给中性色与留白。面积比例比色相选择更容易决定页面是否耐看，配色时先定比例，再挑具体色值。
正文文字与背景的对比度控制在什么范围比较稳？
正文建议保持明显对比，深灰文字配浅色底的组合比纯黑配纯白更耐读，长时间阅读不容易疲劳。辅助说明与占位文字可以降低一档，但不要低到需要费力辨认。深色模式下同样要重算，不要直接把浅色模式的色值反过来用。
同一个色相拉开明度差，能撑起多少层级？
在同一个色相里拉开三到四档明度，通常足够覆盖卡片背景、分隔线、次级按钮和禁用态。超过四档之后相邻层级就难以区分，观感也会变得浑浊。需要更多层级时，用中性色补充，而不是继续加深同一色相。
哪些颜色组合在实际项目中容易出现冲突？
明度和饱和度都很接近、色相却相差不大的组合最容易出问题，例如两个相邻色相的鲜艳色同时大面积出现。另外，把品牌主色和状态色放在同一套色系里，也会让用户分不清强调与提醒。处理方式是让其中一方降低饱和度或改变明度，明确主次。
配色方案可以直接用在实际项目里吗？
方案库中的色值可以自由取用，用于商业项目也没有额外限制。落地时建议结合品牌自身的识别色做一次替换校准，重点核对跨端显示差异与印刷色差，并保留一组备用色以应对对比度不足的情况。
新增页面时怎么保持和旧页面风格一致？
把主色、辅助色、背景色和各层级文字色整理成一份固定的色值清单，新页面只从清单里取值，不再临时试色。需要新颜色时，先在现有色阶上找相近档位，确实不够用再扩充，并同步更新清单。
每周搭配精选
把当周新增的搭配方法与色组收进邮箱
每周整理一组场景搭配，包含色值、面积比例和常见改稿问题，直接用于手头正在做的页面或物料。
- 当周新增配色组合与适用行业方向
- 主辅色比例与对比度的具体参考值
- 来自实际项目的修改记录与踩坑说明