View all posts →

Why Hexadecimal is used in css?

Node uses threads

Recent days i have been learning kernel and other low level stuffs, unfortunately i got to know an interesting stuff on why CSS uses hexadecimal to specify the color codes.
Everyone knows CSS uses hexadecimal values of 6characters (#FF00000) to represent a color, anyone wonder why not decimal or anyother units like #123456 or any other stuff.

How colors are represented in CSS?

Before diving into the actual reason, first we will see how colors are represented in CSS.
CSS uses typical color pattern RGB - Red Green Blue.

To know more about color theory check this out (hate science when kid, loving it now :()

Each color in RGB is represented with 1 byte, which is equal to 8 bits.

A byte representation.
RGB - (1byte, 1byte, 1byte).
A bits representation.
RGB - (11111111, 11111111, 11111111).

Now just convert this 1byte(8bits) into decimal, which is 20 + 21 + ... + 27, that is equal to 255.
This decimal representation is the one you will see often in CSS color codes as well.
some examples below

> full red color representation would be = (255, 0, 0) 255 represents one full byte of red and 0 bytes for green and blue.

> full green color representation would be = (0, 255, 0) 255 represents one full byte of green and 0 bytes for red and blue.

> full white color representation would be = (255, 255, 255) since RGB combines to form white.

> orange color representation would be = (255, 165, 0) orange color needs to combine full red color which is 1byte(255) and some bytes(not entire 1 byte) of green(165) and 0 bytes of blue.

From above you can form any kind of color by adjusting the byte value of each.

Now coming to why Hex is used?

Why Hexcode, why not decimal or something else. for EG: full red for hexcode is #FF0000, why not something like #660000 or something else.

Hexadecimal represents in 4bits, so a 1byte(8bits) can be represented with 2 Hex digits (1 Hex digit consists of 4bits, so 2 * 4 bits = 8 bits(1byte)). Hex digits consists of [0-9][A-F].
Hex digits to bits below.

> 0000 - 0

> 0001 - 1

> 0010 - 2

> 0011 - 3

> 0100 - 4

> 0101 - 5

> 0110 - 6

> 0111 - 7

> 1000 - 8

> 1001 - 9

> 1010 - A

> 1011 - B

> 1100 - C

> 1101 - D

> 1110 - E

> 1111 - F

From the above explanation with reference to the above hex to bits table, we can come to a conclusion that we can use 0 - 9, A - F characters to represent a hex code for any color.
Along with that a single color is represented with 1byte(8bits) -> this can also be mapped to hex digit by forming 2 hex digits(4bits + 4 bits).
Some Examples Below

Full red Hex representation would be => #FF0000 - now if you try to convert this into 8bits(1 byte) #F(1111)F(1111)0(0000)0(0000)0(0000)0(0000) => 11111111 00000000 00000000.
This clearly mapped with our RGB code which is (255, 0, 0).

Orange Hex representation would be => #FFA500 - now if you try to convert this into 8bits(1 byte) #F(1111)F(1111)A(1010)5(0101)0(0000)0(0000) => 11111111 10100101 00000000.
This clearly mapped with our RGB code which is (255, 165, 0).

Consider if the same needs to be represented in decimal, it would be #25500 for full red with hexcode #FF0000, #255255255 for full white with hex code #FFFFFF, you can clearly see the inconsistent in the number of digits for both full red and full white when we try to represent in decimal, but the hexcode is consistent and also takes less memory, coz of the number of digits is always going to be 6digits for any color.

Summary

View all posts →