HTML 颜色 - 绿叶网

在网页设计中，颜色是至关重要的元素。无论是文字、背景还是边框，都需要用到颜色。其中，常用的颜色表示方式有以下几种。

关键字，比如 red、orange、skyblue 等。
十六进制值，比如 #F1F1F1。
RGB 值，比如 rgb(255, 255, 255)。
RGBA 值，比如 rgba(255, 255, 255, 1.0)。
HSL 值，比如 hsl(60deg 75% 45%)。
HSLA 值，比如 hsla(60deg 75% 45% / 60%)。
HWB 值，比如 hwb(120deg 0% 50% / 75%)。

最常用的是前 3 种方式，因此下面我们会重点讲解这 3 种。

HTML 颜色是 “关键字”

在 HTML 中，颜色值可以是一个关键字。所谓的关键字，指的是颜色的英文名字，比如 red、orange、skyblue 等。

HTML 标准定义了 140 多个颜色名称，包括基础的 red、blue，也有高级的 skyblue（天蓝色）、chocolate（巧克力色）等。

提示: 如果你想要了解网页都支持哪些颜色名，可以查看：HTML 颜色名。

示例 1：使用 “关键字” 颜色值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div style="color: red;">绿叶网（red）</div>
    <div style="color: green;">绿叶网（green）</div>
    <div style="color: blue;">绿叶网（blue）</div>
</body>
</html>

页面效果如下图所示。

HTML颜色是 “关键字”

分析：

style="color: red;" 表示使用 HTML 元素的 style 属性来定义样式，"color: red;" 表示定义该元素的 color 值为 red。

HTML 颜色是 “十六进制值”

在 HTML 中，颜色值可以是一个十六进制值。其中，十六进制值是一个由 “#” 开头以及后面跟着 6 个十六进制字符组成的颜色值，比如 #FF0000 表示红色，#00FF00 表示绿色，#0000FF 表示蓝色。

提示: 很多软件和工具都可以获取十六进制值，比如 Photoshop、Color Express，或者在线拾色器。

示例 2：使用 “十六进制” 颜色值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div style="color: #03FCA1;">绿叶网（#03FCA1）</div>
    <div style="color: #048C02;">绿叶网（#048C02）</div>
    <div style="color: #CE0592;">绿叶网（#CE0592）</div>
</body>
</html>

页面效果如下图所示。

HTML颜色是 “十六进制值”

HTML 颜色是 “RGB 值”

在 HTML 中，颜色值还可以是一个 RGB 值。RGB 是一种色彩标准，由红（Red）、绿（Green）、蓝（Blue）这 3 种颜色变化来得到各种颜色。

提示: 除了 RGB 值，还有一种 RGBA 值。所谓的 RGBA，说白了就是在 RGB 基础上增加了一个透明度（Alpha）。

示例 3：使用 “RGB” 颜色值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div style="color: rgb(249, 175, 56);">绿叶网：rgb(249, 175, 56)</div>
    <div style="color: rgb(10, 191, 116);">绿叶网：rgb(10, 191, 116)</div>
    <div style="color: rgb(155, 38, 222);">绿叶网：rgb(155, 38, 222)</div>
</body>
</html>

页面效果如下图所示。

HTML颜色是 “RGB值”

分析：

在实际开发中，我们可以使用 HTML 颜色来设置各种元素的颜色，包括文本、背景、图像、边框等。

常用的 HTML 颜色

了解一些常用的 HTML 颜色，可以大大提高你的开发效率。其中，常用的 HTML 颜色如下表所示。

常用的 HTML 颜色
关键字	十六进制值	RGB 值
red	#FF0000	rgb(255, 0, 0)
green	#00FF00	rgb(0, 255, 0)
blue	#0000FF	rgb(0, 0, 255)
black	#000000	rgb(0, 0, 0)
white	#FFFFFF	rgb(255, 255, 255)
yellow	#FFFF00	rgb(255, 255, 0)
purple	#FF00FF	rgb(255, 0, 255)
gray	#808080	rgb(128, 128, 128)