寒山青
农资与农产品 · 质量分 86 ·优选 · 收录于 2026-10-27 · 最近更新 2026-10-29
寒山青 是一套面向 小程序 的 10 色方案：主题色 #1a9589，画布 #f9fbfb。正文与画布对比度 13.76:1，达到 WCAG AAA，正文与画布之间留有余量，长时间阅读不吃力；主色与画布对比度 3.54:1，主色够做大字与控件边界，正文不要压在上面。
10 个颜色角色
主题色
theme小程序全局主题色（navigationBar / tabBar 选中）
#1a9589rgb(26, 149, 137)hsl(174.1, 70.3%, 34.3%)按钮色
btn主要按钮背景
#1a9589rgb(26, 149, 137)hsl(174.1, 70.3%, 34.3%)按钮禁用
btnDisabled禁用态按钮背景
#78dad0rgb(120, 218, 208)hsl(173.9, 57%, 66.3%)页面背景
bg页面 backgroundColor
#f9fbfbrgb(249, 251, 251)hsl(180, 20%, 98%)卡片背景
card商品卡 / 内容卡背景
#f3f7f7rgb(243, 247, 247)hsl(180, 20%, 96.1%)主文字
textMain标题与正文
#1f2d2crgb(31, 45, 44)hsl(175.7, 18.4%, 14.9%)次文字
textSub辅助说明、时间戳
#608581rgb(96, 133, 129)hsl(173.5, 16.2%, 44.9%)分割线
divider列表分割线
#e1eae9rgb(225, 234, 233)hsl(173.3, 17.6%, 90%)价格色
price价格 / 促销数字，通常暖色系
#cc3b1ergb(204, 59, 30)hsl(10, 74.4%, 45.9%)标签色
tag标签 / 优惠券底色
#306c93rgb(48, 108, 147)hsl(203.6, 50.8%, 38.2%)编辑点评 · 小程序端
主题色在胶囊按钮上的可读性留意
实测 3.7:1，只够大字或加粗，不要拿它承载正文。
价格色与主题色的距离稳妥
色差 ΔE 373，分得很开，主次关系清楚。
主题色的音量（饱和度）稳妥
饱和度 70%，偏响，适合做强调，大面积铺开会压住内容。
主题色的明度区间留意
明度 34%，偏沉，压浅底很稳，放进深色界面会退到背景后面。
这套配色是怎么搭起来的
下面六条都从本页色值算出，换一套配色就不成立。
- 主色色区主色是 174° 的蓝色区，饱和度 70%、明度 34%。蓝色是最安全的品牌色，也是竞争最激烈的，工具、金融、企业服务几乎默认用它。安全性来自它几乎不会引起误读，问题也在这里：它不容易被记住。同色区有 6 套。
- 明度分布十个角色的明度标准差 27.9，均值 56%，层次清楚但不夸张。背景退得下去、卡片浮得起来、文字压得住，把这套转成灰度也还能看出结构。
- 底色温度底色 #F9FBFB 的饱和度到了 20%、色相 180°，这已经不是灰底而是明确的染色底。它自带情绪，会把整套配色的调子定死，主色只能在这个调子里挑；深色文字压在上面的对比度也得重新算，不能套用常规中性底的经验。
- 主次重量主色 3.54:1，强调色 4.80:1，相差 1.4 倍。主次是分开的但不悬殊，强调色够醒目又不至于抢过主色。这类搭配在多数界面里最稳，因为留了两级可用的视觉重量。
- 文字层级正文文字 13.76:1 还行，次级文字只有 3.91:1，低于 4.5:1。这一层不能放在小字上，时间戳、辅助说明这类内容要么放大，要么改用主文字色。
搭配建议
主色明度 34%、饱和度 70%，偏深、分量感强，适合需要专业与稳重感的界面，做大标题也站得住。饱和度适中，颜色有存在感却不刺眼，日常界面里最耐看的一档。
适合介于蓝与绿之间，适合需要理性又轻盈的界面。主色压在底色上实测 3.54:1，标题与大字号够用，正文文字交给文字色。
慎用饱和度一高就容易显旧，深色主题里要特别注意与背景拉开明度。深色主题里别把它降成背景：主色放在近黑底色上还有 5.13:1，够显眼，只适合继续做强调色。
搭配配纯白偏科技与医疗感，配深色则有数字感。点缀色压在这套底色上实测 4.8:1，可以直接承担文字与图标。
用在真实界面里是什么样
实时预览 · 点击切换端
9:41
小程序商城•••
商品名称示例规格 · 500g
¥39.9
商品名称示例规格 · 1kg
¥68.0
立即购买已售罄
无障碍对比度检查
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 13.76:1 | AAA | AAA |
| 主文字 / 卡片背景 | 13.24:1 | AAA | AAA |
| 主色 / 页面背景 | 3.54:1 | AA | AA |
同端其他配色
这套在库里的位置
下面的数字来自同端 35 套配色之间的实测色值对比（十个角色的平均色差），换一个配色库就不成立。
- 和「青苹绿」几乎是同一套，平均色差 ΔE 39，只差主色那一档。
- 反差最大的是「生鲜橙」，ΔE 169，两套摆在一起就是两个方向。
- 主色饱和度 70%，同端排第 12 / 35，偏饱和的一侧。
:root {
--color-theme: #1a9589; /* 主题色 */
--color-btn: #1a9589; /* 按钮色 */
--color-btnDisabled: #78dad0; /* 按钮禁用 */
--color-bg: #f9fbfb; /* 页面背景 */
--color-card: #f3f7f7; /* 卡片背景 */
--color-textMain: #1f2d2c; /* 主文字 */
--color-textSub: #608581; /* 次文字 */
--color-divider: #e1eae9; /* 分割线 */
--color-price: #cc3b1e; /* 价格色 */
--color-tag: #306c93; /* 标签色 */
}