<hex-color>

<hex-color> CSS 数据类型是一种用于描述 sRGB 颜色的 *十六进制颜色语法* 的表示法，使用其主要颜色分量（红色、绿色、蓝色）写成十六进制数字，以及其透明度。

<hex-color> 值可以在任何可以使用 <color> 的地方使用。

语法

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax

值

R 或 RR: 颜色的 *红色* 分量，作为介于 0 和 ff (255) 之间的区分大小写的十六进制数字。如果只有一个数字，则将其重复：1 表示 11。
G 或 GG: 颜色的 *绿色* 分量，作为介于 0 和 ff (255) 之间的区分大小写的十六进制数字。如果只有一个数字，则将其重复：c 表示 cc。
B 或 BB: 颜色的 *蓝色* 分量，作为介于 0 和 ff (255) 之间的区分大小写的十六进制数字。如果只有一个数字，则将其重复：9 表示 99。
A 或 AA 可选: 颜色的 *alpha* 分量，指示其透明度，作为介于 0 和 ff (255) 之间的区分大小写的十六进制数字。如果只有一个数字，则将其重复：e 表示 ee。0 或 00 表示完全透明的颜色，f 或 ff 表示完全不透明的颜色。

注意：语法不区分大小写：#00ff00 与 #00FF00 相同。

示例

十六进制艳粉色

此示例包含四个艳粉色的正方形，其完全不透明或半透明的背景是使用四种不同长度的区分大小写十六进制颜色语法创建的。

HTML

html

<div>
  #F09
  <div class="c1"></div>
</div>
<div>
  #f09a
  <div class="c2"></div>
</div>
<div>
  #ff0099
  <div class="c3"></div>
</div>
<div>
  #FF0099AA
  <div class="c4"></div>
</div>

CSS

艳粉色的背景颜色是使用三值、四值、六值和八值十六进制表示法创建的，并使用大写和小写字母。

body {
  display: flex;
  justify-content: space-evenly;
  font-family: monospace;
}
div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

css

[class] {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09a;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099aa;
}

结果

规范

规范
CSS 颜色模块级别 4 # 十六进制表示法

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

<color> 数据类型
<named-color> 数据类型
rgb() 颜色函数
CSS 颜色模块