石榴红
手作与手工教程 · 质量分 86 ·优选 · 收录于 2026-10-28 · 最近更新 2026-10-29
石榴红 是一套面向 APP 的 10 色方案：主色 #8e3626，画布 #fbf9f9。正文与画布对比度 14.84:1，达到 WCAG AAA，正文与画布之间留有余量，长时间阅读不吃力；主色与画布对比度 7.4:1，主色上可以直接放白字。
10 个颜色角色
主色
primary品牌主色，用于主要按钮、选中态、强调元素
#8e3626rgb(142, 54, 38)hsl(9.2, 57.8%, 35.3%)主色·深
primaryDark主色按下态 / 深色背景上的主色
#571f15rgb(87, 31, 21)hsl(9.1, 61.1%, 21.2%)主色·浅
primaryLight主色浅底、标签背景、选中弱化态
#d09287rgb(208, 146, 135)hsl(9, 43.7%, 67.3%)辅色
secondary与主色搭配的次要色，用于次级按钮、图标
#8e713brgb(142, 113, 59)hsl(39, 41.3%, 39.4%)强调色
accent点缀色，用于角标、高亮提示
#31edabrgb(49, 237, 171)hsl(158.9, 83.9%, 56.1%)成功
success成功提示、完成状态
#25a259rgb(37, 162, 89)hsl(145, 62.8%, 39%)警告
warning警告提示、待处理状态
#e69d0argb(230, 157, 10)hsl(40.1, 91.7%, 47.1%)危险
danger错误提示、删除操作、失败状态
#de281brgb(222, 40, 27)hsl(4, 78.3%, 48.8%)文字
text正文主文字色
#2d211frgb(45, 33, 31)hsl(8.6, 18.4%, 14.9%)页面背景
bg页面底色
#fbf9f9rgb(251, 249, 249)hsl(0, 20%, 98%)编辑点评 · APP 端
主色按钮上的文字（白字压主色）稳妥
实测 7.8:1，达到 AAA，正文与小字都能放心用。
主色在深色底上的余量留意
实测 2.4:1，低于 3:1，这一处会直接影响可读性。
主色的音量（饱和度）稳妥
饱和度 58%，偏响，适合做强调，大面积铺开会压住内容。
点缀色与主色的距离稳妥
色差 ΔE 448，两者几乎是互补色，分开看很利落，同屏大面积并列会打架。
这套配色是怎么搭起来的
下面六条都从本页色值算出，换一套配色就不成立。
- 主色色区主色落在 9° 的红色区，饱和度 58%、明度 35%。红色做主色分量最重，占的面积稍大一点就会变成警示信号，所以它更适合做操作按钮和关键标记，不适合铺大面积背景。同色区还有 11 套。
- 明度分布十个角色的明度标准差只有 22.5，均值 47%，整体偏平。背景、卡片、文字的明度差不大，结构要更多靠描边、阴影和留白建立，光靠色值本身分不出前后。
- 底色温度底色 #FBF9F9 的饱和度到了 20%、色相 0°，这已经不是灰底而是明确的染色底。它自带情绪，会把整套配色的调子定死，主色只能在这个调子里挑；深色文字压在上面的对比度也得重新算，不能套用常规中性底的经验。
- 同标签位置在「自然」标签下的 3 套配色里，本套主色压底色的对比度是 7.40:1，排第 1 位，属于这一组里最强调可读性的那几套。
- 主次重量主色 7.40:1，强调色只有 1.45:1，相差 5.1 倍，主次关系很明确。强调色在这里更像一个信号而不是第二种主色：适合只标一件事，比如价格、状态或限时，用多了会把主色挤下去。
- 文字层级正文文字压底色 14.84:1，而且这套配色没有单独的次级文字层，所有字都得用这一个颜色。这个数字直接决定它能不能承载信息密集的页面。
搭配建议
主色明度 35%、饱和度 58%，偏深、分量感强，适合需要专业与稳重感的界面，做大标题也站得住。饱和度适中，颜色有存在感却不刺眼，日常界面里最耐看的一档。
适合适合餐饮、零售、内容营销类场景，能有效刺激食欲与购买欲。主色压在底色上实测 7.4:1，已经过了 AAA，正文里当强调色也不必再加深。
慎用金融、医疗等需要稳定与信任感的场景要慎用，容易显得激进、有攻击性。这套不适合改深色主题：主色放在近黑底色上只剩 2.43:1，几乎和底色贴在一起，深色版得整体重挑。
搭配与中性灰、白搭配最稳；把蓝色留给确认状态，红色只留给危险和重点。点缀色压在这套底色上实测 1.45:1，写字会吃力，用它做色块、描边或图形更稳。
用在真实界面里是什么样
实时预览 · 点击切换端
9:41
今日推荐
周末去海边
这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。
查看详情 →主要按钮
次要按钮
禁用状态
无障碍对比度检查
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 14.84:1 | AAA | AAA |
| 主色 / 页面背景 | 7.4:1 | AAA | AAA |
同端其他配色
这套在库里的位置
下面的数字来自同端 31 套配色之间的实测色值对比（十个角色的平均色差），换一个配色库就不成立。
- 和「焦糖橙」几乎是同一套，平均色差 ΔE 36，只差主色那一档。
- 反差最大的是「墨蓝夜」，ΔE 338，两套摆在一起就是两个方向。
- 主色饱和度 58%，同端排第 15 / 31，落在中间。
:root {
--color-primary: #8e3626; /* 主色 */
--color-primaryDark: #571f15; /* 主色·深 */
--color-primaryLight: #d09287; /* 主色·浅 */
--color-secondary: #8e713b; /* 辅色 */
--color-accent: #31edab; /* 强调色 */
--color-success: #25a259; /* 成功 */
--color-warning: #e69d0a; /* 警告 */
--color-danger: #de281b; /* 危险 */
--color-text: #2d211f; /* 文字 */
--color-bg: #fbf9f9; /* 页面背景 */
}