Skip to content
Related Articles

Related Articles

Improve Article
CSS | 4 Digit Hex Color
  • Last Updated : 22 Aug, 2019

The Four Digit Hex Color can be used as the shorthand of 8 Digit Hex Color. Four Digit Hex color can be used to define the color of your elements with the CSS like 8 Digit Hex Color. There are 8 character in 8 digit hex color that shrinks to 4 in 4 digit hex color but performance is the same as the color. In the 4 digits the 4 characters followed by the hash(#) like #RGBA. Here the R define the Red, G define the Green, B define the Blue and the A define the Alpha Channel that effects on how much transparent it will be.
Syntax:

#RGBA

Note: Here the Red, Green, and Blue define the colors with less variant compare to 8 and 6 digit hex color and last character represent Alpha channel.
Example 1:




<!DOCTYPE html>
<html>
   
<head>
    <title>CSS 4 Digit Hex Color</title>
    <style>
        body {
            background-color: #666600;
        }
           
        h1 {
            color: green;
        }
           
        article {
            background-color: #FFF4;
            border: 5px solid green;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
   
<body>
    <article>
        <h1>GeeksforGeeks</h1>
    </article>
</body>
   
</html>

Output:

Example 2:




<!DOCTYPE html>
<html>
   
<head>
    <title>CSS 4 Digit Hex Color</title>
   
    <style>
        body {
            background-image: url(
            background-attachment: fixed;
            background-size: cover;
        }
           
        h2 {
            color: white;
        }
           
        article {
            background-color: #FFF2;
            border: 2px solid green;
            background-position: center center;
            text-align: center;
        }
    </style>
</head>
   
<body>
    <article>
        <h2>GeeksforGeeks</h2>
    </article>
</body>
   
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :