CSS颜色表示方法大全：十六进制、RGB和HSL
1. CSS颜色表示方法概述
在网页设计与开发中，颜色是构建视觉效果的核心元素之一。CSS提供了多种表示颜色的方法，使开发者能够精确控制网页元素的色彩表现。找找网将详细介绍CSS中常用的颜色表示方法，包括十六进制值、RGB/RGBA、HSL/HSLA以及颜色关键字等。
CSS颜色值是基于三原色原理实现的，通过组合红色、绿色和蓝色三种基础颜色来创造各种色彩。每种颜色表示方法都有其特定的语法和适用场景，了解这些方法将帮助开发者更有效地实现设计效果。
2. 颜色关键字表示法
颜色关键字是CSS中最简单的颜色表示方法，使用预定义的英文单词指定颜色。CSS最初定义了17个标准颜色名称，后来扩展到约140个标准颜色关键字。
2.1 基本颜色关键字
<!DOCTYPE html>
<html>
<head>
<style>
.color-demo {
padding: 15px;
margin: 10px;
border-radius: 5px;
text-align: center;
}
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.black { background-color: black; color: white; }
.white { background-color: white; border: 1px solid #ccc; }
</style>
</head>
<body>
<div class="color-demo red">红色 - red</div>
<div class="color-demo green">绿色 - green</div>
<div class="color-demo blue">蓝色 - blue</div>
<div class="color-demo yellow">黄色 - yellow</div>
<div class="color-demo black">黑色 - black</div>
<div class="color-demo white">白色 - white</div>
</body>
</html>2.2 扩展颜色关键字
除了基本颜色外，CSS还支持更多描述性颜色名称，如cornflowerblue（矢车菊蓝）、lavenderblush（薰衣草红）等。这些关键字让开发者能够在不记忆复杂数字代码的情况下使用更多色彩。
优点与局限性：
- 优点：简单易记，适合快速原型开发和教学演示
- 局限性：颜色种类有限，无法精确控制，不适合正式项目的品牌色彩管理
3. 十六进制颜色表示法
十六进制颜色值是Web开发中最常用的颜色表示方法，采用#RRGGBB格式，其中RR（红色）、GG（绿色）和BB（蓝色）是00到FF之间的十六进制整数。
3.1 完整十六进制表示
<!DOCTYPE html>
<html>
<head>
<style>
.color-demo {
padding: 15px;
margin: 10px;
color: white;
text-align: center;
}
.hex1 { background-color: #FF0000; } /* 红色 */
.hex2 { background-color: #00FF00; } /* 绿色 */
.hex3 { background-color: #0000FF; } /* 蓝色 */
.hex4 { background-color: #FFFF00; } /* 黄色 */
.hex5 { background-color: #FF00FF; } /* 洋红色 */
.hex6 { background-color: #00FFFF; } /* 青色 */
</style>
</head>
<body>
<div class="color-demo hex1">红色 - #FF0000</div>
<div class="color-demo hex2">绿色 - #00FF00</div>
<div class="color-demo hex3">蓝色 - #0000FF</div>
<div class="color-demo hex4">黄色 - #FFFF00</div>
<div class="color-demo hex5">洋红色 - #FF00FF</div>
<div class="color-demo hex6">青色 - #00FFFF</div>
</body>
</html>3.2 简写十六进制表示
当十六进制颜色的每两位数值相同时，可以使用简写形式，将六位字符缩短为三位。例如，#FFCC00可以简写为#FC0，#FFFFFF可以简写为#FFF。
<!DOCTYPE html>
<html>
<head>
<style>
.color-demo {
padding: 15px;
margin: 10px;
text-align: center;
}
.short1 { background-color: #F00; color: white; } /* 等同于 #FF0000 */
.short2 { background-color: #0F0; } /* 等同于 #00FF00 */
.short3 { background-color: #00F; color: white; } /* 等同于 #0000FF */
.short4 { background-color: #FFF; border: 1px solid #ccc; } /* 等同于 #FFFFFF */
.short5 { background-color: #000; color: white; } /* 等同于 #000000 */
.short6 { background-color: #AAA; } /* 等同于 #AAAAAA */
</style>
</head>
<body>
<div class="color-demo short1">红色 - #F00</div>
<div class="color-demo short2">绿色 - #0F0</div>
<div class="color-demo short3">蓝色 - #00F</div>
<div class="color-demo short4">白色 - #FFF</div>
<div class="color-demo short5">黑色 - #000</div>
<div class="color-demo short6">灰色 - #AAA</div>
</body>
</html>3.3 带透明度的十六进制表示
现代CSS还支持八位十六进制颜色值，其中最后两位表示透明度（alpha通道）。例如，#FF000080表示半透明的红色。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
}
.color-demo {
padding: 15px;
margin: 10px;
text-align: center;
}
.alpha1 { background-color: #FF0000; } /* 不透明红色 */
.alpha2 { background-color: #FF000080; } /* 50%透明红色 */
.alpha3 { background-color: #FF000033; } /* 80%透明红色 */
</style>
</head>
<body>
<div class="container">
<div class="color-demo alpha1">不透明红色 - #FF0000</div>
<div class="color-demo alpha2">半透明红色 - #FF000080</div>
<div class="color-demo alpha3">高透明红色 - #FF000033</div>
</div>
</body>
</html>十六进制颜色表示法被所有浏览器广泛支持，具有简洁直观的优点，特别适合从设计工具中直接复制颜色值。
4. RGB与RGBA颜色表示法
RGB颜色模型通过指定红色、绿色和蓝色三种原色的强度来定义颜色。在CSS中，RGB颜色可以使用函数形式表示。
4.1 RGB颜色表示
RGB颜色值使用rgb(red, green, blue)格式，其中每个参数可以是0-255之间的整数或0%-100%的百分比。
<!DOCTYPE html>
<html>
<head>
<style>
.color-demo {
padding: 15px;
margin: 10px;
color: white;
text-align: center;
}
.rgb1 { background-color: rgb(255, 0, 0); } /* 红色 */
.rgb2 { background-color: rgb(0, 255, 0); } /* 绿色 */
.rgb3 { background-color: rgb(0, 0, 255); } /* 蓝色 */
.rgb4 { background-color: rgb(255, 255, 0); } /* 黄色 */
.rgb5 { background-color: rgb(0, 0, 0); } /* 黑色 */
.rgb6 { background-color: rgb(128, 128, 128); } /* 灰色 */
/* 百分比表示法 */
.rgb7 { background-color: rgb(100%, 0%, 0%); } /* 红色 */
.rgb8 { background-color: rgb(0%, 100%, 0%); } /* 绿色 */
.rgb9 { background-color: rgb(0%, 0%, 100%); } /* 蓝色 */
</style>
</head>
<body>
<div class="color-demo rgb1">红色 - rgb(255, 0, 0)</div>
<div class="color-demo rgb2">绿色 - rgb(0, 255, 0)</div>
<div class="color-demo rgb3">蓝色 - rgb(0, 0, 255)</div>
<div class="color-demo rgb4">黄色 - rgb(255, 255, 0)</div>
<div class="color-demo rgb5">黑色 - rgb(0, 0, 0)</div>
<div class="color-demo rgb6">灰色 - rgb(128, 128, 128)</div>
<div class="color-demo rgb7">红色 - rgb(100%, 0%, 0%)</div>
<div class="color-demo rgb8">绿色 - rgb(0%, 100%, 0%)</div>
<div class="color-demo rgb9">蓝色 - rgb(0%, 0%, 100%)</div>
</body>
</html>4.2 RGBA颜色表示
RGBA是RGB的扩展，增加了alpha通道用于控制颜色的不透明度。alpha值范围从0.0（完全透明）到1.0（完全不透明）。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
}
.color-demo {
padding: 15px;
margin: 10px;
text-align: center;
border: 1px solid #ccc;
}
.rgba1 { background-color: rgba(255, 0, 0, 1); } /* 不透明红色 */
.rgba2 { background-color: rgba(255, 0, 0, 0.7); } /* 70%不透明度红色 */
.rgba3 { background-color: rgba(255, 0, 0, 0.4); } /* 40%不透明度红色 */
.rgba4 { background-color: rgba(255, 0, 0, 0.1); } /* 10%不透明度红色 */
/* 叠加效果演示 */
.overlay {
position: relative;
height: 100px;
background-color: blue;
}
.overlay-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="color-demo rgba1">不透明红色 - rgba(255, 0, 0, 1)</div>
<div class="color-demo rgba2">70%不透明度红色 - rgba(255, 0, 0, 0.7)</div>
<div class="color-demo rgba3">40%不透明度红色 - rgba(255, 0, 0, 0.4)</div>
<div class="color-demo rgba4">10%不透明度红色 - rgba(255, 0, 0, 0.1)</div>
<div class="overlay">
<div class="overlay-text">半透明黄色叠加层</div>
</div>
</div>
</body>
</html>RGBA颜色表示法特别适用于需要创建半透明效果的场景，如模态框背景、阴影效果和颜色叠加。
5. HSL与HSLA颜色表示法
HSL颜色模型使用色相（Hue）、饱和度（Saturation）和亮度（Lightness）来表示颜色，更符合人类对颜色的直观感知。
5.1 HSL颜色表示
HSL颜色值使用hsl(hue, saturation, lightness)格式：
- 色相（Hue）：表示颜色类型，取值范围为0-360度（0或360为红色，120为绿色，240为蓝色）
- 饱和度（Saturation）：表示颜色的鲜艳程度，取值范围为0%-100%（0%为灰色，100%为全彩）
- 亮度（Lightness）：表示颜色的明暗程度，取值范围为0%-100%（0%为黑色，50%为实际色调，100%为白色）
<!DOCTYPE html>
<html>
<head>
<style>
.color-demo {
padding: 15px;
margin: 10px;
text-align: center;
}
.hsl1 { background-color: hsl(0, 100%, 50%); } /* 红色 */
.hsl2 { background-color: hsl(120, 100%, 50%); } /* 绿色 */
.hsl3 { background-color: hsl(240, 100%, 50%); color: white; } /* 蓝色 */
.hsl4 { background-color: hsl(60, 100%, 50%); } /* 黄色 */
.hsl5 { background-color: hsl(0, 0%, 0%); color: white; } /* 黑色 */
.hsl6 { background-color: hsl(0, 0%, 50%); } /* 中等灰色 */
.hsl7 { background-color: hsl(0, 0%, 100%); border: 1px solid #ccc; } /* 白色 */
/* 相同色相不同饱和度 */
.saturation1 { background-color: hsl(120, 100%, 50%); } /* 全饱和绿色 */
.saturation2 { background-color: hsl(120, 80%, 50%); } /* 80%饱和绿色 */
.saturation3 { background-color: hsl(120, 60%, 50%); } /* 60%饱和绿色 */
.saturation4 { background-color: hsl(120, 40%, 50%); } /* 40%饱和绿色 */
.saturation5 { background-color: hsl(120, 20%, 50%); } /* 20%饱和绿色 */
.saturation6 { background-color: hsl(120, 0%, 50%); } /* 灰色 */
/* 相同色相不同亮度 */
.lightness1 { background-color: hsl(240, 100%, 0%); color: white; } /* 黑色 */
.lightness2 { background-color: hsl(240, 100%, 25%); color: white; } /* 暗蓝色 */
.lightness3 { background-color: hsl(240, 100%, 50%); color: white; } /* 标准蓝色 */
.lightness4 { background-color: hsl(240, 100%, 75%); } /* 亮蓝色 */
.lightness5 { background-color: hsl(240, 100%, 90%); } /* 极亮蓝色 */
.lightness6 { background-color: hsl(240, 100%, 100%); border: 1px solid #ccc; } /* 白色 */
</style>
</head>
<body>
<h3>基本HSL颜色</h3>
<div class="color-demo hsl1">红色 - hsl(0, 100%, 50%)</div>
<div class="color-demo hsl2">绿色 - hsl(120, 100%, 50%)</div>
<div class="color-demo hsl3">蓝色 - hsl(240, 100%, 50%)</div>
<div class="color-demo hsl4">黄色 - hsl(60, 100%, 50%)</div>
<h3>饱和度变化（相同色相）</h3>
<div class="color-demo saturation1">全饱和绿色 - hsl(120, 100%, 50%)</div>
<div class="color-demo saturation2">80%饱和绿色 - hsl(120, 80%, 50%)</div>
<div class="color-demo saturation3">60%饱和绿色 - hsl(120, 60%, 50%)</div>
<div class="color-demo saturation4">40%饱和绿色 - hsl(120, 40%, 50%)</div>
<div class="color-demo saturation5">20%饱和绿色 - hsl(120, 20%, 50%)</div>
<div class="color-demo saturation6">灰色 - hsl(120, 0%, 50%)</div>
<h3>亮度变化（相同色相）</h3>
<div class="color-demo lightness1">黑色 - hsl(240, 100%, 0%)</div>
<div class="color-demo lightness2">暗蓝色 - hsl(240, 100%, 25%)</div>
<div class="color-demo lightness3">标准蓝色 - hsl(240, 100%, 50%)</div>
<div class="color-demo lightness4">亮蓝色 - hsl(240, 100%, 75%)</div>
<div class="color-demo lightness5">极亮蓝色 - hsl(240, 100%, 90%)</div>
<div class="color-demo lightness6">白色 - hsl(240, 100%, 100%)</div>
</body>
</html>5.2 HSLA颜色表示
HSLA是HSL的扩展，增加了alpha通道用于控制不透明度，类似于RGBA。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
}
.color-demo {
padding: 15px;
margin: 10px;
text-align: center;
border: 1px solid #ccc;
}
.hsla1 { background-color: hsla(120, 100%, 50%, 1); } /* 不透明绿色 */
.hsla2 { background-color: hsla(120, 100%, 50%, 0.7); } /* 70%不透明度绿色 */
.hsla3 { background-color: hsla(120, 100%, 50%, 0.4); } /* 40%不透明度绿色 */
.hsla4 { background-color: hsla(120, 100%, 50%, 0.1); } /* 10%不透明度绿色 */
/* 创建协调的配色方案 */
.primary { background-color: hsl(200, 100%, 50%); }
.primary-light { background-color: hsl(200, 100%, 70%); }
.primary-dark { background-color: hsl(200, 100%, 30%); color: white; }
.complementary { background-color: hsl(20, 100%, 50%); }
.analogous1 { background-color: hsl(180, 100%, 50%); }
.analogous2 { background-color: hsl(220, 100%, 50%); }
</style>
</head>
<body>
<div class="container">
<h3>HSLA透明度变化</h3>
<div class="color-demo hsla1">不透明绿色 - hsla(120, 100%, 50%, 1)</div>
<div class="color-demo hsla2">70%不透明度绿色 - hsla(120, 100%, 50%, 0.7)</div>
<div class="color-demo hsla3">40%不透明度绿色 - hsla(120, 100%, 50%, 0.4)</div>
<div class="color-demo hsla4">10%不透明度绿色 - hsla(120, 100%, 50%, 0.1)</div>
<h3>使用HSL创建协调的配色方案</h3>
<div class="color-demo primary">主色 - hsl(200, 100%, 50%)</div>
<div class="color-demo primary-light">浅色变体 - hsl(200, 100%, 70%)</div>
<div class="color-demo primary-dark">深色变体 - hsl(200, 100%, 30%)</div>
<div class="color-demo complementary">互补色 - hsl(20, 100%, 50%)</div>
<div class="color-demo analogous1">类似色1 - hsl(180, 100%, 50%)</div>
<div class="color-demo analogous2">类似色2 - hsl(220, 100%, 50%)</div>
</div>
</body>
</html>HSL/HSLA颜色表示法的最大优势在于直观性和易调整性。通过固定色相值并调整饱和度和亮度，可以轻松创建协调的配色方案。
6. 各种颜色表示方法对比
为了帮助开发者选择合适的颜色表示方法，找找网整理了以下对比表格，展示各种颜色格式的特点和适用场景。
6.1 颜色表示方法比较
| 表示方法 | 语法示例 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| 颜色关键字 | red, blue | 简单易记，无需记忆数值 | 颜色数量有限，不够精确 | 快速原型、教学演示、简单项目 |
| 十六进制 | #FF0000, #F00 | 广泛支持，简洁直观，设计工具常用 | 不易调整透明度，数值不直观 | 品牌色彩、静态元素、兼容性要求高的项目 |
| RGB | rgb(255, 0, 0) | 数值表达清晰，便于动态生成 | 语法较长，不支持缩写 | 需要精确控制三原色的场景 |
| RGBA | rgba(255, 0, 0, 0.5) | 支持透明度，适合半透明效果 | 旧版IE支持有限 | 半透明背景、阴影效果、叠加层 |
| HSL | hsl(0, 100%, 50%) | 符合人类直觉，易于调整色彩关系 | 旧版浏览器支持有限 | 配色方案、色彩系统、需要灵活调整的场景 |
| HSLA | hsla(0, 100%, 50%, 0.5) | 支持透明度，易于创建协调配色 | 设计工具不常用 | 半透明色彩、现代Web应用 |
6.2 浏览器支持情况
所有现代浏览器都支持颜色关键字、十六进制、RGB和RGBA表示法。HSL和HSLA在IE9+及所有现代浏览器中得到支持。如果需要兼容旧版浏览器，可以考虑使用十六进制或RGB作为备用方案。
<!DOCTYPE html>
<html>
<head>
<style>
/* 后备方案示例 */
.fallback {
color: #FF0000; /* 所有浏览器都支持的十六进制 */
color: rgba(255, 0, 0, 0.5); /* 支持RGBA的浏览器使用此值 */
}
</style>
</head>
<body>
<div class="fallback">这个元素在不支持RGBA的浏览器中会显示为纯红色</div>
</body>
</html>7. 实际应用示例
7.1 创建调色板系统
<!DOCTYPE html>
<html>
<head>
<style>
:root {
/* 使用十六进制定义主色 */
--primary-color: #3498db;
--secondary-color: #2ecc71;
--accent-color: #e74c3c;
/* 使用HSL定义语义化颜色变量 */
--success-color: hsl(145, 63%, 42%);
--warning-color: hsl(48, 89%, 50%);
--error-color: hsl(6, 78%, 57%);
/* 使用RGBA定义透明层 */
--overlay-dark: rgba(0, 0, 0, 0.7);
--overlay-light: rgba(255, 255, 255, 0.8);
}
.color-system {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 20px;
}
.color-card {
padding: 20px;
border-radius: 5px;
text-align: center;
color: white;
font-weight: bold;
}
.primary { background-color: var(--primary-color); }
.secondary { background-color: var(--secondary-color); }
.accent { background-color: var(--accent-color); }
.success { background-color: var(--success-color); }
.warning { background-color: var(--warning-color); color: #333; }
.error { background-color: var(--error-color); }
.dark-overlay {
background-color: var(--overlay-dark);
padding: 15px;
margin-top: 10px;
}
.light-overlay {
background-color: var(--overlay-light);
padding: 15px;
margin-top: 10px;
color: #333;
}
</style>
</head>
<body>
<div class="color-system">
<div class="color-card primary">主色<br>#3498db</div>
<div class="color-card secondary">辅助色<br>#2ecc71</div>
<div class="color-card accent">强调色<br>#e74c3c</div>
<div class="color-card success">成功色<br>hsl(145, 63%, 42%)</div>
<div class="color-card warning">警告色<br>hsl(48, 89%, 50%)</div>
<div class="color-card error">错误色<br>hsl(6, 78%, 57%)</div>
</div>
<div class="dark-overlay">深色叠加层 - rgba(0, 0, 0, 0.7)</div>
<div class="light-overlay">浅色叠加层 - rgba(255, 255, 255, 0.8)</div>
</body>
</html>7.2 动态颜色调整示例
<!DOCTYPE html>
<html>
<head>
<style>
.dynamic-colors {
padding: 20px;
font-family: Arial, sans-serif;
}
.color-box {
width: 100%;
height: 100px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;
transition: background-color 0.3s ease;
}
.controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 20px 0;
}
.control-group {
padding: 10px;
border: 1px solid #eee;
border-radius: 5px;
}
input[type="range"] {
width: 100%;
}
</style>
</head>
<body>
<div class="dynamic-colors">
<h2>HSL颜色动态调整演示</h2>
<div class="color-box" id="zzw_color_demo"></div>
<div class="controls">
<div class="control-group">
<label for="zzw_hue">色相 (Hue): <span id="zzw_hue_value">0</span>°</label>
<input type="range" id="zzw_hue" min="0" max="360" value="0">
</div>
<div class="control-group">
<label for="zzw_saturation">饱和度 (Saturation): <span id="zzw_saturation_value">100</span>%</label>
<input type="range" id="zzw_saturation" min="0" max="100" value="100">
</div>
<div class="control-group">
<label for="zzw_lightness">亮度 (Lightness): <span id="zzw_lightness_value">50</span>%</label>
<input type="range" id="zzw_lightness" min="0" max="100" value="50">
</div>
<div class="control-group">
<label for="zzw_alpha">透明度 (Alpha): <span id="zzw_alpha_value">1</span></label>
<input type="range" id="zzw_alpha" min="0" max="100" value="100">
</div>
</div>
<div id="zzw_color_code">当前颜色: hsl(0, 100%, 50%)</div>
</div>
<script>
// 获取DOM元素
const zzw_color_demo = document.getElementById('zzw_color_demo');
const zzw_hue = document.getElementById('zzw_hue');
const zzw_saturation = document.getElementById('zzw_saturation');
const zzw_lightness = document.getElementById('zzw_lightness');
const zzw_alpha = document.getElementById('zzw_alpha');
const zzw_hue_value = document.getElementById('zzw_hue_value');
const zzw_saturation_value = document.getElementById('zzw_saturation_value');
const zzw_lightness_value = document.getElementById('zzw_lightness_value');
const zzw_alpha_value = document.getElementById('zzw_alpha_value');
const zzw_color_code = document.getElementById('zzw_color_code');
// 更新颜色函数
function zzw_updateColor() {
const hue = zzw_hue.value;
const saturation = zzw_saturation.value;
const lightness = zzw_lightness.value;
const alpha = zzw_alpha.value / 100;
// 更新显示值
zzw_hue_value.textContent = hue;
zzw_saturation_value.textContent = saturation;
zzw_lightness_value.textContent = lightness;
zzw_alpha_value.textContent = alpha.toFixed(2);
// 应用颜色
if (alpha < 1) {
zzw_color_demo.style.backgroundColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
zzw_color_code.textContent = `当前颜色: hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha.toFixed(2)})`;
} else {
zzw_color_demo.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
zzw_color_code.textContent = `当前颜色: hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
}
// 添加事件监听器
zzw_hue.addEventListener('input', zzw_updateColor);
zzw_saturation.addEventListener('input', zzw_updateColor);
zzw_lightness.addEventListener('input', zzw_updateColor);
zzw_alpha.addEventListener('input', zzw_updateColor);
// 初始化颜色
zzw_updateColor();
</script>
</body>
</html>8. 总结
8.1 选择指南
找找网建议开发者根据具体需求选择合适的颜色表示方法：
- 追求兼容性和简洁性：使用十六进制表示法，特别适合品牌色彩和静态元素
- 需要透明度控制：使用RGBA或HSLA，适合半透明背景、阴影和叠加效果
- 系统化色彩管理：使用HSL/HSLA，便于创建协调的配色方案和色彩变体
- 快速原型和简单项目：使用颜色关键字，简单直观
- 动态颜色操作：使用RGB/RGBA或HSL/HSLA，便于通过JavaScript动态计算和调整
8.2 最佳实践
- 在项目中保持颜色表示方法的一致性，提高代码可维护性
- 使用CSS变量（自定义属性）集中管理颜色，便于整体调整
- 考虑浏览器兼容性需求，必要时提供后备方案
- 结合设计系统的需要，选择最适合的颜色模型
通过掌握各种CSS颜色表示方法，开发者可以更有效地实现设计意图，创建视觉吸引力强且维护性好的网页项目。
教程知识点总结
| 知识点 | 知识内容 |
|---|---|
| 颜色关键字 | 使用预定义的英文单词指定颜色，简单易记但颜色数量有限 |
| 十六进制表示法 | 使用#RRGGBB格式表示颜色，广泛支持且简洁直观 |
| RGB/RGBA表示法 | 通过红、绿、蓝三原色强度定义颜色，RGBA支持透明度 |
| HSL/HSLA表示法 | 通过色相、饱和度、亮度定义颜色，更符合人类直觉，易于创建配色方案 |
| 浏览器兼容性 | 十六进制和RGB兼容性最好，RGBA/HSL/HSLA需IE9+以上浏览器 |
| 应用场景选择 | 根据项目需求、兼容性要求和开发团队习惯选择合适的颜色表示方法 |