橘灯橙
旅行行程与攻略 · 质量分 86 ·优选 · 收录于 2026-10-25 · 最近更新 2026-10-29
橘灯橙 是一套面向 APP 的 10 色方案：主色 #dd762b，画布 #fbfaf9。正文与画布对比度 14.43:1，达到 WCAG AAA，正文与画布之间留有余量，长时间阅读不吃力；主色与画布对比度 3.01:1，主色够做大字与控件边界，正文不要压在上面。
10 个颜色角色
主色
primary品牌主色，用于主要按钮、选中态、强调元素
#dd762brgb(221, 118, 43)hsl(25.3, 72.4%, 51.8%)主色·深
primaryDark主色按下态 / 深色背景上的主色
#aa5418rgb(170, 84, 24)hsl(24.7, 75.3%, 38%)主色·浅
primaryLight主色浅底、标签背景、选中弱化态
#eed2bergb(238, 210, 190)hsl(25, 58.5%, 83.9%)辅色
secondary与主色搭配的次要色，用于次级按钮、图标
#54c9bfrgb(84, 201, 191)hsl(174.9, 52%, 55.9%)强调色
accent点缀色，用于角标、高亮提示
#28a0f6rgb(40, 160, 246)hsl(205, 92%, 56.1%)成功
success成功提示、完成状态
#24b761rgb(36, 183, 97)hsl(144.9, 67.1%, 42.9%)警告
warning警告提示、待处理状态
#f5a80frgb(245, 168, 15)hsl(39.9, 92%, 51%)危险
danger错误提示、删除操作、失败状态
#ec3022rgb(236, 48, 34)hsl(4.2, 84.2%, 52.9%)文字
text正文主文字色
#2d251frgb(45, 37, 31)hsl(25.7, 18.4%, 14.9%)页面背景
bg页面底色
#fbfaf9rgb(251, 250, 249)hsl(30, 20%, 98%)编辑点评 · APP 端
主色按钮上的文字（白字压主色）留意
实测 3.1:1，只够大字或加粗，不要拿它承载正文。
主色在深色底上的余量稳妥
实测 6.0:1，过了 AA，正文可以，小字与细线还要留意。
主色的音量（饱和度）稳妥
饱和度 72%，偏响，适合做强调，大面积铺开会压住内容。
点缀色与主色的距离稳妥
色差 ΔE 438，两者几乎是互补色，分开看很利落，同屏大面积并列会打架。
这套配色是怎么搭起来的
下面六条都从本页色值算出，换一套配色就不成立。
- 主色色区主色落在 25° 的红色区，饱和度 72%、明度 52%。红色做主色分量最重，占的面积稍大一点就会变成警示信号，所以它更适合做操作按钮和关键标记，不适合铺大面积背景。同色区还有 10 套。
- 明度分布十个角色的明度标准差只有 21.8，均值 55%，整体偏平。背景、卡片、文字的明度差不大，结构要更多靠描边、阴影和留白建立，光靠色值本身分不出前后。
- 底色温度底色 #FBFAF9 的饱和度到了 20%、色相 30°，这已经不是灰底而是明确的染色底。它自带情绪，会把整套配色的调子定死，主色只能在这个调子里挑；深色文字压在上面的对比度也得重新算，不能套用常规中性底的经验。
- 同标签位置「森林」这组 4 套里，本套的 3.01:1 排第 4 位，是偏轻的一档。放在同一批竞品里它不会先跳出来，适合做第二层主色，或者用在本来就不抢注意力的页面。
- 主次重量主色压底色 3.01:1，强调色压底色 2.70:1，两者只差 1.1 倍，是双主角结构。两个颜色视觉重量相当，适合让强调色承担同样重要的第二类操作。风险是用户看不出哪个该先做，得靠位置和面积补足主次。
- 文字层级正文文字压底色 14.43:1，而且这套配色没有单独的次级文字层，所有字都得用这一个颜色。这个数字直接决定它能不能承载信息密集的页面。
搭配建议
主色明度 52%、饱和度 72%，明度居中，兼容性最好，浅色与深色主题都容易适配。饱和度适中，颜色有存在感却不刺眼，日常界面里最耐看的一档。
适合用作次级强调很讨喜：比红温和、比黄可靠，适合引导而不过分命令。主色压在底色上实测 3.01:1，标题与大字号够用，正文文字交给文字色。
慎用大面积使用容易显廉价，需要专业感的 B 端产品里要克制。深色主题里别把它降成背景：主色放在近黑底色上还有 6.03:1，够显眼，只适合继续做强调色。
搭配同色系里用深浅橙做层次，比再混入第三种彩色更耐看。点缀色压在这套底色上实测 2.7:1，写字会吃力，用它做色块、描边或图形更稳。
用在真实界面里是什么样
实时预览 · 点击切换端
9:41
今日推荐
周末去海边
这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。
查看详情 →主要按钮
次要按钮
禁用状态
同端其他配色
这套在库里的位置
下面的数字来自同端 31 套配色之间的实测色值对比（十个角色的平均色差），换一个配色库就不成立。
- 和「焙茶橙」几乎是同一套，平均色差 ΔE 50，只差主色那一档。
- 反差最大的是「墨蓝夜」，ΔE 342，两套摆在一起就是两个方向。
- 主色饱和度 72%，在同端 31 套里排第 4，属于最响的那一档。
:root {
--color-primary: #dd762b; /* 主色 */
--color-primaryDark: #aa5418; /* 主色·深 */
--color-primaryLight: #eed2be; /* 主色·浅 */
--color-secondary: #54c9bf; /* 辅色 */
--color-accent: #28a0f6; /* 强调色 */
--color-success: #24b761; /* 成功 */
--color-warning: #f5a80f; /* 警告 */
--color-danger: #ec3022; /* 危险 */
--color-text: #2d251f; /* 文字 */
--color-bg: #fbfaf9; /* 页面背景 */
}