十六进制颜色指定为:#RRGGBB,其中 RR (红色)、GG(绿色)和 BB(蓝色)十六进制整数指定 颜色。
在 CSS 中,可以使用以下形式的十六进制值指定颜色:
#rrggbb
其中 rr(红色)、gg(绿色)和 bb(蓝色)是 00 到 ff 之间的十六进制值(与十进制 0-255 相同)。
例如#ff0000显示为红色,因为红色设置为其最高值(ff),其他设置为 最低值 (00)。
要显示黑色,请将所有值设置为 00,如下所示:#000000。
要显示白色,请将所有值设置为 ff,例如 这个:#ffffff。
通过混合以下十六进制值进行实验:
RED
GREEN
BLUE
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HEX values</h1>
<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>
</body>
</html>
灰色阴影通常使用所有 3 个光源的相同值来定义:
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>
</body>
</html>
有时您会在 CSS 源代码中看到 3 位十六进制代码。
3 位十六进制代码是某些 6 位十六进制代码的简写。
3 位十六进制代码具有以下形式:
#rgb
其中r、g和b代表红、绿、蓝分量,其值在0到f之间。
仅当两个值(RR、GG 和 BB)相同时才能使用 3 位十六进制代码 每个组件。所以,如果我们有#ff00cc,可以这样写:#f0c。
这是一个例子:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>
<h1>CSS 3-digit Hex Code</h1>
<p>This is a paragraph.</p>
</body>
</html>