Hexadecimal Colours

Bookmark added to your notes.
View Notes
×

Introduction to Hexadecimal Colours

What is Hexadecimal?

Hexadecimal (also known as base - 16 or hex) is a number system that uses 16 different symbols to represent a particular value. The symbols used in hexadecimal are:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Where, the value of 

  • A = 10

  • B = 11

  • C = 12

  • D = 13

  • E = 14

  • F = 15

The place value in hexadecimal is determined by the power of 16, rather than the power of 10  that is used in the decimal form. For example, 

    3A4₁₆ = 316² + 1016¹ + 416⁰ = 768 + 160 +  4 = 932₁₀

As you must have understood what is hexadecimal, now let us discuss what are hexadecimal colours, hexadecimal colour notation, how does hexadecimal colour code use hexadecimal system, etc.


What are Hexadecimal Colours?

Hexadecimal colour is a method of representing colours from different colour models through hexadecimal values. The format followed in hexadecimal colours are #RRGGBB, where RR is red, GG is green, and BB is blue. The hexadecimal integers can be in the range of 00 to FF to determine the intensity of colours. Considering, 0 as the lowest value and F is the highest value, here is an example to make you understand the hex colour code appropriately.

A simple example of #FF0000 can be understood as, FF = Red, 00 = Green, and 00 = Blue 


This implies that the colour is pure red, because the component of red colour has a maximum value of FF, whereas the component of blue and green colours are at their lowest of 00.


Hexadecimal Colours Notation

Hexadecimal colour notation includes (#) symbol followed by 6 different letters or numbers. The first two letters or numbers in Hexadecimal colour code represent the red colour, the next two represent the green colour, and the last two represent the blue colour. The colour values in hexadecimal colour notation range from 00 to FF ( instead of 0 to 255 in RGB).


How Many Hexadecimal Colours are Available?

There are total 256³ or 16,777,216 colour combination available in standard #RRGGBB notation. It is because each colour values RR, GG, BB can include 256 different colour values ranging from 00 to FF. Hence the total number of colour combinations are 256³ or 16,777,216.

Many modern browsers also support transparency. The means that a completely new set of colour code exists in the form of #AARRGGBB. In this, you will find a combination of total 256⁴ or 4,294,976,296 colour codes. It should be noted that the addition of transparency does not indicate that there are extra colours, as only adding transparency does not change the intensity of colours. It solely means that there are more available colour codes depending on level of transparency or opacity.


How To Read Hex Colour Code?

As we know, in a hexadecimal system the values 1- 9 are represented numerically. However, for values that are 10 and higher, letters are replaced by numbers. Accordingly, A = 10, B = 11, C= 12, and so on.

Here are three steps to quickly calculate the hexadecimal numbers.

  1. Multiply the first number by 16

  2. Multiply the second number by 16

  3. Add the total together to obtain single value

For example, the number 83 in hexadecimal form is actually 131. This can be calculated as 

          816¹ + 316⁰ = 128 + 3 = 131

Working with letters is a similar concept. For example, the value of FF is 255 because you multiply the value of F i.e 15 by 16, then you multiply the value of F i.e 15 by 1. Then add both the values together to get a single value i.e. 255. And the number 255 in hexadecimal colour code represents the bright red colour.

Hexadecimal Colour Example 

As we know, hexadecimal decimal colours on a web page are represented as # RRGGBB, where RR is red, GG is green, and BB is blue.

Accordingly, 

A nice shade of blue colour can be formed by 

  • Red (64/255 )

  • Green (48/255 )

  • Blue ( 255/255)

Hence, (64,48,255) in decimal form is equal to (40,30,FF) in hexadecimal. In Hex colour code, the value is coded as #4030FF.


How Hexadecimal Colour Code Use Hexadecimal Numbers To Minimise Length

There are 255 colour shades each of red, green, and blue (0 - 255) are available. If we want to obtain pure white colour, then it will be represented as #255255255. 

Hexadecimal number system is used in hex colour code to represent 256 colours with the help of only two digits. Rather than counting 0,1, 2 ,3, 4, 5, 6, 7, 8, 9,10 in decimal form, it counts 0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F,and then 10, followed by 11,12,13,14,15,16,17,18,19,1A,1B,1C,1D,1E,1F, and then 20.

This means that 256 colour shades can be represented with only two digits, rather than 100 that are possible for a decimal number system (0 - 99). Hence, the highest possible two-digit is FF i.e. equals to 255. This is why white is represented as #FFFFFF, pure red as #FF0000, pure green as #00FF00, and pure blue as #0000FF.


Did You Know

  • Hex colour Code has 16,777, 216 possible colour combinations.

  • Hexadecimal colours are represented as  #RRGGBB, where RR is red, GG is green, and BB is blue

Hexadecimal Colours Example

  • #000000 - This hex colour code represents pure black colour.

  • #FFFFFF - This hex colour code represents pure white colour.

  • #FF0000 - This hex colour code represents pure red colour.

  • #0000FF - This hex colour code represents blue colour.

  • #FFFF00 - This hex colour code represents yellow colour.

  • #00FFFF - This hex colour code represents Cyan colour.

  • #FF00FF - This hex colour code represents Magenta colour.

  • #00FF00 - This hex colour code is a mixture of red and green colour, defined as yellow.

  • #0000FF - This hex colour code is a mixture of more green and maximum blue obtains colour like the sky.

FAQ (Frequently Asked Questions)

1. What Does Hex Colour Mean?

Ans. Hex colours is a method of representing colours from different colour models with the help of hexadecimal values. The format followed by hexadecimal colour is  #RRGGBB where, 

  • RR is red

  • GG is green

  • BB is blue.

2. What are the Advantages of Hex Colours?

Ans. The advantages include: 

  • Hex colours are more compact, and therefore can be better used for minimized code. Hex colour codes are more compact because only three digits are used for representing some colours, instead of using complete six digits.

  • Hex colours slightly improve the load time of a web page. Computers understand only binary digits, and one hexadecimal digit can easily be converted into four binary digits, whereas decimal digits take longer to convert.

  • Hex colours code can be easily understood by all types of browsers.

  • Simple primary hex colours such as red, black, and white can be written very easily and quickly, especially as shortcuts.