夜合紫
家居装修与量房 · 质量分 86 ·优选 · 收录于 2026-10-24 · 最近更新 2026-10-29
夜合紫 是一套面向 小程序 的 10 色方案：主题色 #4e2e9f，画布 #f9f9fb。正文与画布对比度 15.3:1，达到 WCAG AAA，正文与画布之间留有余量，长时间阅读不吃力；主色与画布对比度 9.01:1，主色上可以直接放白字。
10 个颜色角色
主题色
theme小程序全局主题色（navigationBar / tabBar 选中）
#4e2e9frgb(78, 46, 159)hsl(257, 55.1%, 40.2%)按钮色
btn主要按钮背景
#4e2e9frgb(78, 46, 159)hsl(257, 55.1%, 40.2%)按钮禁用
btnDisabled禁用态按钮背景
#ac9bd5rgb(172, 155, 213)hsl(257.6, 40.8%, 72.2%)页面背景
bg页面 backgroundColor
#f9f9fbrgb(249, 249, 251)hsl(240, 20%, 98%)卡片背景
card商品卡 / 内容卡背景
#f4f3f7rgb(244, 243, 247)hsl(255, 20%, 96.1%)主文字
textMain标题与正文
#231f2drgb(35, 31, 45)hsl(257.1, 18.4%, 14.9%)次文字
textSub辅助说明、时间戳
#6b6085rgb(107, 96, 133)hsl(257.8, 16.2%, 44.9%)分割线
divider列表分割线
#e4e1eargb(228, 225, 234)hsl(260, 17.6%, 90%)价格色
price价格 / 促销数字，通常暖色系
#d04023rgb(208, 64, 35)hsl(10.1, 71.2%, 47.6%)标签色
tag标签 / 优惠券底色
#8a449ergb(138, 68, 158)hsl(286.7, 39.8%, 44.3%)编辑点评 · 小程序端
主题色在胶囊按钮上的可读性稳妥
实测 9.5:1，达到 AAA，正文与小字都能放心用。
价格色与主题色的距离稳妥
色差 ΔE 286，分得很开，主次关系清楚。
主题色的音量（饱和度）稳妥
饱和度 55%，偏响，适合做强调，大面积铺开会压住内容。
主题色的明度区间稳妥
明度 40%，中间调，深浅两种底子都能用，排版最好安排。
这套配色是怎么搭起来的
下面六条都从本页色值算出，换一套配色就不成立。
- 主色色区主色落在 257° 的紫色区，饱和度 55%、明度 40%。紫色给出的是创造力和一点距离感，适合内容、设计、轻奢类产品。浅紫做主色时对比度很难达标，通常要靠加深而不是提亮来解决。同色区有 8 套。
- 明度分布十个角色的明度标准差 26.9，均值 59%，层次清楚但不夸张。背景退得下去、卡片浮得起来、文字压得住，把这套转成灰度也还能看出结构。
- 底色温度底色 #F9F9FB 的饱和度到了 20%、色相 240°，这已经不是灰底而是明确的染色底。它自带情绪，会把整套配色的调子定死，主色只能在这个调子里挑；深色文字压在上面的对比度也得重新算，不能套用常规中性底的经验。
- 同标签位置在「治愈」标签下的 3 套配色里，本套主色压底色的对比度是 9.01:1，排第 1 位，属于这一组里最强调可读性的那几套。
- 主次重量主色 9.01:1，强调色 4.50:1，相差 2.0 倍。主次是分开的但不悬殊，强调色够醒目又不至于抢过主色。这类搭配在多数界面里最稳，因为留了两级可用的视觉重量。
- 文字层级正文文字 15.30:1，次级文字 5.49:1。次级那一级落在 4.5:1 到 7:1 之间，正文能用，但压到小字号会吃紧，14px 以下建议改用主文字色。
搭配建议
主色明度 40%、饱和度 55%，落在中低区间，压在浅色底上有足够分量，放进深色主题也不会消失。饱和度适中，颜色有存在感却不刺眼，日常界面里最耐看的一档。
适合带一点高级感，适合希望与众不同的品牌。主色压在底色上实测 9.01:1，已经过了 AAA，正文里当强调色也不必再加深。
慎用紫与红、蓝容易糊成一片，配色时要注意拉开明度差。这套不适合改深色主题：主色放在近黑底色上只剩 1.99:1，几乎和底色贴在一起，深色版得整体重挑。
搭配配浅粉与米白更柔和，想沉稳就压深蓝。点缀色压在这套底色上实测 4.5:1，可以直接承担文字与图标。
用在真实界面里是什么样
实时预览 · 点击切换端
9:41
小程序商城•••
商品名称示例规格 · 500g
¥39.9
商品名称示例规格 · 1kg
¥68.0
立即购买已售罄
无障碍对比度检查
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 15.3:1 | AAA | AAA |
| 主文字 / 卡片背景 | 14.56:1 | AAA | AAA |
| 主色 / 页面背景 | 9.01:1 | AAA | AAA |
同端其他配色
这套在库里的位置
下面的数字来自同端 35 套配色之间的实测色值对比（十个角色的平均色差），换一个配色库就不成立。
- 和「月白蓝」几乎是同一套，平均色差 ΔE 31，只差主色那一档。
- 反差最大的是「生鲜橙」，ΔE 152，两套摆在一起就是两个方向。
- 主色饱和度 55%，同端排第 22 / 35，落在中间。
:root {
--color-theme: #4e2e9f; /* 主题色 */
--color-btn: #4e2e9f; /* 按钮色 */
--color-btnDisabled: #ac9bd5; /* 按钮禁用 */
--color-bg: #f9f9fb; /* 页面背景 */
--color-card: #f4f3f7; /* 卡片背景 */
--color-textMain: #231f2d; /* 主文字 */
--color-textSub: #6b6085; /* 次文字 */
--color-divider: #e4e1ea; /* 分割线 */
--color-price: #d04023; /* 价格色 */
--color-tag: #8a449e; /* 标签色 */
}