At the end of this Tutorial you will be able to:
You can view a finished version of this project by clicking the image below.
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:
At the end of this Tutorial is a list of resources you may find helpful when choosing website colours.
This Tutorial will focus on adding colours to a web page by setting values for the following three CSS properties. Note the US-style spelling in each case.
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.
.container-box { background-color: #fef1ef }
.container-box h2,
.container-box p { color: #1e266d }
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 next three sections of this Tutorial will explain each colour system in detail.
Simply typing a colour name – such ‘red’ or ‘blue’ (without quotes) – in a CSS 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.
h3 { color: DarkOrchid }
h3 { color: darkorchid }
h3 { color: DARKORCHID }
You can see a full list of colour names on this W3 Schools web page.
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:
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 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:
The following examples of CSS rules show the RGB system used to create the three colours of blue, a light brown and magenta.
h1 { color: rgb(0,0,255) /* blue */}
h2 { color: rgb(255,248,220) /* light brown */ }
h3 { color: rgb(255,0,255) /* 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:
Here are the three colours of blue, light brown and magenta written as hex codes in CSS rules.
h1 { color: #0000FF /* blue */ }
h2 { color: #FFF5DC /* light brown */ }
h3 { color: #FF00FF /* magenta */ }
Like colour names, hex codes are not case-sensitive. For example, both #0000ff and #0000FF are valid and display the colour blue.
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:
So, in the hex colour code system:
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.
In this Tutorial you will work with these two files:
First, let’s edit the HTML file from your previous Tutorial:
<title>Responsive web page with colour text boxes</title>
<meta name="description" content="A sample responsive web page with examples of text in colour boxes.">
<link rel="stylesheet" href="base-7.css">
You are now ready to work with your new web page (base-7.html) and stylesheet (base-7.css).
In the base-7.html web page are four text boxes created by <div> tags as shown below. And for each <div> are three related styles in the base-7.css file.
Let᾿s add some CSS colour rules for the first of the four <div> elements.
.important-note-1 {
...
border-color: #1FA441;
background-color: #E4F5E8;
}
.important-note-1 h3 {
...
color: #1FA441;
}
.important-note-1 p {
...
color: #000;
}
Now, let’s move one to the second of the four text boxes.
.important-note-2 {
...
border-top-color: #044E6C;
border-bottom-color: #044E6C;
}
.important-note-2 h3 {
...
color: #044E6C;
}
.important-note-2 p {
...
color: #044E6C;
}
Next, let’s add some colours to the third text box.
.important-note-3 {
...
border-left-color: #E66465;
background-color: #FFE7E8;
}
Lastly, let’s update the colours of the fourth text box.
.important-note-4 {
...
border-color: #2c4763;
background-color: #1f364d;
}
.important-note-4 h3 {
...
color: #9cb3c9;
}
.important-note-4 p {
...
color: #fff;
}
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:
https://www.citizensinformation.ie
To use the DevTools of the Google Chrome browser:
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:
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:
Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your base-7.html file.
To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.
To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.
After validating your web page and stylesheet, you are now ready to upload them to your account on GitHub.
Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:
https://username.github.io/base-7.html
It may take a few minutes for your uploaded file to appear on GitHub.
Colour psychology 101: How colour affects perception of your website
By Safa Khudeira at the Intechnic Blog
How to use the psychology of colour to increase website conversions
By Neil Patel at the Neil Patel Blog
Understanding colour psychology for impactful web design
By Jerry Cao at DesignModo
The psychology of colour in web design
By Jenni McKinnon at the Envato Blog
A quick guide to website photography
By Eric Karkovack at the Speckyboy
Return to Contents.