HTML 颜色
# HTML 颜色
在网页设计中，颜色是一个重要的元素，能够显著影响用户体验。HTML 支持多种定义颜色的方法，包括十六进制值、RGB 值和颜色名称。
# 1. 颜色值
HTML 颜色值可以使用十六进制值、RGB 值或颜色名称来定义。
# 1.1 十六进制颜色值
- 十六进制颜色值由一个 "#" 开头，后跟六个字符，每两个字符表示红色、绿色和蓝色的值。
- 每种颜色的最小值是
00，最大值是FF。
<p style="background-color:#FFFF00">通过十六进制设置背景颜色</p>
1
# 1.2 RGB 颜色值
- RGB 颜色值使用
rgb()函数，括号内分别是红色、绿色和蓝色的值，范围从 0 到 255。
<p style="background-color:rgb(255,255,0)">通过 RGB 值设置背景颜色</p>
1
- 这个表格给出了由三种颜色混合而成的具体效果：
# 1.3 颜色名称
- HTML 支持 140 种颜色名称，例如
red、blue、green等。
<p style="background-color:yellow">通过颜色名设置背景颜色</p>
1
# 2. Web 安全色
在早期的计算机系统中，大多数只支持 256 种颜色，因此出现了 Web 安全色的概念。Web 安全色是一组 216 种颜色，这些颜色在所有系统上都能被正确显示。
# 2.1 Web 安全色的组成
- 216 种 Web 安全色由 6 个不同的红色值、6 个绿色值和 6 个蓝色值组合而成。
- 每种颜色的值可以是
00、33、66、99、CC或FF。
<p style="color:#00CC00">这是一种 Web 安全色</p>
1
最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
# 2.2 Web 安全色的使用
虽然现代计算机可以处理数百万种颜色，但使用 Web 安全色仍然有助于确保不同设备和浏览器之间的一致性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颜色示例</title>
</head>
<body>
<h3>十六进制颜色值</h3>
<p style="background-color:#FFFF00">通过十六进制设置背景颜色</p>
<h3>RGB 颜色值</h3>
<p style="background-color:rgb(255,255,0)">通过 RGB 值设置背景颜色</p>
<h3>颜色名称</h3>
<p style="background-color:yellow">通过颜色名设置背景颜色</p>
<h3>Web 安全色</h3>
<p style="color:#00CC00">这是一种 Web 安全色</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 3. 色彩对比和可读性
在网页设计中，确保文本与背景颜色之间有足够的对比度是很重要的，这样才能提高可读性。以下是一些建议：
- 使用高对比度的颜色组合，例如深色文本配浅色背景。
- 避免使用颜色相近的组合，例如浅灰色文本配浅灰色背景。
# 3.1 对比度示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对比度示例</title>
</head>
<body>
<h3>高对比度</h3>
<p style="color:black; background-color:white">黑色文本配白色背景</p>
<h3>低对比度</h3>
<p style="color:lightgrey; background-color:white">浅灰色文本配白色背景</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 4. 颜色渐变
HTML5 和 CSS3 引入了颜色渐变功能，可以创建从一种颜色过渡到另一种颜色的效果。
# 4.1 线性渐变
- 线性渐变从一个方向到另一个方向过渡颜色。
<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
background: linear-gradient(to right, red, yellow);
padding: 50px;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<h3>线性渐变</h3>
<div class="gradient">这是一个线性渐变示例</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 4.2 径向渐变
- 径向渐变从一个中心点向外过渡颜色。
<!DOCTYPE html>
<html>
<head>
<style>
.radial-gradient {
background: radial-gradient(circle, red, yellow, green);
padding: 50px;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div class="radial-gradient">这是一个径向渐变示例</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 5. CSS 变量和自定义属性
CSS 变量（自定义属性）允许在一个地方定义颜色，并在多个地方重复使用，方便管理和维护。
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--main-bg-color: lightblue;
--main-text-color: darkblue;
}
.custom {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: 20px;
}
</style>
</head>
<body>
<h3>CSS 变量</h3>
<div class="custom">这是一个使用 CSS 变量的示例</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05