Understand the three main colour systems used in web design: colour names, RGB values and hex codes.
Use web browser DevTools to identify the colours of selected web page elements.
Apply the CSS properties of color, background-color and border-color to web page elements.
You can view finished versions of the four sample web pages you style with colours in this Tutorial by clicking the links below. The finished samples will each open in a new tab of your web browser.
Colours provide web pages with interest and personality. One way to add colour to a web page is to include images.
You can see from the examples below how the same image but with different dominant colours affects the impact of a web page.
Many research studies have shown that colour choice in design influences user psychology and behaviour. For example:
The colour brown is associated with warmth and cosiness.
Blue inspires trust and confidence.
And red evokes emotions of excitement and passion.
At the end of this Tutorial is a list of resources you may find helpful when choosing website colours.
Colours: three CSS properties
The three most commonly used CSS colour-related properties are listed below. Note the US-style spelling in each case.
color: You use this to set the colour of text elements, such as headings, paragraphs, lists and links.
By default, web browsers display text in black.
background-color: You can use this to set the colour behind text elements, the background of a <div> or the background of the entire <body> of a web page.
All backgrounds are coloured white by default.
border-color: As with background-color, this can be used with text elements, <div> elements and the <body> as a whole.
All borders are coloured black by default.
color: /* Insert colour value here */;
background-color: /* Insert colour value here */;
border-color: /* Insert colour value here */;
In the example below, you can see the text elements <h2> and <p> both have a color of dark blue. They are positioned in a <div> with a class name of "container-box" that has a background-color of light pink.
And here are some examples of the border-color property in use along with text color and background-color properties.
In web design, there are three common systems for setting colours:
The colour name system
The RGB system
The hex code system
The next three sections of this Tutorial will explain each colour system in detail.
The colour name system
Simply typing a colour name – such ‘red’ or ‘blue’ (without quotes) – in a CSS style rule is a common starting point when designing a new web page.
h1 { color: red }
Many colour names are both easy-to-remember and self-explanatory. For example, ‘yellow’, ‘purple’ and so on. Other colour names are less obvious, such as ‘hotpink’, ‘mediumvioletred’ and ‘lavenderblush’.
Colour names are not case-sensitive. For example, these three versions of the same colour name are all valid.
However, the final version of a web page will typically use either RGB values or hex codes rather colour names for the following two reasons:
Limited choice: Modern electronic screens can display at least 16 million different colours. With colour names, you are limited to only 147 choices.
Misleading names: Even when colour names are easy-to-remember, they are not always accurate. For example, DarkGray is actually lighter than Gray.
Note that, in CSS, the colour name of grey can be written in either US spelling (gray) or UK spelling (grey). Either will work correctly.
The RGB colour system
The RGB system is based on the following idea:
Any colour can be created by combining different intensities of the three primary colours: red, green and blue.
Here are a few points about the Red-Green-Blue colour system:
Every RGB colour is written as a list of three values: first the red value, then the green value, and then the value for blue.
The individual values are separated from one another by commas.
You can write each individual value as a percentage (0% to 100%) or a number (0 to 255). The following two examples both produce the colour red:
100%,0%,0%
-or- 255,0,0
The three values are enclosed within brackets and preceded by the letters rgb (in lower-case or upper-case). In the example of red, the CSS value would look as follows:
rgb(100%,0%,0%)
-or- rgb(255,0,0)
The following examples of CSS style rules show the RGB system used to create the three colours of blue, a light brown and magenta.
This is the colour system most widely used in web design. As with the RGB system, the displayed colour is created by combining different intensities of red, green and blue. But the hex (short for hexadecimal) code system is different in four ways:
The hex colour code begins with the hash (#) symbol.
No commas are used to separate the red, green and blue values from one another.
The list of red, green and blue values is not enclosed in brackets.
The red, green and blue values are each written as a pair of two hexadecimal numbers.
Here are the three colours of blue, light brown and magenta written as hex codes in CSS style rules.
Like colour names, hex codes are not case-sensitive. For example, both #0000ff and #0000FF are valid and display the colour blue.
Decoding the hex colour system
A hex colour code may look like a random jumble of numbers and letters. Given that this system is so widely used in web design, however, it is worth taking a few moments to understand how this colour system works.
Here are the main points to note:
In the everyday decimal system, there are 10 number symbols: 0, 1, 2, 3, 5, 6, 7, 8 and 9.
In the hexadecimal system, however, there are 16 number symbols: 0, 1, 2, 3, 5, 6, 7, 8, 9, A, B, C, D, E and F.
The hexadecimal numbers A, B, C, D, and E are equal to the decimal numbers 10, 11, 12, 13, 14 and 15.
Every hex colour code is really a combination of three number pairs.
As in the RGB system, the first pair is the red value, the second pair is green and the third is blue.
The smallest possible value for a pair of two hex numbers is 00. This hex code pair is equivalent to a zero decimal percentage (0%) or the decimal number zero (0).
The largest possible value for a pair of two hex numbers is FF. This hex code pair is equivalent to one hundred per cent (100%) in decimal or the decimal number of 255.
So, in the hex colour code system:
The colour white is #FFFFFF, as all three primary colours are at their maximum intensity: rgb(100%,100%,100%) or rgb(255,255,255).
The colour black is #000000, as all three primary colours are set to zero: rgb(0%,0%,0%) or rgb(0,0,0).
Three-character, short-hand hex codes
Not every hex colour code needs to be written as a string of six digits. You write some hex colours in three-digit shorthand.
Consider the example of the colour white. In CSS, you can write this in two ways:
#FFFFFF
-or-
#FFF
The general rule is as follows:
If any of the three pairs in a six-digit hex code is a duplicate, you need only write that hex digit once.
You can see some more examples of three-digit hex codes below.
For every colour above, three pairs of duplicate hex digits (such as 00, 33 or FF) are shortened into one digit.
Identifying colours with web browser DevTools
You can use the DevTools feature of web browsers to identify the colour of text and backgrounds on a web page. For example, use your web browser to visit the following website:
Press F12 to display the Chrome DevTools window.
You may find it easier to use this option with the DevTools area positioned (docked) at the bottom of the web browser window.
Click the Select arrow at the top-left of the Chrome DevTools window.
Click on the header of the web page with the blue background. Chrome DevTools surrounds the header with a colour border.
In the Chrome DevTools window, you can see the Elements panel at the left and the Styles sub-panel at the right.
In the Styles sub-panel, you can see the text and background colour values of the selected web page element.
To use the DevTools of the Mozilla Firefox browser:
From the Tools menu, choose the Web Developer command and then Inspector.
You may find it easier to use this option with the DevTools area positioned (docked) at the bottom of the web browser window.
Click the Inspect arrow at the top-left of the Firefox DevTools window.
Click on the header of the web page with the blue background. Firefox DevTools surrounds the header with a blue, dashed-line border.
In the centre panel of the Firefox DevTools window, you can see the text and background colour values of the selected web page element.
In both Chrome and Firefox DevTools windows, you can edit the CSS colour or other values of any selected web page element.
Here are a few resources to learn more about DevTools:
After completing your stylesheet updates, your next step is to upload them to your account on GitHub.
If you are not already signed in to your GitHub account, sign in now.
In File Explorer (Windows 10) or Windows Explorer (Windows 7), select or drag-and-drop the following four files to upload them to your GitHub account.
style-1.html style-2.html style-3.html style-4.html
Finally, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box and click the Commit changes button.
Your web pages are now published on GitHub at web addresses similar to the following, where username is the username you have chosen for your GitHub account:
In the Chrome DevTools window, you can see the Elements panel at the left and the Styles sub-panel at the right.
In the Styles sub-panel, you can see the text and background colour values of the selected web page element.
In the centre panel of the Firefox DevTools window, you can see the text and background colour values of the selected web page element.
