LESSON 01
色彩心理学：色相背后的情绪密码
色彩不是审美问题，而是心理问题。每种色相都对应一组稳定的心理联想：原木色（暖黄系）传递温暖、稳重、自然；蓝色传递信任、专业、冷静；红色传递紧迫、激情、行动。选色的第一步不是看色卡，而是回答"品牌想让用户产生什么情绪"。
尧图交付前的色彩调研必做三件事：调研行业默认色（避免同质化）、调研竞品主色（建立差异）、调研目标用户色彩偏好（匹配心智）。三份调研叠加，才能定出既有辨识度又匹配用户预期的主色。
/* 行业色彩心智映射表 */
金融 → 深蓝 #1E3A5F（信任、稳健）
医疗 → 浅蓝 #4A90B8（专业、洁净）
餐饮 → 暖橙 #D97742（食欲、温暖）
教育 → 原木 #B89968（成长、温度）
科技 → 深紫 #5B4B8A（创新、未来）
美妆 → 樱粉 #E8A4B8（柔美、精致）
制造 → 钢灰 #4A5568（工业、可靠）
/* 尧图主色定位：原木色 #B89968
情绪关键词：温暖 + 稳重 + 工匠感
行业适配：建站 / 教育 / 设计 / 文化 */
避坑提醒：不要盲目跟风"年度流行色"。流行色是消费属性，品牌色是资产属性。可口可乐红用了 130 年，从未换过。选定主色后至少使用 5 年不变，才能沉淀为品牌资产。
LESSON 02
品牌情绪：把形容词翻译成 HSL 数值
品牌情绪是抽象的形容词，色彩是具体的数值。设计师的核心能力，就是把"温暖、克制、精致"这类形容词，翻译成 HSL（色相、饱和度、明度）的具体数值。尧图翻译法：色相定调性，饱和度定强度，明度定重量。
"温暖"指向 30-50° 色相（橙黄系），饱和度 40-60%（中等偏暖），明度 50-70%（中亮）。"克制"指向低饱和度（30% 以下），中等明度。"精致"指向高明度（75% 以上），低饱和度。三个形容词叠加，就得到了原木色系的具体范围。
/* 品牌情绪 → HSL 翻译表 */
温暖 H:30-50° S:40-60% L:50-70% → 原木 #B89968
克制 H:30-50° S:20-35% L:40-55% → 木深 #9A7D4F
精致 H:30-50° S:30-45% L:75-85% → 木浅 #D4BC95
稳重 H:30-50° S:10-20% L:20-30% → 墨色 #2C2924
呼吸 H:30-50° S:8-15% L:95-98% → 纸张 #FDFBF7
/* 同色系延展：保持色相一致，只调饱和度与明度 */
--wood: hsl(33, 30%, 56%); /* 主色 */
--wood-deep: hsl(33, 32%, 46%); /* 主色深 */
--wood-light: hsl(33, 38%, 70%); /* 主色浅 */
--wood-soft: hsl(33, 35%, 82%); /* 主色柔 */
实战技巧：同色系延展时，色相（H）保持不变，只调饱和度（S）和明度（L），这样所有颜色都"一家人"。如果色相偏差超过 5°，视觉上就会"散"，整站失去统一感。建议用 Figma 的 HSL 拾色器而非 RGB，更直观。
LESSON 03
主辅点缀：三层色彩体系的角色分工
完整的品牌色彩体系包含三层：主色（1 个）、辅色（2-3 个）、点缀色（1 个）。主色定调，承担 60% 视觉面积；辅色平衡，承担 30% 面积；点缀色制造焦点，承担 10% 面积。三层缺一不可，比例失衡就会视觉混乱。
主色用于品牌识别（logo、导航、主按钮）；辅色用于信息分层（背景、分隔线、次要文字）；点缀色只用于关键 CTA、限时标签、错误提醒。尧图实战规范：点缀色面积必须小于 5%，越小越聚焦，转化率越高。
/* 三层色彩角色分工 */
:root{
/* 主色：1 个，承担品牌识别 */
--brand:var(--wood-deep);
/* 辅色：3 个，承担信息分层 */
--bg-soft:var(--cream); /* 次要背景 */
--bg-paper:var(--paper); /* 主背景 */
--text-mute:var(--ink-mute); /* 次要文字 */
/* 点缀色：1 个，仅用于关键 CTA */
--accent:#C25A3B; /* 暖橙红，限定使用 */
}
.btn-primary{background:var(--brand);color:#fff} /* 主色按钮 */
.section-soft{background:var(--bg-soft)} /* 辅色背景 */
.badge-urgent{background:var(--accent);color:#fff; /* 点缀色限定 */
padding:2px 8px;font-size:11px;border-radius:10px}
使用约束：点缀色在单屏出现不得超过 2 处，且只能用于"限时优惠""立即抢购""错误警告"等高优先级场景。如果点缀色出现在普通链接、装饰图标上，就失去了"焦点制造"的能力，整页视觉会变平。
LESSON 04
对比节奏：用明度差构建视觉层级
色彩对比的本质是明度对比，不是色相对比。WCAG 无障碍标准要求正文文字与背景明度对比度不低于 4.5:1，大标题不低于 3:1。尧图交付标准更严：正文 7:1（AAA 级），标题 4.5:1，确保弱视用户与强光环境下都可读。
对比节奏要"疏密有致"：首屏标题与背景强对比（10:1），正文与背景中对比（7:1），次要文字与背景弱对比（4.5:1）。三层对比形成视觉节奏，引导用户从标题到正文到细节的阅读路径。
/* 明度对比节奏：三层视觉层级 */
.hero-title{
color:var(--ink); /* #2C2924 on #FDFBF7 ≈ 14:1 强对比 */
font-size:clamp(2rem,4.6vw,3.4rem);
}
.body-text{
color:var(--ink-soft); /* #5C5750 on #FDFBF7 ≈ 8:1 中对比 */
font-size:15.5px;line-height:1.75;
}
.meta-text{
color:var(--ink-mute); /* #8A857C on #FDFBF7 ≈ 4.6:1 弱对比 */
font-size:13px;
}
/* WCAG AAA 级正文：明度对比 ≥ 7:1 */
.a11y-pass{background:#FDFBF7;color:#2C2924} /* 14:1 ✓ */
.a11y-warn{background:#FDFBF7;color:#B89968} /* 3.2:1 ✗ 仅大标题可用 */
无障碍底线：原木色 #B89968 在浅背景上对比度仅 3.2:1，不能用于正文，只能用于装饰性大标题或图标。如果坚持用原木色做正文，必须加深为 #9A7D4F（对比度 4.8:1）才能通过 WCAG AA。建议交付前用 Chrome DevTools 的 Contrast 检查器逐个验证。
LESSON 05
暗色模式：不是反色，而是重新调色
暗色模式最大的误区是"直接反色"。直接反色会让原木色变成深紫色，完全失去品牌识别度。正确做法是"重新调色"：保持色相不变，调整明度与饱和度，让原木色在暗底下依然可读、依然有温度。
尧图暗色模式规范：背景从 #FDFBF7 反转为 #1A1814（暖墨色而非纯黑），主色从 #9A7D4F 提亮为 #D4BC95（保持原木色相），文字从 #2C2924 反转为 #F7F4EF。色相全程不变，只调明度，保证品牌识别度。
/* 暗色模式：色相不变，明度反转 */
:root{
--wood:#B89968; /* 亮色主色 */
--cream:#F7F4EF; /* 亮色背景 */
--ink:#2C2924; /* 亮色文字 */
}
[data-theme="dark"]{
/* 背景：暖墨色而非纯黑，保留温度 */
--cream:#1A1814;
--paper:#232019;
/* 主色：提亮一档，暗底下可读 */
--wood:#D4BC95;
--wood-deep:#B89968;
/* 文字：反转但保留暖调 */
--ink:#F7F4EF;
--ink-soft:#C4BFB6;
--ink-mute:#8A857C;
}
/* 切换按钮：尊重用户系统偏好 */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme:dark;
}
}
关键细节：暗色模式的阴影要相应减弱。亮色模式阴影 rgba(60,50,30,.28) 在暗底下几乎不可见，需调整为 rgba(0,0,0,.5) 才有层次感。另外边框线要从 rgba(155,125,79,.18) 提亮到 rgba(212,188,149,.2)，否则分隔线消失。
LESSON 06
落地实践：色彩规范的工程化交付
色彩规范的终点不是 Figma 文档，而是可被前端直接消费的 CSS 变量与设计令牌 JSON。尧图交付三件套：tokens.css（CSS 变量）、tokens.json（设计令牌，供 Figma Tokens 插件同步）、color-checklist.md（自检清单）。
交付前必过的色彩自检：所有颜色值引用变量、文字对比度通过 AAA、点缀色面积小于 5%、暗色模式色相不变、品牌色饱和度偏差小于 5%。这五项任一不达标，退回重新调色。
/* tokens.json：设计令牌工程化交付 */
{
"color": {
"brand": {
"wood": { "value": "#B89968", "type": "color" },
"woodDeep": { "value": "#9A7D4F", "type": "color" },
"woodLight": { "value": "#D4BC95", "type": "color" }
},
"neutral": {
"cream": { "value": "#F7F4EF" },
"paper": { "value": "#FDFBF7" },
"ink": { "value": "#2C2924" }
}
}
}
/* 交付前自检清单 */
☑ 所有颜色值是否引用 var(--xxx)
☑ 文字对比度是否通过 WCAG AAA（7:1）
☑ 点缀色单屏面积是否小于 5%
☑ 暗色模式色相是否保持不变
☑ 品牌色饱和度偏差是否小于 5%
结业作业：选一个你熟悉的品牌，按本课方法输出完整的色彩规范三件套（tokens.css + tokens.json + 自检报告），提交到讲师邮箱。讲师会按上述五项自检清单批改，全过即发放结业证书，并入选尧图外包设计师备选库。
