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>

列印頁面