CSS 数据类型 <hex-color> 用于使用以十六进制数字表示的原色分量（红色、绿色、蓝色）及其透明度来描述 sRGB 颜色的十六进制颜色语法。
<hex-color> 值可以在使用 <color> 的地方使用。
可能的值
CSS 数据类型 <hex-color> 使用以下值之一定义：
- R 或 RR：颜色的红色分量。它是介于 0 和 ff （255） 之间的不区分大小写的十六进制数。传递单个数字时，该数字是重复的;2 表示 22。
- G 或 GG：颜色的绿色成分。它是介于 0 和 ff （255） 之间的不区分大小写的十六进制数。传递单个数字时，该数字是重复的;C 表示 CC。
- B 或 BB：颜色的蓝色分量。它是介于 0 和 ff （255） 之间的不区分大小写的十六进制数。传递单个数字时，该数字是重复的;8 表示 88。
- A 或 AA：颜色的 Alpha 分量，表示透明度。它是介于 0 和 ff （255） 之间的不区分大小写的十六进制数。传递单个数字时，该数字是重复的;e 表示 ee。0 或 00 表示完全透明颜色，f 或 ff 表示完全不透明的颜色。
语法
<hex-color> =
// The three-value syntax
#RGB
// The four-value syntax
#RGBA
// The six-value syntax
#RRGGBB
// The eight-value syntax
#RRGGBBAA
注意：不区分大小写的语法表示，#00ff00 等同于 #00FF00。
CSS <hex-color> - 十六进制值
以下示例演示了 <hex-color> 值的用法：
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
}
.basic-hex-value {
background: conic-gradient(#ff0000, #367899);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Use of hexadecimal color value</h1>
<div class="basic-hex-value"></div>
</body>
</html>
CSS <hex-color> - 显示语法选项
以下示例演示了 <hex-color> 值的不同语法：
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
display: inline-block;
}
.small-hex-value {
background-color: #f56;
}
.cap-hex-value {
background-color: #F56;
}
.small-six-hex {
background-color: #ff5566;
}
.cap-six-hex {
background-color: #FF5566;
}
</style>
</head>
<body>
<h1>Use of hexadecimal color value</h1>
<div class="small-hex-value">#f56</div>
<div class="cap-hex-value">#F56</div>
<div class="small-six-hex">#ff5566</div>
<div class="cap-six-hex">#FF5566</div>
</body>
</html>
CSS <hex-color> - alpha 值
以下示例演示了 alpha 值的 <hex-color> 的不同语法：
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
display: inline-block;
border: 1px solid black;
}
.small-hex-value {
background-color: #f560;
}
.cap-hex-value {
background-color: #F56F;
}
.small-six-hex {
background-color: #ff556610;
}
.cap-six-hex {
background-color: #FF5566FF;
}
</style>
</head>
<body>
<h1>Use of hexadecimal color value</h1>
<div class="small-hex-value">#f560</div>
<div class="cap-hex-value">#F56F</div>
<div class="small-six-hex">#ff556610</div>
<div class="cap-six-hex">#FF5566FF</div>
</body>
</html>
