调色板
Color Palette
别名:调色板配色色板色阶颜色系统color palettepalette
这是什么
从一个基色出发生成有规律的色阶（50～900），再分配主色、辅助色、点缀色与中性色角色。色阶靠明度递进而非随手取色，保证 hover、disabled、边框都有对应深度可选；角色先于色值被命名，主题才换得动。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 产品需要一套可扩展的品牌色与中性灰体系
- 同一色相需要 hover、active、disabled 等多个深度
- 深浅主题共用同一套角色，只换色阶取值
✕ 不适用场景
- 插画或营销页一次性用色，不需要系统化
- 把十种高饱和色直接堆进界面，无主次
- 只有黑白灰两色且永不扩展——写死即可
常见形式
单色相色阶
Single hue ramp
一个基色拉出 50～900，配中性灰
互补双色
Complementary
色轮对面取辅助色，对比强
单色系
Monochrome
只用明度差，彩色仅作点缀
实现要点
oklch()color-mix()hsl()--color-primary-500用 oklch() 或 hsl() 按明度生成 50～900 十档：浅端 L≈97%，深端 L≈12%，中间保持感知均匀；饱和度浅端略降、深端略升。色阶命名 --color-primary-500，不要写 --color-brand-blue。中性灰单独一条低饱和色阶，不要用纯黑纯白。生成后用对比度工具抽查 500/600 与白字的组合。
平台 API
color-mix()oklch()hsl()代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | oklch() 感知均匀的色阶插值 |
| CSS | color-mix() |
| Tailwind CSS | color palette (50–950) |
相关概念
按用途而非色相命名的颜色变量：bg、surface、text、muted、accent、danger。组件只认角色，主题切换时在映射层换指向即可，不必改组件。浅色、深色、高对比、品牌皮肤都是同一套角色的不同取值表。
基础搭配使用前景与背景的亮度比值，衡量文字是否看得清。WCAG 2.1 给出硬性门槛：正文 AA 4.5:1、AAA 7:1，大号文字降到 3:1 与 4.5:1。APCA 按字重与字号给出更贴近感知的建议值。先算比值再选色，不要靠肉眼验收。
基础搭配使用以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格搭配使用