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.
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.
Each color in RGB is represented with 1 byte, which is equal to 8 bits.
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.
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.
Decimal representation of color code in CSS make it longer and harder to read.
Decimal representation requires extra conversion logic.
Hex is simpler to represent and easy to map with binary and also it takes only less memory to represent n number of colors.