暮江蓝
志愿与公益活动 · 质量分 94 ·优选 · 收录于 2026-10-27 · 最近更新 2026-10-29
暮江蓝 是一套面向 APP 的 10 色方案：主色 #1710dd，画布 #f9f9fb。正文与画布对比度 15.42:1，达到 WCAG AAA，正文与画布之间留有余量，长时间阅读不吃力；主色与画布对比度 9.27:1，主色上可以直接放白字。
10 个颜色角色
主色
primary品牌主色，用于主要按钮、选中态、强调元素
#1710ddrgb(23, 16, 221)hsl(242, 86.5%, 46.5%)主色·深
primaryDark主色按下态 / 深色背景上的主色
#0e099drgb(14, 9, 157)hsl(242, 89.2%, 32.5%)主色·浅
primaryLight主色浅底、标签背景、选中弱化态
#a3a1f0rgb(163, 161, 240)hsl(241.5, 72.5%, 78.6%)辅色
secondary与主色搭配的次要色，用于次级按钮、图标
#cacf32rgb(202, 207, 50)hsl(61.9, 62.1%, 50.4%)强调色
accent点缀色，用于角标、高亮提示
#eff628rgb(239, 246, 40)hsl(62, 92%, 56.1%)成功
success成功提示、完成状态
#1fb75ergb(31, 183, 94)hsl(144.9, 71%, 42%)警告
warning警告提示、待处理状态
#f5a70argb(245, 167, 10)hsl(40.1, 92.2%, 50%)危险
danger错误提示、删除操作、失败状态
#f22618rgb(242, 38, 24)hsl(3.9, 89.3%, 52.2%)文字
text正文主文字色
#201f2drgb(32, 31, 45)hsl(244.3, 18.4%, 14.9%)页面背景
bg页面底色
#f9f9fbrgb(249, 249, 251)hsl(240, 20%, 98%)编辑点评 · APP 端
主色按钮上的文字（白字压主色）稳妥
实测 9.8:1，达到 AAA，正文与小字都能放心用。
主色在深色底上的余量留意
实测 1.9:1，低于 3:1，这一处会直接影响可读性。
主色的音量（饱和度）留意
饱和度 87%，接近纯色，只适合小面积点题。
点缀色与主色的距离稳妥
色差 ΔE 640，两者几乎是互补色，分开看很利落，同屏大面积并列会打架。
这套配色是怎么搭起来的
下面六条都从本页色值算出，换一套配色就不成立。
- 主色色区主色是 242° 的蓝色区，饱和度 87%、明度 47%。蓝色是最安全的品牌色，也是竞争最激烈的，工具、金融、企业服务几乎默认用它。安全性来自它几乎不会引起误读，问题也在这里：它不容易被记住。同色区有 7 套。
- 明度分布十个角色的明度标准差只有 21.8，均值 52%，整体偏平。背景、卡片、文字的明度差不大，结构要更多靠描边、阴影和留白建立，光靠色值本身分不出前后。
- 底色温度底色 #F9F9FB 的饱和度到了 20%、色相 240°，这已经不是灰底而是明确的染色底。它自带情绪，会把整套配色的调子定死，主色只能在这个调子里挑；深色文字压在上面的对比度也得重新算，不能套用常规中性底的经验。
- 同标签位置在「蓝」标签下的 5 套配色里，本套主色压底色的对比度是 9.27:1，排第 1 位，属于这一组里最强调可读性的那几套。
- 主次重量主色 9.27:1，强调色只有 1.12:1，相差 8.3 倍，主次关系很明确。强调色在这里更像一个信号而不是第二种主色：适合只标一件事，比如价格、状态或限时，用多了会把主色挤下去。
- 文字层级正文文字压底色 15.42:1，而且这套配色没有单独的次级文字层，所有字都得用这一个颜色。这个数字直接决定它能不能承载信息密集的页面。
搭配建议
主色明度 47%、饱和度 87%，落在中低区间，压在浅色底上有足够分量，放进深色主题也不会消失。饱和度偏高，情绪强、抓眼，大面积使用容易吵，最好只让它出现在按钮与关键标记上。
适合适合做深色主题的基础色，天然带沉稳与秩序感。主色压在底色上实测 9.27:1，已经过了 AAA，正文里当强调色也不必再加深。
慎用用得实在太普遍，容易没个性，需要靠辅色和排版做出差异。这套不适合改深色主题：主色放在近黑底色上只剩 1.94:1，几乎和底色贴在一起，深色版得整体重挑。
搭配配深蓝做层次、配白做通透，是最不容易出错的两条路。点缀色压在这套底色上实测 1.12:1，写字会吃力，用它做色块、描边或图形更稳。
用在真实界面里是什么样
实时预览 · 点击切换端
9:41
今日推荐
周末去海边
这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。
查看详情 →主要按钮
次要按钮
禁用状态
无障碍对比度检查
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 15.42:1 | AAA | AAA |
| 主色 / 页面背景 | 9.27:1 | AAA | AAA |
同端其他配色
这套在库里的位置
下面的数字来自同端 31 套配色之间的实测色值对比（十个角色的平均色差），换一个配色库就不成立。
- 最接近的是「雪岭蓝」，平均色差 ΔE 65，气质一路，深浅不同。
- 反差最大的是「墨蓝夜」，ΔE 296，两套摆在一起就是两个方向。
- 主色饱和度 87%，在同端 31 套里排第 3，属于最响的那一档。
:root {
--color-primary: #1710dd; /* 主色 */
--color-primaryDark: #0e099d; /* 主色·深 */
--color-primaryLight: #a3a1f0; /* 主色·浅 */
--color-secondary: #cacf32; /* 辅色 */
--color-accent: #eff628; /* 强调色 */
--color-success: #1fb75e; /* 成功 */
--color-warning: #f5a70a; /* 警告 */
--color-danger: #f22618; /* 危险 */
--color-text: #201f2d; /* 文字 */
--color-bg: #f9f9fb; /* 页面背景 */
}