晨雾青灰
适合后台与工具型产品，长时间使用不易视觉疲劳。
配色落地卡在哪一步
从接到需求到交出视觉稿，拖慢进度的往往不是创意本身
整理逻辑说明
所有方案由编辑团队按内容形态归类，色值经过二次核对，对比度数值取自实际前景与背景的组合计算，而非估算。
精选配色方案
点击任意卡片查看完整色值与使用建议
陶土暖橘
面向品牌首屏与营销活动页，强调情绪与转化。
深海墨蓝
暗色环境下阅读负担小，适合大屏与监控场景。
苔原浅绿
为长文阅读与评论区设计，层级清晰不刺眼。
为什么在这里取色更省事
四件小事，决定了配色环节能不能一次过
01色值即取即用
每套方案同时给出十六进制、RGB 与 HSL 三种写法，粘进设计工具或直接写进 CSS 变量都不需要二次换算。
02按场景归类
后台、落地页、看板、社区等内容形态各有专属分组，不必从几十套风格迥异的色卡里反复筛选。
03对比度前置标注
前景色与背景色的对比度在方案页就完成计算，低于 4.5:1 的组合会被单独标出，减少上线前的无障碍返工。
04轻量无水印
预览图只用于展示色块关系，不叠加水印与遮挡；需要原始色值时直接读取数值，不必对着图片反复吸色。
相关资讯
配色趋势、无障碍规范与整理方法的更新记录
2026-01-14
低饱和主色在网页设计中的回归
过去一年里，超过六成的新增配色方案把主色饱和度压到了 45% 以下。高饱和不再是默认选项，留白与中性色承担了更多结构功能。
配色趋势2025-12-28
对比度达标不等于可读，字号与字重同样关键
对比度只是底线。相同对比度下，14px 常规字重的可读性明显低于 16px 中等字重，正文建议不要低于 15px。
无障碍2025-12-09
从品牌色反推整套色阶的三种思路
按明度等距拆分、按感知亮度曲线拆分、按使用面积反推，三种方式各有适用场景，文中给出了对应的取值区间参考。
工具方法常见问题
关于色值使用、更新频率与落地方式的集中解答
Q色资源在线上的配色方案可以直接商用吗？
站内展示的色值属于通用数据，可以自由用于商业项目。但建议在使用前核对品牌方的商标用色规范，避免与已有品牌的专色产生混淆。
Q一套配色方案通常包含哪些信息？
每套方案提供主色、辅助色与中性色的十六进制及 RGB 色值，同时标注前景与背景的对比度数值，方便判断是否满足 WCAG AA 标准。
Q移动端打开这个页面会不会很慢？
页面采用原生代码构建，不引入任何外部样式库与字体库，图片统一使用 WebP 格式并按需加载，移动端首屏可在 1 秒内完成渲染。
Q配色库多久更新一次？
常规更新为每周一次，每次新增三到五套方案；遇到设计趋势明显变化时会加更专题合集，更新记录同步展示在相关资讯栏目。
Q配色方案如何应用到实际项目里？
先确定主色的使用面积上限，再把中性色分配给大面积底色，辅助色只用于强调元素。落地前建议切换到灰度模式检查一次，确认层级依然清晰。
Q页面上的预览图可以转载吗？
预览图仅用于展示色块关系，转载时请保留来源说明，并附上指向本页的链接，方便读者查证原始色值。
用户留言
来自设计师与前端开发者的使用反馈
阿禾
按苔原浅绿那套改了社区首页，主色面积压到 15% 之后，评论区读起来轻松很多。如果有夜间模式的网页配色方案，希望能再出一期。
老周
做后台十年，第一次见到把对比度数值直接标在方案旁边的，省了来回测的功夫。想问下色资源在线后续会不会补上图表配色的分组？
小满
调色板下载的色值格式很全，HSL 直接贴进变量文件就能用。建议再补充一组印刷场景的 CMYK 参考，方便做线下的物料。