语义色
Semantic Color Token
别名:语义色语义色 token角色色主题色变量换肤semantic colorcolor token
这是什么
按用途而非色相命名的颜色变量：bg、surface、text、muted、accent、danger。组件只认角色，主题切换时在映射层换指向即可，不必改组件。浅色、深色、高对比、品牌皮肤都是同一套角色的不同取值表。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 需要浅色 / 深色双主题或可换肤
- 组件库要跨产品复用，颜色含义必须稳定
- 无障碍要求高对比主题或强制配色
✕ 不适用场景
- 单页营销稿，颜色即最终视觉，无需抽象
- 角色名起得比色值还多（--color-card-header-icon-hover）
- 把插画专用色也塞进语义层
常见形式
浅深双主题
Light / dark dual
同一角色两套取值，.dark 下整体切换
高对比
High contrast
收紧明度差，边界与文字加强
品牌覆盖
Brand override
只换 accent 与少数角色，其余不动
实现要点
:rootcolor-scheme--color-bg--color-surface分两层：色阶层（--color-primary-500）与角色层（--color-accent: var(--color-primary-600)）。组件只允许引用角色层。深色主题覆盖角色层取值并加 color-scheme: dark，让滚动条与表单控件同步变暗。高对比主题独立一张表，不要在深色表上继续堆 if。强制配色场景再补 forced-colors 适配。
平台 API
:rootcolor-schemeCSS custom properties代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | color-scheme 让 UA 控件跟随浅深主题 |
| CSS | :root |
| Tailwind CSS | @theme / dark: |
相关概念
从一个基色出发生成有规律的色阶（50～900），再分配主色、辅助色、点缀色与中性色角色。色阶靠明度递进而非随手取色，保证 hover、disabled、边框都有对应深度可选；角色先于色值被命名，主题才换得动。
基础搭配使用前景与背景的亮度比值，衡量文字是否看得清。WCAG 2.1 给出硬性门槛：正文 AA 4.5:1、AAA 7:1，大号文字降到 3:1 与 4.5:1。APCA 按字重与字号给出更贴近感知的建议值。先算比值再选色，不要靠肉眼验收。
基础搭配使用用阴影的深浅表达元素离纸面的远近：0 贴平、1～2 浮起、3 以上成浮层。一套阴影由本影、半影、环境三层叠加而成，档位越高投影越大越淡。层级只用来表达叠放关系，不要拿它当装饰。
基础搭配使用