CSS 数据类型 - <hex-color>

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>

打印页面