1. CSS color 属性的基本取值
1.1 常用颜色表示法
颜色取值的多样性是 CSS color 属性的核心优势之一。通过名称颜色、十六进制（HEX）、rgb/rgba、hsl/hsla 等多种表示法，开发者能够以不同的风格表达同一颜色。不同场景下，这些表示法各有优缺点，便于在设计、可读性与兼容性之间取舍。无论你偏向简洁的名称、直观的 RGB 还是基于色相、饱和度、亮度的 HSL，CSS 都提供了灵活的入口。
透明度与层叠效果在颜色表达中扮演重要角色，RGBA/HSLA 便携带透明度信息，方便实现按钮半透明、阴影渐变等效果。对于渐变与叠加效果，使用 rgba/hsla 能避免额外的图像资源依赖。
颜色 token 的统一性通常通过 CSS 变量来实现，将常用颜色统一管理在一个位置，后续在不同组件中通过变量取值，确保全局色彩的可维护性与一致性。
示例展示了不同表示法在实际 CSS 中的写法差异，并体现了可读性与直观性的权衡。下面的代码片段给出几种常见表示法的写法示例，便于直接在项目中尝试与对比。
/* 名称颜色 */
body { color: rebeccapurple; }/* HEX 表示法 */
h1 { color: #1e90ff; }/* RGB 表示法（不含透明度） */
a { color: rgb(30, 144, 255); }/* RGBA 表示法（含透明度） */
a:hover { color: rgba(30, 144, 255, 0.8); }/* HSL 表示法 */
.note { color: hsl(210, 90%, 56%); }/* HSLA 表示法（含透明度） */
.banner { color: hsla(210, 90%, 56%, 0.8); }/* 使用 CSS 变量进行颜色管理 */
:root { --brand: #1e90ff; --text: #1f2937; }
body { color: var(--text); }
a { color: var(--brand); }1.2 CSS 变量与颜色 Token
变量化的颜色管理使得主题切换、品牌调整变得更容易。通过将常用颜色放在 :root 宏变量中，后续再通过一个地方统一修改，减少了重复劳动与潜在错误。
作用域与继承变量具有作用域概念，在父级范围内定义的颜色变量可以被子元素继承，提升了设计系统的可复用性。
示例：主题切换的初步实现，通过一个简单的颜色变量集合，结合暗黑模式媒介特性，可以实现对比度和色相的一致性变化，而无需逐个修改组件样式。
:root {--bg: #ffffff;--fg: #1a1a1a;--primary: #2563eb;
}
@media (prefers-color-scheme: dark) {:root {--bg: #0b1020;--fg: #e5e7eb;--primary: #4f8aff;}
}
body {background: var(--bg);color: var(--fg);
}
button {background: var(--primary);color: white;
}1.3 兼容性与回退策略
浏览器兼容性方面，HEX、RGB、HSL 等表示法在绝大多数浏览器中得到良好支持；名称颜色和部分扩展颜色在旧版本浏览器上可能存在差异，因此在关键场景下提供明确的回退是常见做法。
渐变与叠加的颜色表达在需要复杂视觉效果时，往往结合渐变、透明度与阴影来实现。颜色表示法的选择应以实现目标效果为导向，并确保在不同设备上保持一致的可读性。
1.4 实战要点回顾
要点概览：选择清晰的颜色表示法、尽量使用变量化的颜色 Token、关注对比度与可维护性。
快速速查：在 CSS 中优先考虑使用名称颜色和 HEX / RGB 的组合，遇到需要细粒度控制时再选用 HSL/HSLA；配合变量实现快速主题切换。
2. 颜色模型与实现细节
2.1 颜色模型与浏览器渲染
默认色彩空间在现代浏览器中通常是 sRGB，这意味着颜色数值会以 sRGB 空间进行解释和渲染。理解这一点对于实现跨设备的一致性至关重要。
伽马与视觉感知，人眼对亮度的感知并非线性，CSS 在底层会处理一些伽马相关的变换，以在显示设备上实现更自然的色彩表现。开发者在选择颜色时，应关注饱和度、亮度的组合，以确保在不同屏幕上呈现稳定的视觉效果。
兼容性实践：为确保广泛支持，常用的颜色表示法优先放在前，较新或实验性特性可作为备用方案或通过浏览器特性检测来回退。
2.2 CSS 表达与色彩空间的实用技巧
直观表达的选择：HSL/HSLA 让你更直观地调节色相、饱和度、亮度，适合在设计系统中快速迭代配色方案。
多空间共存的策略：在同一项目中同时使用 HEX、RGB、HSL，根据具体场景选择，以便在渐变、透明度与色相控制之间达到平衡。
示例：在主题中混合颜色，通过简单的颜色表示法组合，快速实现不同组件的风格统一性。
/* 使用 RGB 与 HSL 的混合示例 */
:root {--brand: #1e90ff; /* HEX */--brand-hsl: hsl(210, 90%, 56%); /* HSL 表示 */
}
.button {color: var(--brand);border-color: var(--brand-hsl);
}
3. CSS color 属性的实战案例
3.1 主题配色与暗黑模式
结合 CSS 变量与媒介查询实现主题切换，是前端 UI 设计中的常见场景。通过在根作用域定义颜色变量，并在偏好色彩模式变化时重新赋值，能够无缝切换背景、文字与强调色。
可维护的实现方式：将背景、文字、主色等核心颜色作为变量，避免逐个控件修改，确保一致性。
:root {--bg: #ffffff;--fg: #111111;--primary: #2563eb;
}
@media (prefers-color-scheme: dark) {:root {--bg: #0b1020;--fg: #e5e7eb;--primary: #4f8aff;}
}
body {background: var(--bg);color: var(--fg);
}
button {background: var(--primary);color: white;
}
3.2 渐变与视觉层次
渐变色在界面中的应用，可以丰富视觉层次，并通过简单的颜色组合传达层级信息。线性渐变常用于背景、按钮、标记等位置，提升视觉吸引力。
一个常见的渐变实践，在不牺牲对比度的前提下营造柔和的风格，用于横幅、卡片背景或装饰性区域。
/* 简单线性渐变背景示例 */
.banner {background: linear-gradient(135deg, #1e90ff 0%, #7c3aed 100%);color: white;
}
3.3 访问性与对比度的实际考量
视觉可读性优先，在深色背景或亮色文本的组合中，确保足够的对比度。通过设计系统中的变量来统一对比度要求，是实现无障碍用户体验的重要环节。
实用的实现方式：在暗黑模式与亮模式之间，通过变量切换前景色与背景色，以保持一致的可读性。
:root {--bg: #ffffff;--fg: #111111;
}
@media (prefers-color-scheme: dark) {:root {--bg: #111111;--fg: #eaeaea;}
}
body {background: var(--bg);color: var(--fg);
}
