网页设计 · 靛蓝主调
深色首屏搭配浅色内容区，强调色只出现在按钮与关键数字上，整页重心稳定。
#4F46E5
#6D67F0
#EEF0FF
#16192B
方案规模
方案库的收录情况
收录范围以实际项目中出现频率高、返工次数多的配色需求为主，历史方案也在持续补齐对比度与色值格式。
1,860组
已收录成组配色方案
42类
覆盖的使用场景
30+ / 周
每周新增与修订方案
6种
提供的色值格式
颜色热度排行
近 30 天取用次数靛蓝 #4F46E5科技与效率类页面首选主色
赤橙 #FF6F4A促销与行动按钮高频强调色
松绿 #2F9E6F健康、内容与会员体系常用
墨灰 #3D4258正文与表单文字稳定色
暖金 #D8B24A尊享感与价格标签的辅助色
薄荷 #8EE0BD数据正向反馈与图表提示
本周精选
本周精选配色方案
六套方案分别对应网页、电商、品牌、界面、看板与演示六个高频区域，每套都给出五个色彩角色与完整色值。
电商促销 · 橙红刺激
大面积暖色底配深棕文字，价格与倒计时用高饱和橙红，浏览压力控制在可接受区间。
#FF6F4A
#FF9770
#FFF1EC
#2B1A14
品牌平面 · 沉稳墨绿
墨绿作主色、暖金作点缀，适合画册、名片与包装，印刷后色泽依然收敛。
#1F7A54
#E8F6EF
#D8B24A
#12241C
移动界面 · 中性灰蓝
大比例中性色承担列表与表单，主色仅用于选中态与主操作，长时间使用不刺眼。
#3D4258
#F5F4F0
#4F46E5
#7B8299
数据看板 · 冷色分层
深底承载大屏图表，用三档冷色区分数据层级，正向指标统一走薄荷绿。
#0F1B3D
#1E2F6B
#8EE0BD
#F5F4F0
演示文稿 · 暖白与赤陶
暖白底降低投影时的刺目感，赤陶色承担标题与图表重点，会议室灯光下字口清晰。
#FBFAF8
#C9451F
#FFB199
#E9E7F1
前后对照
取色方式改变之后，项目里发生了什么
同一批项目在采用成组方案前后，色彩环节的耗时与返工情况差异明显，以下是实际记录下来的变化。
逐页临时选色
每次从空白调色板开始，颜色之间没有固定关系
- 确定主色平均耗时 约 90 分钟，反复替换是常态
- 明暗层级多靠手动调亮，深色区块常出现断层
- 文字与底色对比度不足，正文需要二次返修
- 网页、印刷与屏幕之间色差明显，同一品牌出现两套观感
按方案组取色
主色、辅助色、强调色与明暗阶梯一次确定
- 主色确定时间压缩到 约 15 分钟，其余角色直接分配
- 3 级明暗阶梯现成可用，卡片、分隔线与悬停态不打架
- 方案自带对比度标注，正文色一次到位
- 浅色与深色版本成对提供，跨媒介观感保持一致
更新记录
方案库的阶段进展
从最早的几组基础配色，到如今覆盖六个区域的成组方案，每次更新都补上了新的色彩角色与色值格式。
基础配色上线
起步阶段首批 120 组常用配色开放浏览，只提供主色与辅助色两组色值，重点解决页面底色与文字色的搭配问题。
补齐明暗阶梯
视觉完善每组方案补充 3 级明暗阶梯与悬浮、按下状态色，按钮、标签与卡片在交互时不再依赖临时调色。
浅色与深色成对收录
主题扩展主色保持一致的深色版本上线，夜间模式与深色大屏可直接沿用同一套品牌识别。
场景分区细化
结构升级方案按网页、电商、品牌、界面、看板与演示六个区域重新归位，同一区域内的方案可以互相替换强调色。
色值格式与对比度标注
数据补全HEX、RGB、HSL 三种取值全部补齐，部分方案附带 CMYK 参考值与文字对比度标注，印刷与前端环节都能直接使用。
配色笔记
近期更新的配色笔记
围绕方案库里的实际组合，记录取色思路、对比度处理与跨媒介落地的经验。
内容更新
查看方案
内容更新
查看方案
内容更新
查看方案
内容更新
查看方案
内容更新
查看方案
内容更新
查看方案
活动页用高饱和橙红时，正文色怎么选才不累眼
把大面积暖色底控制在视觉重心之外，文字改用深棕而非纯黑，浏览压力明显下降。
后台界面为什么要让中性色占七成以上
表单、列表与筛选区长期高频使用，主色只保留给选中态与主操作，长时间操作更稳定。
图表序列色分三层，数据层级一眼可读
同色系拉开三个明度档，正向指标固定使用薄荷绿，图例再多也不会互相混淆。
深色主题里主色保持不变，识别度反而更高
只调整底色与文字明度，强调色略微提亮，品牌在两套主题之间不会出现割裂感。
画册与包装印刷，墨绿配暖金的比例建议
暖金控制在一成以内作为点缀，墨绿承担大面积底色，成品色泽比屏幕上更收敛。
投影环境下的演示配色，暖白底比纯白更稳
纯白在会议室灯光下容易过曝，改用暖白底并抬高标题色对比，投影效果更接近预期。
内容保障
方案库的使用保障
从色值准确性到更新节奏，方案库在几个关键环节都有明确约定，取色之后可以直接落到项目里。
色值逐一核对
每套方案的 HEX、RGB、HSL 取值都经过比对，复制到设计软件与样式表中结果一致。
对比度有标注
正文与底色的对比关系在方案中明确标出，长文阅读与浅色主题不必再单独验证。
每周持续更新
每周补充约 30 组新方案，优先覆盖电商大促、数据看板与移动端表单等高频需求。
可直接投入项目
方案中的色彩组合可用于网页、电商、平面与界面等商业项目，按需要对明度做微调即可。
要点速览
取色前值得先确认的几件事
这几个问题决定了方案怎么选、色值怎么分配，先确认清楚，后面的调整会少很多。
先定主色，再配其余角色
主色决定整组配色的性格，辅助色、强调色与底色都围绕它展开，顺序颠倒容易反复推翻。
强调色的面积控制在一成以内
强调色负责吸引视线，铺得越多越容易失去重心，按钮、标签与关键数字是它最合适的位置。
明暗阶梯至少留三级
卡片、分隔线与悬停状态都需要不同明度支撑，三级是最低配置，缺少时会临时调色。
屏幕与印刷分开确认
同一组色值在屏幕与纸张上的呈现差异明显，涉及印刷时需要参考方案附带的 CMYK 取值。
快速答疑
关于配色方案库的常见问题
使用方案库时被问得最多的几个问题，整理在这里，方便快速确认。
方案库里的配色可以直接用于商用项目吗？
可以直接取用。方案中的色值组合适用于网页、电商、平面与界面等商业项目，落稿时可按照项目需要微调主色明度，不影响整体关系。
一组配色里通常包含哪几个角色？
每组方案包含主色、辅助色、强调色、深色文字色与浅色底纹色五个角色，并附带三级明暗阶梯，可以直接分配到标题、正文、按钮与分隔线上。
方案里的色值支持哪些格式？
每套方案同时给出 HEX、RGB、HSL 三种常用取值，部分方案附带 CMYK 参考值与色彩占比建议，方便在设计软件与前端样式表之间来回切换。
浅色主题和深色主题是分开收录的吗？
同一套方案的浅色与深色版本成对收录，主色保持一致，只调整底色与文字明度，切换主题时不会丢失品牌识别。
多久会补充新的配色方案？
方案库每周更新约 30 组，优先补充电商大促、数据看板、移动端表单等使用频率高的场景，历史方案会同步补齐对比度数据。
不同方案之间可以混搭使用吗？
可以。同一色系家族内的方案能够互相替换强调色，只要保持主色明度差在两级以内，混搭之后整体关系依然稳定。
订阅精选配色，每周收到与你场景匹配的方案组
留下关注的场景与接收方式，每周从中挑出的成组配色会附带色值与对比度说明送到你手上。
- 每周约 30 组新方案中的精选部分
- 附主色、辅助色、强调色与明暗阶梯色值
- 按你关注的场景定向整理，不做无关推送