HEX in HTML

HEX in HTML with Examples

In this article, I am going to discuss HEX in HTML with Examples. Please read our previous article where we discussed RGB in HTML with Examples. At the end of this article, you will learn everything about HTML HEX with Examples.

Hex in HTML

HTML Color Codes is a standard for representing colors that a computer can read and display. Hex codes are the most often used color codes. Hex codes are three-byte hexadecimal numbers (consisting of six variables), with each character representing the intensity of red, green, and blue in the color.

Each Hex color code begins with the symbol “#” and is followed by six alphabets or digits. For example #141414

HEX in HTML with Examples

  1. The intensity of red is represented by the first and second variables in the Hex color code.
  2. The intensity of green is represented by the third and fourth variables in the Hex color code.
  3. The intensity of blue is represented by the fifth and sixth variables in the Hex color code.

Hex in HTML

  1. #FF0000 — This HTML color code displays only red, with no green or blue.
  2. #00FF00 — This HTML color code displays only green, with no red or blue.
  3. #0000FF — This HTML color code displays only blue, with no red or green.
HEX Example in HTML
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

div{
width:150px;
height:150px;
margin:10px;
border:1px solid black;
}

.div1{
background-color:#141414;
}
.div2{
background-color:#DEDEDE;
}

</style>
<body>

<div class="div1"></div>
<div class="div2"></div>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

HEX Example in HTML

In the example above we have two divs with different background colors.

.div1{
background-color:#141414;
}
.div2{
background-color:#DEDEDE;
}

We have used hex color code #141414 to define the black background color for div1 and #dedede to define the gray background color for div2. Hex codes are not case sensitive i.e. #dedede means the same as #DEDEDE.

In the next article, I am going to discuss HSL in HTML with Examples. Here, in this article, I try to explain HEX in HTML with Examples and I hope you enjoy this HTML HEX with Examples article.

Leave a Reply

Your email address will not be published.