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.
Multiply the first number by 16
Multiply the second number by 16
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.
FAQs on Hexadecimal Colours
1. What exactly is a hexadecimal colour code?
A hexadecimal colour code is a six-digit code used in computing and web design to represent a specific colour. It follows a #RRGGBB format, where 'RR' stands for the amount of red, 'GG' for green, and 'BB' for blue. Each pair of characters is a hexadecimal number (base-16) that specifies the intensity of that colour, from 00 (none) to FF (maximum).
2. Why are letters like A, B, C, D, E, and F used in hex codes?
Hexadecimal is a base-16 number system. Our usual decimal system has 10 digits (0-9). To represent values from 10 to 15 with a single character, hexadecimal uses letters. So, A represents 10, B is 11, C is 12, D is 13, E is 14, and F is 15. This allows a huge range of colour values to be written in a short format.
3. How can you tell what colour #FFFF00 is just by reading the code?
You can break the code down by its parts: #RRGGBB.
- FF (Red): The highest possible value, meaning maximum red.
- FF (Green): The highest possible value, meaning maximum green.
- 00 (Blue): The lowest possible value, meaning no blue.
When you mix full-intensity red and green light on a screen, you get the colour yellow. So, #FFFF00 is yellow.
4. What are the main advantages of using hex codes for colours?
There are several key benefits to using hex codes, especially in web development:
- Compactness: They represent millions of colours in a short, six-character code.
- Efficiency: Computers can process hexadecimal numbers very quickly because they convert easily to binary.
- Universality: All modern web browsers understand and display hex colour codes correctly, making them a reliable standard.
5. How are hex colour codes related to RGB values?
Hex codes and RGB values are just two different ways of describing the same colour. The RGB model uses three decimal numbers from 0 to 255 (e.g., RGB(255, 0, 0) for pure red). A hex code represents these same three numbers but in hexadecimal format. For example, the decimal value 255 is written as FF in hexadecimal. So, RGB(255, 0, 0) is the exact same colour as the hex code #FF0000.
6. What is the difference between the hex codes for black, white, and grey?
The difference lies in the intensity of the red, green, and blue components:
- Black (#000000): All components are at their lowest value (00), meaning a total absence of colour and light.
- White (#FFFFFF): All components are at their highest value (FF), meaning a full combination of all colours at maximum intensity.
- Grey: This is created when the values for red, green, and blue are all equal to each other, such as #808080 or #CCCCCC.
7. Can you make a colour lighter or darker just by changing its hex code?
Yes, you can. To make a colour darker, you need to decrease the numerical value of its R, G, and B components, moving them closer to 00. To make a colour lighter, you increase their values, moving them closer to FF. For example, a standard blue might be #0000FF, while a darker navy blue is #000080, and a much lighter sky blue is #87CEEB.
