CSS中颜色的表示方式有多种，不同的表示方式适用于不同的开发场景，其中hex、RGB、rgba是最主流的三类表示方式，下面逐一解析它们的语法和使用方法。
一、hex十六进制颜色表示法
hex是最常用的CSS颜色表示方式，通过十六进制数值组合表示红、绿、蓝三个通道的颜色值，语法格式为#RRGGBB或者#RGB。
其中RR、GG、BB分别代表红色、绿色、蓝色的通道值，取值范围是00到FF，对应十进制的0到255。如果是#RGB的简写形式，每个字符会重复一次，比如#f00等价于#ff0000，表示纯红色。
使用示例：
/* 纯红色 */
.color-red {
color: #ff0000;
}
/* 简写纯红色 */
.color-red-short {
color: #f00;
}
/* 半透明蓝色，hex不支持透明度，这里只是普通蓝色 */
.color-blue {
color: #0066cc;
}
二、RGB颜色表示法
RGB表示法通过指定红、绿、蓝三个通道的十进制数值来表示颜色，语法格式为rgb(红, 绿, 蓝)，每个通道的取值范围是0到255，和hex的通道取值范围是对应的。
这种表示法比hex更直观，比如想要设置纯红色，直接写rgb(255, 0, 0)即可，不需要换算十六进制数值。
使用示例：
/* 纯绿色 */
.bg-green {
background-color: rgb(0, 255, 0);
}
/* 灰色，三个通道值相同 */
.bg-gray {
background-color: rgb(128, 128, 128);
}
/* 紫色 */
.border-purple {
border-color: rgb(128, 0, 128);
}
三、rgba颜色表示法
rgba是在RGB的基础上增加了alpha透明度通道，语法格式为rgba(红, 绿, 蓝, 透明度)，前三个通道的取值规则和RGB一致，透明度的取值范围是0到1，0表示完全透明，1表示完全不透明。
这种方式适合需要设置半透明颜色的场景，比如半透明背景、半透明遮罩层等。
使用示例：
/* 半透明红色背景，透明度0.5 */
.mask {
background-color: rgba(255, 0, 0, 0.5);
}
/* 完全透明的边框 */
.border-transparent {
border: 1px solid rgba(0, 0, 0, 0);
}
/* 轻微透明的黑色文字 */
.text-light {
color: rgba(0, 0, 0, 0.8);
}
四、其他常见的CSS颜色表示方式
除了以上三种，CSS还支持其他颜色表示方式：
- 颜色关键字：直接使用颜色对应的英文单词，比如
red、blue、white等，适合简单的颜色设置，但可选颜色有限。 - HSL/HSLA：通过色相、饱和度、亮度表示颜色，HSLA同样支持透明度通道，语法为
hsl(色相, 饱和度%, 亮度%)、hsla(色相, 饱和度%, 亮度%, 透明度)，色相取值范围0-360，饱和度和亮度是百分比。 - transparent：表示完全透明的颜色，等价于
rgba(0,0,0,0)。
五、不同表示方式的选择建议
实际开发中可以根据场景选择：
- 常规不透明颜色，优先使用hex，书写简短，兼容性最好。
- 需要动态计算颜色通道值的时候，使用RGB更方便，比如通过JS生成颜色时直接计算十进制数值。
- 需要设置透明度的时候，使用rgba，避免额外写opacity属性影响子元素透明度。
- 简单的固定颜色可以使用颜色关键字，提升代码可读性。
注意：所有颜色表示方式的兼容性都覆盖到主流现代浏览器，如果需要兼容非常老旧的浏览器，优先使用hex和颜色关键字，避免使用HSLA等较新的表示方式。