上查看所有课程
CSS color 属性用于设置网页中文本的颜色。例如，
h1 {
color: blue;
}浏览器输出
在此，color: blue 将 h1 元素设置为 蓝色。
CSS 颜色类型
在 CSS 中，color 属性的值可以通过以下颜色格式指定
- 命名颜色：
red,blue,green等 - 十六进制颜色：
#FF0033,#F03等 - RGB 和 RGBa 颜色：
rgb(0, 0, 255),rgba(0, 0, 255, 0.5)等 - HSL 和 HLSa 颜色：
hsl(180, 100%, 75%),hlsa(180, 100%, 75%, 0.5)等
注意：color 属性也称为前景色。
CSS 命名颜色
CSS 命名颜色是指可以在我们的 CSS 中使用的一组预定义的颜色名称。命名颜色易于记忆和使用。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Named colors</title>
</head>
<body>
<h1>CSS Color Property</h1>
</body>
</html>h1 {
/* sets the color of h1 element to blue */
color: blue;
}浏览器输出
浏览器识别的颜色名称大约有 **147** 种，例如 cyan, orange, red, pink, crimson 等等。
CSS RGB 颜色
RGB 颜色基于三种原色：red（红）、green（绿）和 blue（蓝）的组合。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>RGB Color format</title>
</head>
<body>
<h1 class="rgb_red_value">RGB(255, 0, 0) represents red</h1>
<h1 class="rgb_red_percentage">RGB(100%, 0, 0) represents red</h1>
<h1 class="rgb_green_value">RGB(0, 255, 0) represents green</h1>
<h1 class="rgb_blue_value">RGB(0, 0, 255) represents blue</h1>
<h1 class="rgb_black_value">RGB(0, 0, 0) represents black</h1>
</body>
</html>h1.rgb_red_value {
/* sets the color of h1 element to red */
color: rgb(255, 0, 0);
}
h1.rgb_red_percentage {
/* sets the color of h1 element to red */
color: rgb(255, 0, 0);
}
h1.rgb_green_value {
/* sets the color of h1 element to green */
color: rgb(0, 255, 0);
}
h1.rgb_blue_value {
/* sets the color of h1 element to blue */
color: rgb(0, 0, 255);
}
h1.rgb_black_value {
/* sets the color of h1 element to black */
color: rgb(0, 0, 0);
}浏览器输出
在上面的代码中，rgb(255, 0, 0) 的数值分别表示 red、green 和 blue 颜色的强度。
RGB 颜色以逗号分隔的三个数值列表指定，这些数值的范围可以是从 **0** 到 **255**，或者百分比值范围从 **0%** 到 **100%**。例如，rgb(255, 0, 0) 等同于 rgb(100%, 0, 0)。
注意：rgb 值的组合可以生成数百万种不同的颜色。
CSS RGBa 颜色
RGBa 颜色与 RGB 颜色工作方式相同，只是我们多了一个参数 a，它代表 alpha（不透明度）。alpha 的值设置颜色的不透明度。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>RGBa Color Format</title>
</head>
<body>
<h1>rgba(255, 0, 0, 0.5) represents red with opacity 0.5</h1>
</body>
</html>h1 {
/* sets the color of h1 element to red with 50% opacity*/
color: rgba(255, 0, 0, 0.5);
}浏览器输出
在上面的代码中，rgb(255, 0, 0, 0.5) 的数值分别表示 red、green、blue 和 opacity（不透明度）的强度。
RGBa 颜色以逗号分隔的四个数值列表指定。前三个值的范围是从 **0** 到 **255** 或百分比值范围从 **0%** 到 **100%**。最后一个值范围从 **0**（完全透明）到 **1**（完全不透明），表示不透明度的强度。
CSS 十六进制颜色
十六进制颜色，也称为 hex 值，由六位十六进制代码表示。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Hexadecimal colors</title>
</head>
<body>
<h1 class="red_hex_value">#ff0000 represents red</h1>
<h1 class="red_short_hex_value">#f00 represents red</h1>
<h1 class="green_hex_value">#00ff00 represents green</h1>
<h1 class="blue_hex_value">#0000ff represents blue</h1>
<h1 class="black_hex_value">#000000 represents black</h1>
</body>
</html>h1.red_hex_value {
/* sets the color of h1 element to red*/
color: #ff0000;
}
h1.red_short_hex_value {
/* sets the color of h1 element to red*/
color: #f00;
}
h1.green_hex_value {
/* sets the color of h1 element to green*/
color: #00ff00; /*equivalent to #0f0 */
}
h1.blue_hex_value {
/* sets the color of h1 element to blue*/
color: #0000ff; /*equivalent to #00f*/
}
h1.black_hex_value {
/* sets the color of h1 element to black*/
color: #000000; /*equivalent to #000*/
}浏览器输出
在上面的代码中，#ff0000 的左侧成对的数值分别表示 red、green 和 blue 颜色的强度。
hex 颜色中的六位数字可以是 **0** 到 **9** 之间的任何数字，或者 A 到 F 之间的任何字母，它们共同定义了一种特定的颜色。
注意：如果所有十六进制颜色代码的两个连续数字相同，则我们只使用一个数字表示。例如，#ff0000 可以缩写为 #f00，它仍然表示 red 颜色。
CSS HSL 颜色
HSL 颜色是 hue（色相）、saturation（饱和度）和 lightness（亮度）三个组件的组合。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>HSL color format</title>
</head>
<body>
<h1> hsl(0, 100%, 50%) represents red</h1>
</body>
</html>h1 {
color: hsl(0, 100%, 50%);
}浏览器输出
在上面的代码中，hsl(0, 100%, 50%)，
- 第一个值 **0** 代表
hue（色相），取值范围从 **0** 到 **360**。值 **0** 代表red（红），**120** 代表green（绿），**240** 代表blue（蓝）。 - 第二个值
100%代表saturation（饱和度），它表示hue（色相）的强度。值的范围从0%（完全gray（灰色））到100%（完全饱和）。 - 第三个值代表
lightness（亮度），它表示颜色的明暗度。值的范围从0%（完全black（黑色））到100%（完全white（白色））。
CSS HSLa 颜色
HLSa 颜色与 HSL 颜色工作方式相同，只是我们多了一个参数 a，它代表 alpha（不透明度）。alpha 的值设置颜色的不透明度。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>HLSa Color format</title>
</head>
<body>
<h1>hsla(0, 100%, 50%, 0.4) represents light red</h1>
</body>
</html>h1 {
color: hsla(0, 100%, 50%, 0.4);
}浏览器输出
在上面的代码中，hsla(0, 100%, 50%, 0.4)，前三个值分别代表 hue（色相）、saturation（饱和度）和 lightness（亮度），与 hsl 颜色相同。最后一个值 0.4 代表不透明度，其值的范围从 **0**（完全透明）到 **1**（完全不透明）。
对比度的重要性
文本颜色和背景颜色之间有足够的对比度，有助于视力障碍或色盲人士轻松阅读。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Contrast Importance</title>
</head>
<body>
<h1>Good Contrast for Readability</h1>
<p class="good_contrast">
This example provides sufficient contrast between the two colors,
making the text easy to read. This provides sufficient contrast
between the two colors, making the text easy to read.
</p>
<h1>Poor Contrast for Readability</h1>
<p class="poor_contrast">
This text is difficult to read for the individuals with visual
impairments or color blindness. So it is important to ensure
sufficient contrast between the text color and background color is
available.
</p>
</body>
</html>p.good_contrast {
color: #333;
background-color: #f2f2f2;
}
p.poor_contrast {
color: #98a6a7;
background-color: #c7d3d4;
}浏览器输出
