色彩系统
Color System 处理界面里的颜色分工。哪些颜色用来强调按钮，哪些颜色用来表示警告，哪些颜色只做背景、边框或辅助文字，都需要被安排清楚。颜色选得好，正文更好读，主按钮更明显，错误提示也不会被忽略。
界面里很多东西长得相似：文字、图标、按钮、卡片、表单。颜色可以帮它们拉开关系。比如蓝色按钮告诉用户“这里是主操作”，红色文案提醒“这里有危险”，浅灰背景让内容区不那么拥挤。
这篇文章固定用浅色模式。示意图主要靠颜色本身说明问题，如果跟随深色主题反相，色相、明度和对比度会被改掉，判断就不准了。
1. 色彩基础与感知 (Color Basics & Perception)
Hue (色相)
Hue 是颜色属于哪一类。红、黄、绿、蓝、紫，说的就是色相。设计软件和 CSS 里的 HSL、HSV 会把色相放在一个 0° 到 360° 的圆环上，像在色轮上选方向。
█████████████████████████ │ │ │ │ │ │ │ 0 │ 120 │ 240 │ 360 红 │ 绿 │ 蓝 │ 红 60 180 300 黄 青 紫
Saturation (饱和度)
Saturation 描述颜色的鲜艳程度。饱和度高，颜色更亮眼；饱和度低，颜色会往灰里走。做界面时，主按钮可以稍微鲜一点，背景和大面积色块通常要收一点，不然会刺眼。
Chroma (彩度)
Chroma 也描述颜色的鲜艳程度，但更常出现在 OKLCH 这类感知色彩模型里。它关注颜色离灰轴有多远。做颜色阶梯时，Chroma 稳定，颜色看起来也更容易成套。
████████████████████ │ │ │ 0% 50% 100% 灰 中等 鲜艳
Lightness (明度)
Lightness 描述颜色在调色模型里的明暗。在 HSL 里，0% 接近黑色，100% 接近白色，50% 通常是这个色相最饱满的位置。
Luminance (亮度)
Luminance 更偏人眼实际感到的亮度。同样的数值，不同色相在人眼里不一定一样亮。后面讲对比度时会用到这个概念。
█████████████████████ │ │ │ 0% 50% 100% 极暗 纯色 极亮
Alpha (透明通道)
Alpha 描述颜色的透明通道。Alpha 为 1 时，颜色完全盖住下面的内容；Alpha 降低后，下面的背景、图片或卡片会透出来。
Opacity (不透明度)
Opacity 描述元素整体有多不透明。100% 是完全不透明，0% 是完全透明。它和 Alpha 很接近，但在 CSS 里 opacity 会影响整个元素，包括文字、图标和子元素。
设计软件常用灰白棋盘格表示透明背景。弹窗遮罩、悬浮提示、禁用状态和半透明标签，都会用到这种叠加关系。
████████████████████████ ████████████████████████ │ │ 0% 50% 100% 完全透明 半透明 完全不透明
Warm Color (暖色)
Warm Color 是带有温暖联想的颜色。红、橙、黄通常更热、更靠前。这不是物理规则，但在界面里很好用：警告、促销和高能量入口常用暖色。
Cool Color (冷色)
Cool Color 是带有冷静联想的颜色。蓝、青、紫通常更冷、更安静。信息区、背景、数据面板和需要降低刺激感的界面经常用冷色。
WARM 暖色 ██████▶ ████████████████████████ 红紫 → 红 → 橙 → 黄 热烈 / 膨胀 COOL 冷色 ◀██████ ████████████████████████ 黄绿 → 绿 → 蓝 → 蓝紫 宁静 / 收缩
2. 色彩表示法与色彩空间 (Color Representation & Color Spaces)
颜色进了屏幕和代码，就要写成数值。RGB 和 Hex 更像在控制屏幕的红绿蓝通道；HSL 更像平时说“换个色相、再亮一点”；OKLCH 更适合做感知更稳定的颜色调整。
RGB (Red, Green, Blue)
RGB 用红、绿、蓝三个发光通道混出屏幕上的颜色。每个通道通常写成 0 到 255。三个通道都是 0，就是黑色；三个通道都开到最大，就是白色。
RGBA (Red, Green, Blue, Alpha)
RGBA 多了一个 Alpha 通道，用来控制透明度。比如一个半透明黑色遮罩，就是在 RGB 的颜色上再加透明度，让下面的页面还能隐约看见。
Hex Code (十六进制颜色码)
Hex Code 是网页和设计工具里最常见的颜色写法之一。它以 # 开头，后面通常是 6 位十六进制数字。每两位控制一个通道：红、绿、蓝。
每个通道从 00 到 FF，对应十进制的 0 到 255。#FF5733 里的 FF 是红色通道，57 是绿色通道，33 是蓝色通道。
有时也会看到 8 位 Hex，例如
#FF573380。最后两位80表示 Alpha 透明通道。FF是完全不透明，00是完全透明。
# FF 57 33 最终 RGB 混色结果 │ │ │ │ HEX 红(R) 绿(G) 蓝(B) █████████████████ 标记 255 87 51 █████████████████ 满强度 中强度 低强度 十六进制通道发光强度演示 (以红色通道为例): Hex: 00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF 发光: ████████████████████████████████████████████████████████████████ Dec: 0 17 34 51 68 85 102 119 136 153 170 187 204 221 238 255 └ 完全关闭 (纯黑) 满强度发光 (纯红) ┘
HSL (Hue, Saturation, Lightness)
HSL 把颜色拆成色相、饱和度和明度。它不像 RGB 那样直接写红绿蓝通道，更接近日常调色的话：换成蓝色、再鲜一点、再暗一点。
HSLA (Hue, Saturation, Lightness, Alpha)
HSLA 是带 Alpha 通道的 HSL，用来控制透明度。它适合在保留 HSL 调色方式的同时，做遮罩、浮层和半透明状态。
hsla(200, 100%, 50%, 0.8) ████████ H (色相) ██████████████████████ 200° (天蓝色) S (饱和度) ██████████████████████ 100% (极鲜艳) L (明度) ██████████████████████ 50% (纯色亮度) A (透明度) ██████████████████████ 0.8 (80%不透明)
OKLCH (Oklab Lightness, Chroma, Hue)
HSL 的 Lightness 不完全等于人眼感到的亮度。黄色和蓝色都设成 L = 50%，黄色通常还是更亮，蓝色更暗。做无障碍对比度、颜色阶梯或自动深色模式时，这个差异会带来麻烦。
传统 HSL (L = 50% ) ████████████ 黄色 hsl(60, 100%, 50%) ████████████ 蓝色 hsl(240, 100%, 50%) 理论明度相同，人眼感知差异明显 现代 OKLCH (L = 0.65 ) ████████████ 均匀黄 oklch(0.65, 0.13, 90) ████████████ 均匀蓝 oklch(0.65, 0.18, 250) 人眼感知的视觉明度更接近均衡
OKLCH 的 L 更接近人眼感到的亮度。调色相或彩度时，只要 L 接近，颜色之间的明暗关系通常更稳。它适合做颜色阶梯、主题切换和需要控制对比度的设计系统。
oklch(0.65, 0.18, 250) ████████ L (明度) ██████████████████ 0.65 (人眼感知亮度) C (彩度) ██████████████████ 0.18 (色彩纯度/鲜艳度) H (色相) ██████████████████ 250° (色相环角度)
Color Gamut (色域)
色域是设备或色彩系统能显示多少颜色。普通屏幕、广色域屏幕、打印机能表现的范围并不一样。
Color Space (色彩空间)
色彩空间像一张约定好的颜色地图，让设计工具、浏览器和设备知道同一个色值应该怎么解释。
青(0,255,255)
●──────────○ 白 (255,255,255)
/│ /│
/ │ / │
绿(0,255,0) ●──────────● 黄 (255,255,0)
│ │ │ │
│ ●───────│──● 洋红 (255,0,255)
│ /蓝 │ /
│/(0,0,255)│/
黑(0,0,0) ●──────────●
红 (255,0,0)sRGB (Standard RGB)
sRGB 是网页和普通屏幕最常见的默认色彩空间。它的范围不算宽，但兼容性最好。界面如果主要面向普通浏览器和普通显示器，使用 sRGB 最稳。
Adobe RGB
Adobe RGB 的色域比 sRGB 宽，尤其能覆盖更多青绿色。它常见于专业摄影和印刷流程，适合需要把屏幕预览和纸张输出对起来的场景。
Display P3 (广色域色彩空间)
Display P3 也是广色域，很多现代手机和电脑屏幕都支持。它比 sRGB 能显示更鲜的红、黄、绿。做面向新设备的图片、插画或品牌视觉时，P3 能带来更亮眼的颜色，但也要注意旧屏幕上的回退。
Rec. 2020 (BT.2020)
Rec. 2020 的色域非常宽，主要面向 4K/8K、HDR 视频和高端放映。现在大多数普通屏幕还不能完整显示它的范围。做网页 UI 时通常不会直接以它为日常目标。
人类可见光谱 (自然界极限) ████████████████████████████████ 100% Rec. 2020 (4K/8K 超高清电视与 HDR 标准) ░░██████████████████████████░░░░ ~75.8% Display P3 / Adobe RGB (现代屏幕与摄影) ░░░░████████████████████░░░░░░░░ ~45-50% sRGB (标准互联网与传统监视器) ░░░░░░████████████████░░░░░░░░░░ ~35%
3. 色彩架构与调色盘 (Color Architecture & Palettes)
界面很少只靠一个颜色。通常需要一组颜色一起工作：主色负责主要操作，语义色负责成功和错误，中性色负责背景、边框和次要文字。
Palette (调色盘 / 色板)
Palette 是一个项目允许使用的一组颜色。它能避免每个页面都自己挑蓝色，也方便团队说清楚“这个蓝色”到底是哪一个。
Color Scale (色阶)
Color Scale 是把一个基础色做成一串深浅不同的阶梯。浅色可以做背景，稍深一点可以做边框，基础色可以做按钮，再深的颜色可以做 hover 或深色文字。Tailwind CSS、Material Design 这类系统常用 50 到 900 命名色阶。
全局调色盘 (Brand Palette) 主色: ██ 强调: ██ 警告: ██ 中性: ██ │ ╰─> 由主色延展出的蓝色的阶 50 ██ 极浅底色 100 ██ 200 ██ 300 ██ 边框/弱高亮 Scale 400 ██ 500 ██ 基础色 Base / 主按钮 600 ██ 悬停交互 Hover 700 ██ 800 ██ 900 ██ 深色文字/极暗底色
Tint (加白)
Tint 是给颜色加白。颜色会变浅，也会更柔和，常用来做浅背景、提示底色或轻量标签。
Shade (加黑)
Shade 是给颜色加黑。颜色会变暗、变重，常用来做深色文字、按下状态或深色背景。
Tone (加灰)
Tone 是给颜色加灰。颜色会没那么鲜，适合大面积背景、插画配色或需要安静一点的界面。
纯色 混合介质 结果 ████ + ████ 白色 = ████ Tint 明度升高 ████ + ████ 黑色 = ████ Shade 明度降低 ████ + ████ 灰色 = ████ Tone 饱和度降低 Base
Primary Color (主色 / 品牌色)
Primary Color 是产品最常用、最容易被记住的颜色。它通常出现在主按钮、当前选中项、重点链接和品牌区域。
Secondary Color (辅助色)
Secondary Color 用来补充主色。它通常出现在次级按钮、辅助入口和品牌延展区域，不能和主色抢同一个层级。
Accent Color (强调色)
Accent Color 用来制造局部强调。它通常只小面积出现，比如促销标签、VIP 徽章、通知圆点或特殊高亮。用多了会抢主色的注意力。
Semantic Color (语义色)
Semantic Color 是带含义的状态颜色。绿色常表示成功，红色常表示危险或错误，黄色常表示警告。它们适合系统反馈，但最好配合文字或图标一起用。
Status Color (状态色)
Status Color 是用来表达当前状态的颜色。成功、错误、警告、信息、禁用都可以有对应状态色。它和 Semantic Color 很接近，但更强调组件或对象当前处于什么状态。
Foreground Color (前景色)
Foreground 是前景色，通常是文字、图标和边框。前景色要和背景保持足够对比，否则内容会难读。
Background Color (背景色)
Background 是背景色，是文字、图标、按钮和卡片下面的底。背景色会影响整体明暗，也会影响前景内容的可读性。
Neutral Color (中性色 / 无彩色)
Neutral Color 是黑、白、灰这一组颜色，有时会带一点冷暖倾向。它们负责界面里最普通但最常见的部分：正文、次要文字、分割线、边框、禁用状态和背景。
╭──────── 界面色彩角色 ─────╮ │ 标题 / 当前选中项 │ Primary 主色/品牌色 ├───────────────────────────┤ │ 正文前景文字 │ Foreground 前景文本 │ │ Background 背景底色 │ 分割线 / 次要文字 / 边框 │ Neutral 中性灰/辅助元素 │ 主要按钮 高亮标签 │ Accent 强调/高亮色 ╰───────────────────────────╯ 语义状态色： ✔ 成功 Success ! 警告 Warning ✖ 危险 Danger
4. 色彩工程与 Tokens (Color Engineering & Tokens)
颜色进入设计系统后，不能只写一个色值。团队需要知道这个颜色叫什么、用在哪里、换主题时应该变成什么。否则组件里到处写死 #3B82F6，以后改品牌色或做深色模式会很痛苦。
Design Tokens (设计令牌)
Design Tokens 是把设计决策存成变量。颜色、间距、字体、圆角都可以做成 token。颜色 token 的好处是：设计稿和代码可以用同一套名字，而不是互相猜色值。
CSS Custom Properties (CSS Variables)
CSS Custom Properties 是 CSS 里的变量，例如 --color-primary。它们可以被复用，也可以被主题覆盖。网页里的颜色 token 通常会落到这些变量上。
Primitive Token (原始令牌)
Primitive token 保存具体颜色，比如 blue-500。它更像颜色材料库，描述颜色客观上是什么。
Semantic Token (语义令牌)
Semantic token 保存用途，比如 text-primary、danger-bg、button-primary-bg。组件最好使用 semantic token，这样换主题时只改映射，不必改每个组件。
╭─设计系统变量分层架构──────────────────────╮ │ 1. Raw Value (绝对值) │ │ #3B82F6 │ ├─────────────────────┬─────────────────────┤ │ 2. Primitive Token │ "客观上是什么" │ │ blue-500 │ 相对稳定 │ │ │ 轻易不随业务变化 │ ├─────────────────────┼─────────────────────┤ │ 3. Semantic Token │ "表达使用场景" │ │ color-primary │ 承载设计意图 │ │ │ 方便随时切换映射 │ ├─────────────────────┴─────────────────────┤ │ 4. CSS Variable (Web 端的代码落地) │ │ --color-primary: var(--blue-500); │ │ --button-bg: var(--color-primary); │ ╰───────────────────────────────────────────╯
Theming (主题化)
Theming 是让界面切换不同外观。切换主题时，组件结构不变，变的是 semantic token 指向哪一组 primitive。比如 text-primary 在浅色模式里指向深灰，在深色模式里指向浅灰。
Light Mode (浅色模式)
浅色模式通常是浅底深字，接近纸张阅读。它适合明亮环境，也更接近大多数网页的默认外观。
Dark Mode (深色模式)
深色模式通常是深底浅字，能降低整体亮度，适合低光环境。OLED 屏幕上也可能更省电。
深色模式不能简单把浅色模式反相。深色背景会改变颜色的观感，主色和强调色往往要重新调明度和饱和度，才不会发闷或刺眼。
5. 无障碍与可读性 (Accessibility & Readability)
颜色要先能看见，才谈得上传递信息。文字和背景的对比够不够、色弱用户能不能分清状态、系统高对比模式会不会覆盖样式，都会影响真实可用性。
Relative Luminance (相对亮度)
相对亮度描述的是颜色在人眼看来有多亮。人眼对不同颜色的敏感度不一样：绿色更亮，红色次之，蓝色更暗。
下面这个 sRGB 公式把这种差异写进了计算里：
Y=0.2126⋅R+0.7152⋅G+0.0722⋅B 相同红绿蓝物理通道值(255)下 人眼感知的相对亮度 (Y) 差异： ███████████████████ 71.52% (绿) █████ 21.26% (红) ██ 7.22% (蓝)
Contrast Ratio (对比度)
对比度是前景色和背景色之间的亮度差。白底白字是 1:1，基本看不见；黑底白字最高可以到 21:1。
WCAG 标准
WCAG 是常用的网页无障碍标准。它对文本对比度有明确要求：
- AA 级（标准）：普通文本对比度不低于 4.5:1，大号文本（18pt 以上）不低于 3:1。
- AAA 级（高级）：普通文本对比度不低于 7:1，大号文本不低于 4.5:1。
不同对比度的文本可读性表现： 灰色文本 (#D1D5DB) 1.5:1 ── ✖ 难以阅读 (不符合标准) 灰色文本 (#767676) 4.5:1 ── ✔ 符合 WCAG AA 级最小标准 深黑文本 (#222222) 16.0:1 ── ✔ 符合 WCAG AAA 标准
Color Blindness (色盲模式适配)
色盲和色弱用户可能分不清某些色相，比如红色和绿色。界面状态不能只靠颜色表达。错误提示最好同时有文字、图标或形状差异。
错误设计 (仅靠颜色区分状态)
● 正常 ● 错误
在红绿色盲眼里，这两者几乎都是同一种黄色
无障碍设计 (颜色 + 符号/图案双重区分)
✔ 正常 ✖ 错误
即使过滤掉颜色，通过符号也能瞬间识别Forced Colors / High Contrast Mode (强制色 / 高对比模式)
Windows 高对比度模式和一些辅助工具会覆盖网页原来的颜色，让页面使用系统指定的高反差主题。
在这种模式下，阴影、渐变底色和装饰色可能会被浏览器忽略或替换。按钮、链接和边框会更依赖系统颜色。
正常视觉模式 (Normal) ╭──────────────────────────╮▐ │ 卡片标题 │▐ │ 柔和的辅助文字 │▐ │ │▐ │ 确定 取消 │▐ ╰──────────────────────────╯▐ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ 圆角、品牌色、弱阴影仍可见 ──────────────────────────────── 强制色/高对比模式 (Forced Colors) ┌──────────────────────────┐ │ 卡片标题 │ │ 辅助文字 │ │ │ │ [ 确定 ] [ 取消 ] │ └──────────────────────────┘ 装饰减少，文字、边框和控件轮廓更重要
6. 图形渲染与视觉效果 (Rendering & Visual Effects)
颜色最后会变成屏幕上的像素，也会和其他图层混在一起。渐变、透明叠加和混合模式看起来像视觉效果，背后都是颜色计算。
Gradient (渐变色)
Gradient 是让两种或多种颜色平滑过渡。浏览器或设计软件会计算起点和终点之间的中间颜色，所以你看到的是连续变化，而不是一格一格跳色。
最常见的是线性渐变和径向渐变。线性渐变沿一个方向变化，径向渐变从中心向外扩散。
Blending Mode (混合模式)
Blending Mode 决定上层颜色和下层颜色怎么混。Photoshop 里的正片叠底、滤色，CSS 里的 mix-blend-mode，都是这类规则。不同模式会用不同算法，重新算出交界处的颜色。
顶层图层 ████ 青色 ████ 纯蓝 ████ 红色 Alpha 50% 混合交界 ██████ ██████ ██████ 底层图层 ████ 黄色 ████ 纯红 ████ 蓝色 Alpha 100% 正片叠底 滤色 / 变亮 正常透明叠加 Multiply Screen Alpha Normal