CSS Data Type - <hex-color>

The CSS data type <hex-color> is used to describe the hexadecimal color syntax of an sRGB color using the primary color components (red, green, blue) denoted as hexadecimal numbers, along with its transparency.

A <hex-color> value can be used wherever <color> is used.

Possible values

The CSS data type <hex-color> is defined using one of the following values:

  • R or RR: Red component of the color. It is case-insensitive hexadecimal number between 0 and ff (255). When a single number is passed, it is duplicated; 2 means 22.

  • G or GG: Green component of the color. It is case-insensitive hexadecimal number between 0 and ff (255). When a single number is passed, it is duplicated; c means cc.

  • B or BB: Blue component of the color. It is case-insensitive hexadecimal number between 0 and ff (255). When a single number is passed, it is duplicated; 8 means 88.

  • A or AA: Alpha component of the color, signifying transparency. It is case-insensitive hexadecimal number between 0 and ff (255). When a single number is passed, it is duplicated; e means ee. 0, or 00 represents fully transparent color, and f or ff, a fully opaque color.

Syntax

<hex-color> = 
// The three-value syntax
#RGB        

// The four-value syntax
#RGBA       

// The six-value syntax
#RRGGBB     

// The eight-value syntax
#RRGGBBAA

Note: Case-insensitive syntax means, #00ff00 is equivalent to #00FF00.

CSS <hex-color> - hexadecimal value

The following example demonstrates the use of <hex-color> value:

<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> - Showing syntax options

The following example demonstrates the different syntax of <hex-color> value:

<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 Value

The following example demonstrates the different syntax of <hex-color> with alpha value:

<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>
Advertisements