CSS颜色表示法有5种：颜色关键字（如red）直观但有限；十六进制（如#FF5733）最常用且兼容性好；RGB通过数值定义色彩，RGBA支持透明度；HSL和HSLA更符合人眼感知，便于调整色调；实际开发中根据需求选择，关键字适合语义化，hex用于设计还原，RGBA/HSLA处理透明，HSL利于动态调色。
CSS 中有多种方式来表示颜色，每种方式都有其特点和适用场景。掌握这些颜色表示方法，有助于更灵活地控制网页的视觉效果。
1. 颜色关键字
颜色关键字是最简单直观的方式，直接使用预定义的颜色名称。
例如：- red：红色
- blue：蓝色
- green：绿色
- black、white、gray 等也是常用关键字
这类写法易读性强，适合基础配色。但可用颜色有限，无法精确控制色调。
2. 十六进制（Hex）表示法
使用 # 符号后跟6位或3位十六进制数字表示红、绿、蓝三原色的强度。
立即学习“前端免费学习笔记（深入）”；
格式：- #RRGGBB：6位，每位0-F，如 #FF5733
- #RGB：3位简写，如 #F53 等同于 #FF5533
这是最常用的颜色表示方式，兼容性好，简洁明了。设计师常从设计工具中复制 hex 值直接使用。
3. RGB 和 RGBA 函数
使用 rgb() 函数通过红、绿、蓝三个通道的数值（0-255）定义颜色。
示例：- rgb(255, 87, 51)：对应 #FF5733
- rgb(0, 0, 0)：黑色
RGBA 在 RGB 基础上增加 alpha 通道，用于设置透明度（0.0 完全透明，1.0 完全不透明）。
- rgba(255, 87, 51, 0.5)：半透明的橙红色
RGBA 特别适合需要背景透明或叠加效果的场景。
4. HSL 与 HSLA
HSL 表示色相（Hue）、饱和度（Saturation）、亮度（Lightness），更符合人类对颜色的感知。
格式：- hsl(24, 100%, 60%)：色相为24°（偏橙），饱和100%，亮度60%
- hsla(24, 100%, 60%, 0.3)：带透明度版本
这种写法便于调整颜色风格，比如想让整体色调更柔和，只需调低饱和度或改变亮度。
5. 使用建议与技巧
不同表示法各有优势，实际开发中可根据需求选择：
- 快速原型或语义明确时用颜色关键字
- 从设计稿取色推荐用十六进制
- 需要透明效果优先考虑RGBA 或 HSLA
- 做主题系统或动态调色时，HSL 更容易通过 JS 调整
现代浏览器对所有方式都支持良好，选择清晰可维护的方式更重要。
基本上就这些，熟练掌握后能更高效地实现精准配色。
