HTML5 color codes and formats

Digital colors can be represented in a number of ways. We will just take a look at the important one's we use for web/Internet.

In HTML5 or even HTML4 there are several ways to define color names. We will be looking at the most prominent one's. Most of the people use RGB, HEX, HSL, RGBA, or HSLA values to define html colors. These are called color formats.

Computers do not see the way we see colors. They are complex. Thus color codes we born to solve the issue.

What are html color codes?

Color codes are used to tell a computer how to interpret or display colors we see everyday. As you already know there are several formats. Let's explore them individually with an example.

HEX COLOR CODES

Identifying and using hexadecimal color codes(hex codes) is pretty straight forward. In fact these are the most common and polular way to represent colors on a website or a html page. These are six character long and contain 24 bit. Each number pair in hex tells the computer something. they represent the intensity of red, green and blue colors respectively.

Format: #XXXXXX

The lowest intensity of the first two bits or a byte range from 00 to FF. Where, 00 represents lowest intensity and FF represents highest intensity. These are called values.

Confused? Let's make this simpler with examples of primary colors. The # symbol at the beginning signifies it a hex color format.

Red - '#FF0000' Green - '#00FF00' Blue -'#0000FF'

Quick knowledge check, comment the answer, and share the post to win Paytm cash. (Details at the end of the post.) What is the red, green and blue values for this hexa color representation? #ffff1a. You already know this common!

One last thing, the mordren browser can support up ~16 million colors. That's a lot. We won't explore this further. There are a lot of other aspects on how these are constructed etc. This would be sufficient for now. Just leave a comment if you have any doubt.

How to use html color codes on a website? You already know half of the stuff. Check the video tutorial to learn more. Youtube video will be available here shortly. You can also check this short tutorial I made to show the use cases of colors. It's interactive, you can also play around and practice.

RGB COLOR CODES Even RGB color names, RGB color codes or just called RGB notation's are pretty straight forward. These are 24 bit wide. Thus we get a 24 bit depth while using these.

The way we represent them is a little compared to hex representation. Here we have three values for red, green and blue. Each one starts at zero(0) and can run up to two fifty five(255). Thus, three values. Here is a quick example so that you are not confused.

Yellow: rgb(255, 255, 26)

This notation yeilds yellow color. Here, red is 255, green is 255 and blue is 26. Even using these in the style sheet's it straight forward. Go to the Scrim page that we already have and practice there. We would love to know which color, you used. Tell us in the comment section below. Awesome!

Clue: background: rgb(,,__);

Continue reading here: Other blog, need some traffic

Thus, half of my article's will be here and the other there. Haha. Just a wee bit of adjustment. Cheers.