CSS Colours Explained

Colours in CSS can be applied in a variety of different ways; predefined colour names, rgb, rgba, or using Hexadecimal colour values. The below piece of CSS shows using a predefined colour name, the background colour will be set the colour 'purple'.

background-color: Purple;

There are lots of predefined colours in CSS, that can all be applied using just their predefined name as shown above. Below is a list of some of the predefined colours, this is not all of the predefined colours. These names are not case sensitive, so they can be written all uppercase or lowercase it doesn't matter.

• Black, White, Grey (or Gray), Silver
• Blue, Aqua, Cyan
• Crimsom, Red
• Green, DarkGreen, Lime
• Gold, Yellow
• Pink, HotPink, Magenta
• Brown, Maroon
• Purple, Violet

Red, Green, Blue, or 'rgb' is another way in which colours can be set within CSS. The rgb function takes three parameters the represent the red, green, and blue sections of the colour. The values of each colour component can be any integer (whole number) between 0 and 255 inclusively. The value 0 is the lowest value, and therefore none of that colour will be applied. The below code has a 0 value for the blue component, so no blue will be added to the colour. We have set the red component to the brightest value, and the green component to around half (125). This will set the colour to a shade of orange.

background-color: rgb(255, 125, 0);

Alpha is another thing you can apply to colours within CSS. By using the 'rgba' function you can add an additional parameter which sets the alpha value. The alpha is how see-through the colour will be. The numeric value is a decimal number from 0 to 1, so 0.5 is half alpha. The below code takes the same orange colour from above but sets the alpha value to half, making it somewhat see-through.

background-color: rgba(255, 125, 0, 0.5);

Hexadecimal values are the last way you can set colours in CSS. Hexadecimal values range from 0 to F and give each colour component two parts, and starts with a hashtag '#' symbol. The letter parts of Hexadecimal values range from A to F and stand-in for the number 10 to 15. The below CSS code shows the same orange colour from the other examples but in Hexadecimal. The red part is represented by 'FF', the green bit is '76', and the blue component is set to '00'. The green component is not the number 76, it is two parts, the number 7 and the number 6.

background-color: #FF7600;

Converting Hexadecimal values to normal decimal values can be complicated, as hex values are base 16 and decimal numbers are base 10. To convert the Hexadecimal colours to normal decimal numbers we must multiply each number by 16 to the power of the digit location. The below shows how Hexadecimal values convert to normal decimal numbers.

FF = (15 * 16^0) + (15 * 16^1) = 15 * 1 + 15 * 16 = 15 + 240 = 255
76 = ( 7 * 16^0) + ( 6 * 16^1) = 7 * 1 + 6 * 16 = 7 + 96 = 103
00 = ( 0 * 16^0) + ( 0 * 16^1) = 0 * 1 + 0 * 16 = 0 + 0 = 0

To simplify the calculation we can just take the first number of a hex colour and multiply it by the second number multiplied by 16. This is shown below, using the same numbers as above. This is because any number to the power of 0 is equal to the number 1 and 16 to the power of 1 is equal to the number 16.

FF = 15 + (15 * 16) = 255
76 = 7 + ( 6 * 16) = 103
00 = 0 + ( 0 * 16) = 0

This article was originally posted on my website: https://acroynon.com/