HTML - HEX 颜色
十六进制 (Hex) 颜色
十六进制 (Hex) 颜色 通过组合红 (RR)、绿 (GG) 和蓝 (BB) 颜色的十六进制值 (#RRGGBB) 来指定,每个值范围从 00 到 FF,其中 00 表示最低强度,FF 表示最高强度。
HEX 颜色值
每个 HEX 颜色值以井号 (#) 开头,并包含六位数字 (#RRGGBB)。前两位 (RR) 指定红色分量,接下来两位 (GG) 指定绿色分量,最后两位 (BB) 指定蓝色分量。这种方法允许对网页设计进行精确的颜色自定义。
示例
以下是通过 hex 值创建红、绿、蓝颜色的示例:
<!DOCTYPE html>
<html>
<head>
<title>Example Hex Color Values</title>
</head>
<body>
<!-- 红色 -->
<div style="background-color: #FF0000; width: 100px; height: 100px;">
RED Color
</div>
<!-- 绿色 -->
<div style="background-color: #00FF00; width: 100px; height: 100px;">
GREEN Color
</div>
<!-- 蓝色 -->
<div style="background-color: #0000FF; width: 100px; height: 100px;">
BLUE Color
</div>
</body>
</html>
在 HTML 中使用 HEX 颜色
要在 HTML 中使用 hex 颜色,可以直接使用 style 属性将它们分配给元素,或者在 style 标签或样式表中使用 color 属性定义它们。
示例 1:使用 style 属性
以下是通过 style 属性为 HTML 元素分配 hex 颜色的示例:
<body> <p style="color: #FF0000;">This text is red.</p> </body>
示例 2:使用 style 标签
以下是通过 style 标签为 HTML 元素分配 hex 颜色的示例:
<head>
<style>
p {
color: #FF0000;
}
</style>
</head>
<body>
<p>This text is red.</p>
</body>
常见颜色的 HEX 颜色代码
下表列出了一些使用十六进制颜色代码表示的颜色:
| 颜色 | 颜色 HEX |
|---|---|
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #FF00FF | |
| #C0C0C0 | |
| #FFFFFF |
HEX 颜色的示例
以下是一些在 HTML 中使用十六进制颜色的示例:
为 body 设置背景色
在以下示例中,我们使用 hex 颜色代码定义 HTML 页面的背景色:
<!DOCTYPE html>
<html>
<head>
<title>
HTML Colors by HEX code
</title>
</head>
<body style="background-color: #00FF00;">
<p>
Use different color code for body
and table and see the result.
</p>
<p style="color: #FFFFFF;">
This text will appear white on
black background.
</p>
</body>
</html>
为表格单元格设置颜色
在以下示例中,我们为 H2 和表格定义背景色:
<!DOCTYPE html>
<html>
<head>
<title>
HTML HEX Color code
</title>
</head>
<body style="width:300px; height:100px;">
<h2 style="background-color: #FF6666;">
Setting the Background using HEX Code
</h2>
<table style="background-color: #FF3335;">
<tr>
<td style="color: #FFFFFF;">
The text color of the paragraph is
styled using HEX code.
</td>
</tr>
</table>
</body>
</html>
为网页设计选择合适的颜色很困难。即使你心中有某种颜色,也需要让计算机理解该颜色的十六进制值。为了让你的工作更轻松,我们建议使用我们的 HTML 颜色选择器工具。