铜锈橙
电商商品详情页 · 质量分 80 ·优选 · 收录于 2026-10-25 · 最近更新 2026-10-29
铜锈橙 是一套面向 WEB 的 10 色方案：Primary #d2610b，画布 #fbfaf9。正文与画布对比度 14.43:1，达到 WCAG AAA，正文与画布之间留有余量，长时间阅读不吃力；主色与画布对比度 3.69:1，主色够做大字与控件边界，正文不要压在上面。
10 个颜色角色
Primary
primary主色，对应 CSS 变量 --color-primary
#d2610brgb(210, 97, 11)hsl(25.9, 90%, 43.3%)Primary Hover
primaryHover悬停态：--color-primary-hover
#904105rgb(144, 65, 5)hsl(25.9, 93.3%, 29.2%)Primary Active
primaryActive按下态：--color-primary-active
#562602rgb(86, 38, 2)hsl(25.7, 95.5%, 17.3%)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
#f7f5f3rgb(247, 245, 243)hsl(30, 20%, 96.1%)Border
border边框分割线：--color-border
#eae5e1rgb(234, 229, 225)hsl(26.7, 17.6%, 90%)Link
link链接色：--color-link
#8d3f03rgb(141, 63, 3)hsl(26.1, 95.8%, 28.2%)Accent
accent强调色：--color-accent
#28f6e8rgb(40, 246, 232)hsl(175.9, 92%, 56.1%)编辑点评 · WEB 端
链接色与正文的距离稳妥
色差 ΔE 163，能分辨，小面积并排时仍分得出主次。
链接色压在底色上的可读性稳妥
实测 7.1:1，达到 AAA，正文与小字都能放心用。
主色的音量（饱和度）留意
饱和度 90%，接近纯色，只适合小面积点题。
强调色压在底色上的可读性留意
实测 1.3:1，低于 3:1，这一处会直接影响可读性。
这套配色是怎么搭起来的
下面六条都从本页色值算出，换一套配色就不成立。
- 主色色区主色落在 26° 的红色区，饱和度 90%、明度 43%。红色做主色分量最重，占的面积稍大一点就会变成警示信号，所以它更适合做操作按钮和关键标记，不适合铺大面积背景。同色区还有 8 套。
- 明度分布十个角色的明度标准差到了 30.5，均值 52%，落差很大。深色能压住大面积，浅色能当卡片，中间几乎没有过渡层。冲击力够，但相邻两档并排时会显得生硬，信息密集的界面里要慎用。
- 底色温度底色 #FBFAF9 的饱和度到了 20%、色相 30°，这已经不是灰底而是明确的染色底。它自带情绪，会把整套配色的调子定死，主色只能在这个调子里挑；深色文字压在上面的对比度也得重新算，不能套用常规中性底的经验。
- 同标签位置「低饱和」这组 4 套里，本套的 3.69:1 排第 3 位，是偏轻的一档。放在同一批竞品里它不会先跳出来，适合做第二层主色，或者用在本来就不抢注意力的页面。
- 主次重量主色 3.69:1，强调色只有 1.30:1，相差 2.8 倍，主次关系很明确。强调色在这里更像一个信号而不是第二种主色：适合只标一件事，比如价格、状态或限时，用多了会把主色挤下去。
- 文字层级正文文字 14.43:1 还行，次级文字只有 4.49:1，低于 4.5:1。这一层不能放在小字上，时间戳、辅助说明这类内容要么放大，要么改用主文字色。
搭配建议
主色明度 43%、饱和度 90%，落在中低区间，压在浅色底上有足够分量，放进深色主题也不会消失。饱和度偏高，情绪强、抓眼，大面积使用容易吵，最好只让它出现在按钮与关键标记上。
适合用作次级强调很讨喜：比红温和、比黄可靠，适合引导而不过分命令。主色压在底色上实测 3.69:1，标题与大字号够用，正文文字交给文字色。
慎用大面积使用容易显廉价，需要专业感的 B 端产品里要克制。深色主题里别把它降成背景：主色放在近黑底色上还有 4.91:1，够显眼，只适合继续做强调色。
搭配同色系里用深浅橙做层次，比再混入第三种彩色更耐看。点缀色压在这套底色上实测 1.3:1，写字会吃力，用它做色块、描边或图形更稳。
用在真实界面里是什么样
实时预览 · 点击切换端
your-site.com×+
用这套配色构建你的产品
导航、按钮、卡片与文字层级，一次预览全部效果。
主要操作了解更多卡片一次级说明文字，用于验证对比度是否符合 WCAG。
卡片二强调色用于高亮，注意与主色形成层次差。
卡片三中性文字色承载正文，是最频繁使用的颜色。
无障碍对比度检查
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 14.43:1 | AAA | AAA |
| 主文字 / 卡片背景 | 13.83:1 | AAA | AAA |
| 主色 / 页面背景 | 3.69:1 | AA | AA |
同端其他配色
这套在库里的位置
下面的数字来自同端 34 套配色之间的实测色值对比（十个角色的平均色差），换一个配色库就不成立。
- 和「铜锣橙」几乎是同一套，平均色差 ΔE 12，只差主色那一档。
- 反差最大的是「暗夜紫」，ΔE 426，两套摆在一起就是两个方向。
- 主色饱和度 90%，在同端 34 套里排第 2，属于最响的那一档。
:root {
--color-primary: #d2610b; /* Primary */
--color-primaryHover: #904105; /* Primary Hover */
--color-primaryActive: #562602; /* Primary Active */
--color-textMain: #2d251f; /* Text Main */
--color-textSub: #857060; /* Text Sub */
--color-bg: #fbfaf9; /* Background */
--color-surface: #f7f5f3; /* Surface */
--color-border: #eae5e1; /* Border */
--color-link: #8d3f03; /* Link */
--color-accent: #28f6e8; /* Accent */
}