HTML 颜色值
下面为你详细讲解在 HTML/CSS 中使用的各种颜色值（Color Values），包括它们的表示方法、语法格式和示例：
一、十六进制（Hex）
- 格式：
#RRGGBB或简写#RGB RR、GG、BB各两位 16 进制数，范围00–FF（即 0–255）。- 简写
#RGB实际等同于#RRGGBB中每位重复：例如#3A7＝#33AA77。 - 示例：
/* 红色 */
color: #FF0000;
/* 绿色 */
background-color: #0F0;
/* 灰色（#888888） */
border-color: #888;二、RGB / RGBA
- RGB 格式：
rgb(R, G, B) - R、G、B 为十进制数，范围 0–255。
- RGBA 格式：
rgba(R, G, B, A) - A 表示透明度（Alpha），取值 0.0–1.0（0 完全透明，1 完全不透明）。
- 示例：
/* 纯蓝 */
color: rgb(0, 0, 255);
/* 半透明黑，50% 透明度 */
background: rgba(0, 0, 0, 0.5);三、HSL / HSLA
- HSL 格式：
hsl(H, S%, L%) - H（色相）取值 0–360，代表色环角度；
- S（饱和度）和 L（亮度）为百分比。
- HSLA 格式：
hsla(H, S%, L%, A) - A 同样是透明度，0.0–1.0。
- 示例：
/* 纯红（0°）中度饱和，正常亮度 */
color: hsl(0, 100%, 50%);
/* 半透明绿（120°） */
background: hsla(120, 100%, 50%, 0.3);四、CSS 颜色函数的新语法（CSS Color Level 4）
rgb()与rgba()的现代写法：可以直接用百分比或小数透明度：
/* 百分比表示 */
color: rgb(100% 0% 0%);
background: rgba(0% 0% 100% / 0.5);hwb()：使用色相（Hue）、白量（Whiteness）、黑量（Blackness）
/* 60°色相，20% 白，10% 黑 */
color: hwb(60 20% 10%);lab()/lch()：基于 CIELAB 颜色空间，支持更准确的色彩控制（现代浏览器逐渐支持）。
五、关键词（Named Colors）
- 除了上面数值格式，还可以直接使用英文颜色名称，如：
color: tomato; /* #FF6347 */
background: rebeccapurple; /* #663399 */- 全部名称可参考 MDN 或 W3C 列表，共 140 种常用名称。
六、使用建议与注意事项
- 可维护性：复杂项目推荐使用有意义的变量或预处理器（Sass/Less）变量来管理颜色：
$primary-color: #1E90FF;
body { color: $primary-color; }- 可访问性：确保文字与背景之间有足够对比度，遵循 WCAG 标准（对比度至少 4.5:1）。
- 透明度叠加：RGBA/HSLA 会对后面的背景色产生叠加，若想保持容器整体透明推荐用
opacity； - 一致性：同一项目内尽量统一格式（如全部用 HEX 或全部用 HSL），便于团队协作。
七、示例小结
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色示例</title>
<style>
.hex { color: #336699; }
.rgb { color: rgb(255,128,0); }
.rgba { background: rgba(0, 128, 0, 0.3); }
.hsl { border: 2px solid hsl(240, 100%, 50%); }
.hsla { padding: 10px; background: hsla(300, 50%, 50%, 0.4); }
.named { color: gold; }
</style>
</head>
<body>
<p class="hex">这是十六进制颜色 #336699</p>
<p class="rgb">这是 RGB 颜色 rgb(255,128,0)</p>
<p class="rgba">这是 RGBA 背景 rgba(0,128,0,0.3)</p>
<p class="hsl">这是 HSL 边框 hsl(240,100%,50%)</p>
<p class="hsla">这是 HSLA 背景 hsla(300,50%,50%,0.4)</p>
<p class="named">这是命名颜色 gold</p>
</body>
</html>以上就是对 HTML/CSS 中各种颜色值的中文讲解。如需更深入的配色工具推荐或可视化示例，欢迎继续交流！