CSS 4 Digit Hex Color
Last Updated :
09 Jun, 2023
The Four Digit Hex Color can be used as the shorthand for the 8 Digit Hex Color. Four Digit Hex color can be used to define the color of your elements with CSS like 8 Digit Hex Color. There are 8 characters 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 are followed by the hash(#) like #RGBA. Here the R defines the Red, G defines the Green, B defines the Blue and the A defines the Alpha Channel which affects how much transparent it will be.
Syntax:
#RGBA
Note: Here the Red, Green, and Blue define the colors with fewer variants compared to 8 and 6-digit hex color and the last character represent the Alpha channel.
Example 1: In this example, we are using the above-explained method.
html
<!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: Here is another example of the above method
html
<!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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...