CSS颜色属性 — Web开发者完整指南
掌握从color和background-color到渐变和透明度的所有CSS颜色属性。包含实用示例的Web开发者综合参考。
基础：color和background-color
最基本的两个CSS颜色属性是color（用于文本）和background-color（用于元素背景）。它们接受任何有效的CSS颜色值，包括命名颜色、HEX、RGB、HSL和现代颜色函数。
color属性设置元素的前景色，主要影响文本内容。background-color属性填充元素的整个内容和内边距区域。
现代CSS颜色函数
CSS已经超越了基本的rgb()和hsl()：
rgb()函数现在支持现代空格分隔语法：rgb(255 0 0)。Alpha透明度使用斜杠：rgb(255 0 0 / 50%)。
hsl()函数类似工作。HSL特别适合创建颜色变体。
color-mix()函数可以混合两种颜色。oklch()和oklab()函数提供感知均匀的色彩空间。
渐变：线性、径向和锥形
CSS渐变创建平滑的颜色过渡：
线性渐变沿直线流动：background: linear-gradient(to right, #ff0000, #0000ff)。
径向渐变从中心点辐射：background: radial-gradient(circle, red, blue)。
锥形渐变围绕中心点像饼图一样旋转。非常适合创建色轮。
不透明度和透明度
CSS提供多种控制透明度的方式：
opacity属性影响整个元素及其所有子元素。颜色值中的alpha通道仅影响特定属性。
transparent关键字等同于rgba(0, 0, 0, 0)。currentColor关键字继承当前文本颜色。
CSS自定义属性用于颜色系统
CSS自定义属性（变量）是现代颜色系统的基础。它们允许定义颜色一次并在整个样式表中重用。
对于暗色模式，只需覆盖变量即可。
我们的取色器工具可即时生成所有CSS格式的颜色值。