铜锣橙
公益组织主页 · 质量分 86 ·优选 · 收录于 2026-10-26 · 最近更新 2026-10-29
铜锣橙 是一套面向 WEB 的 10 色方案：Primary #c15a11，画布 #fbfaf9。正文与画布对比度 14.43:1，达到 WCAG AAA，正文与画布之间留有余量，长时间阅读不吃力；主色与画布对比度 4.25:1，主色够做大字与控件边界，正文不要压在上面。
10 个颜色角色
Primary
primary主色，对应 CSS 变量 --color-primary
#c15a11rgb(193, 90, 17)hsl(24.9, 83.8%, 41.2%)Primary Hover
primaryHover悬停态：--color-primary-hover
#813b09rgb(129, 59, 9)hsl(25, 87%, 27.1%)Primary Active
primaryActive按下态：--color-primary-active
#492104rgb(73, 33, 4)hsl(25.2, 89.6%, 15.1%)Text Main
textMain主文字：--color-text-main
#2d251frgb(45, 37, 31)hsl(25.7, 18.4%, 14.9%)Text Sub
textSub次级文字：--color-text-sub
#857060rgb(133, 112, 96)hsl(25.9, 16.2%, 44.9%)Background
bg页面背景：--color-bg
#fbfaf9rgb(251, 250, 249)hsl(30, 20%, 98%)Surface
surface卡片/面板背景：--color-surface
#f7f4f3rgb(247, 244, 243)hsl(15, 20%, 96.1%)Border
border边框分割线：--color-border
#eae5e1rgb(234, 229, 225)hsl(26.7, 17.6%, 90%)Link
link链接色：--color-link
#7f3907rgb(127, 57, 7)hsl(25, 89.6%, 26.3%)Accent
accent强调色：--color-accent
#28f6e5rgb(40, 246, 229)hsl(175, 92%, 56.1%)编辑点评 · WEB 端
链接色与正文的距离留意
色差 ΔE 137，偏近，建议再用明度或图标拉开一层。
链接色压在底色上的可读性稳妥
实测 8.1:1，达到 AAA，正文与小字都能放心用。
主色的音量（饱和度）留意
饱和度 84%，接近纯色，只适合小面积点题。
强调色压在底色上的可读性留意
实测 1.3:1，低于 3:1，这一处会直接影响可读性。
这套配色是怎么搭起来的
下面六条都从本页色值算出，换一套配色就不成立。
- 主色色区主色落在 25° 的红色区，饱和度 84%、明度 41%。红色做主色分量最重，占的面积稍大一点就会变成警示信号，所以它更适合做操作按钮和关键标记，不适合铺大面积背景。同色区还有 8 套。
- 明度分布十个角色的明度标准差到了 31.1，均值 51%，落差很大。深色能压住大面积，浅色能当卡片，中间几乎没有过渡层。冲击力够，但相邻两档并排时会显得生硬，信息密集的界面里要慎用。
- 底色温度底色 #FBFAF9 的饱和度到了 20%、色相 30°，这已经不是灰底而是明确的染色底。它自带情绪，会把整套配色的调子定死，主色只能在这个调子里挑；深色文字压在上面的对比度也得重新算，不能套用常规中性底的经验。
- 同标签位置「赛博」这组 3 套里，本套的 4.25:1 排第 3 位，是偏轻的一档。放在同一批竞品里它不会先跳出来，适合做第二层主色，或者用在本来就不抢注意力的页面。
- 主次重量主色 4.25:1，强调色只有 1.31:1，相差 3.2 倍，主次关系很明确。强调色在这里更像一个信号而不是第二种主色：适合只标一件事，比如价格、状态或限时，用多了会把主色挤下去。
- 文字层级正文文字 14.43:1 还行，次级文字只有 4.49:1，低于 4.5:1。这一层不能放在小字上，时间戳、辅助说明这类内容要么放大，要么改用主文字色。
搭配建议
主色明度 41%、饱和度 84%，落在中低区间，压在浅色底上有足够分量，放进深色主题也不会消失。饱和度偏高，情绪强、抓眼，大面积使用容易吵，最好只让它出现在按钮与关键标记上。
适合适合活力与亲和力优先的场景：外卖、社区、教育、生活服务类产品。主色压在底色上实测 4.25:1，标题与大字号够用，正文文字交给文字色。
慎用与高饱和的红、黄同场会互相抢戏，暖色最好只留一个主角。切深色主题要打折：主色放在近黑底色上只有 4.26:1，得先提亮一档再用。
搭配配深蓝能立刻变得稳重，配浅木色、米白则更有生活气息。点缀色压在这套底色上实测 1.31:1，写字会吃力，用它做色块、描边或图形更稳。
用在真实界面里是什么样
实时预览 · 点击切换端
your-site.com×+
用这套配色构建你的产品
导航、按钮、卡片与文字层级，一次预览全部效果。
主要操作了解更多卡片一次级说明文字，用于验证对比度是否符合 WCAG。
卡片二强调色用于高亮，注意与主色形成层次差。
卡片三中性文字色承载正文，是最频繁使用的颜色。
无障碍对比度检查
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 14.43:1 | AAA | AAA |
| 主文字 / 卡片背景 | 13.75:1 | AAA | AAA |
| 主色 / 页面背景 | 4.25:1 | AA | AA |
同端其他配色
这套在库里的位置
下面的数字来自同端 34 套配色之间的实测色值对比（十个角色的平均色差），换一个配色库就不成立。
- 和「铜锈橙」几乎是同一套，平均色差 ΔE 12，只差主色那一档。
- 反差最大的是「暗夜紫」，ΔE 425，两套摆在一起就是两个方向。
- 主色饱和度 84%，同端排第 8 / 34，偏饱和的一侧。
:root {
--color-primary: #c15a11; /* Primary */
--color-primaryHover: #813b09; /* Primary Hover */
--color-primaryActive: #492104; /* Primary Active */
--color-textMain: #2d251f; /* Text Main */
--color-textSub: #857060; /* Text Sub */
--color-bg: #fbfaf9; /* Background */
--color-surface: #f7f4f3; /* Surface */
--color-border: #eae5e1; /* Border */
--color-link: #7f3907; /* Link */
--color-accent: #28f6e5; /* Accent */
}