暖调品牌色组方案（色导网推导示例）
暖色做主色最容易踩的坑是「全站都暖」。这一套配了一个深青作支撑色，用来压住版面，不让页面变成一片橙。
色卡
#F6E2DB
#E08A74
#C8553D
#8E3627
#2F4858
#2F7465
#9A7418
#B4342A
#FBF8F5
主色之外还要配什么
一个品牌色不能单独工作。按钮需要悬停与按下两个态，提示条需要一个很浅的底，深色页头需要一个不抢戏的支撑色，再加成功、警告、危险三个语义色——这些都不能从主色直接取，否则红色的「危险」和橙色的「主操作」会分不清。
这里的做法是：主色固定色相做三级明度，语义色另取色相但把彩度压到主色之下，让它们在版面里的权重低于品牌色。
实测对比度
| 文字／底色 | 用途 | 对比度 | 判定 |
|---|---|---|---|
| 主色 500／纸底 | 主色当文字 | 4.12:1 | 仅大字 AA |
| 主色 700／纸底 | 主色文字的安全值 | 7.33:1 | 正文 AAA |
| 纸底／主色 500 | 主按钮上的白字 | 4.12:1 | 仅大字 AA |
| 纸底／支撑深青 | 页头上的文字 | 9.07:1 | 正文 AAA |
| 成功绿／纸底 | 成功提示文字 | 5.21:1 | 正文 AA |
| 警告黄／纸底 | 警告提示文字 | 4.06:1 | 仅大字 AA |
| 危险红／纸底 | 危险提示文字 | 5.73:1 | 正文 AA |
状态怎么取
悬停不要用透明度——半透明按钮压在不同底色上会得到不同的实际颜色。改成在色阶里取相邻一级：悬停用 700，按下再暗一点或加 1px 内阴影。
禁用态不要用主色的浅色，否则会被当成「可点」。用中性灰阶里的禁用级。
CSS 自定义属性
:root {
--wb-brand-100: #F6E2DB;
--wb-brand-300: #E08A74;
--wb-brand-500: #C8553D;
--wb-brand-700: #8E3627;
--wb-support: #2F4858;
--wb-ok: #2F7465;
--wb-warn: #9A7418;
--wb-bad: #B4342A;
--wb-paper: #FBF8F5;
}