网页开发中精确控制颜色是基础需求，CSS提供了六种主流颜色表达方式。本文系统梳理颜色名称、十六进制、RGB、RGBA、HSL与HSLA的语法规范与参数逻辑，结合代码示例说明各模式的适用边界，帮助你在实际开发中快速做出技术选型。

颜色名称：快速但受限的预设方案

CSS内置了17个标准颜色关键字，使用时无需记忆数值，直接通过名称赋值即可。这些关键字不区分大小写，适用于快速原型或简单样式调整。

除上述17个标准色外，现代浏览器还支持大量扩展颜色名称。但不同浏览器对非标准名称的解析可能存在差异，生产环境建议优先使用数值型颜色表示法。

\n\n\n    \n    \n    \n\n\n    
俺是一个标题
\n\n

输出结果如下：

十六进制码：紧凑且广泛兼容的表示法

十六进制颜色以#开头，后接6位十六进制字符（0-9, A-F），每两位分别代表红、绿、蓝通道的强度。例如#D1483E中，D1为红色分量，48为绿色分量，3E为蓝色分量。

当三组两位数值相同时，可简写为3位。例如#000000可缩写为#000（黑色），#FFFFFF可缩写为#FFF（白色）。这种简写形式在CSS中完全等效，且能减少文件体积。

RGB与RGBA：基于三原色的精确控制

RGB模式通过rgb()函数控制红、绿、蓝三原色的强度。参数支持0~255的整数或0%~100%的百分比，两者可混合使用。

h1 {\n    color: rgb(156, 109, 0);\n}\np {\n    color: rgb(0%, 100%, 0%);\n}

RGBA在RGB基础上增加Alpha通道，用于控制透明度。第四个参数为0~1之间的小数，0表示完全透明，1表示完全不透明。

h1 {\n    color: rgba(255, 0, 0, 0.5);\n}\np {\n    color: rgba(0, 255, 0, 1);\n}

现代CSS空格与斜杠语法

CSS Color Module Level 4引入了更灵活的函数语法。参数可用空格分隔，透明度通过斜杠/指定，例如rgb(255 0 0 / 0.5)等效于rgba(255, 0, 0, 0.5)。该语法在支持现代浏览器的环境中可直接使用，且与旧版逗号语法完全兼容。

HSL与HSLA：符合人类直觉的调色模型

HSL通过色调（Hue）、饱和度（Saturation）、亮度（Lightness）三个维度描述颜色，更贴近人类对色彩的感知方式。

• hue（色调）：色盘角度，范围0~360。0或360为红色，120为绿色，240为蓝色。
• saturation（饱和度）：百分比值，0%为灰色，100%为全彩。
• lightness（亮度）：百分比值，0%为黑色，50%为基准亮度，100%为白色。

使用hsl()函数示例：

p {\n    color: hsl(120, 100%, 25%);\n}

HSLA在HSL基础上增加透明度控制，第四个参数alpha取值0~1，含义与RGBA一致。

p {\n    color: hsla(240, 100%, 50%, 0.5);\n}

现代HSL空格与斜杠语法

与RGB类似，HSL也支持空格分隔参数与斜杠指定透明度，例如hsl(120 100% 25% / 0.8)。该写法在保持语义清晰的同时，提升了代码可读性。

颜色模式选型与最佳实践

不同颜色模式各有优势，实际开发中可根据场景灵活选择：

• 快速原型与简单样式：使用颜色名称或十六进制简写，开发效率高。
• 精确色彩匹配：优先使用RGB或十六进制，便于与设计稿数值对齐。
• 动态调色与主题切换：HSL更直观，调整饱和度或亮度即可生成色系变体。
• 半透明效果：RGBA/HSLA直接支持透明度，避免使用opacity影响子元素。

完整示例展示各模式在实际HTML中的应用：

\n\n\n    \n    \n\n\n    
color: rgb(255, 0, 0);
\n    
color: rgba(255, 0, 0, 0.5);
\n    
color: #EE82EE;
\n    
color: #E8E;
\n    
color: hsl(0, 50%, 50%);
\n    
color: hsla(120,60%,70%,0.3);
\n    
color: green;
\n\n

展示结果如图：