Working with Colours | Front-end Development Tutorials

Learning Goals

At the end of this Tutorial you will be able to:

Apply the CSS properties of color and background-color to web page elements.

About colours in web design

Colours provide web pages with interest and personality. You can see from the examples below how the same image but with different dominant colours affects the impact of a web page.

In deciding which colours to use with your web pages, you may find the list of resources at the end of this Tutorial helpful.

Below is a colour psychology infographic from one of the resources.

Keep in mind that the above chart will not hold true for every individual. However, this information is a good, research-based starting point for deciding your website colour choices.

Choosing your dominant ‘brand’ colour

Your website will have one main or dominant colour that will also be the main colour of your 'brand'.

For Bus Eireann, for example, the main brand colour is red. For Irish Rail, it is green. And for Ryanair, it is blue.

For choosing a modern-looking dominant colour for your website, check out the Flat Colours UI and Bootflat websites.

Creating your colour palette

In addition to your chosen dominant colour, you will typically select one, two or three other colours to create a colour combination or palette of colours that work together harmoniously.

Three good websites for helping you decide on a colour palette are:

Colours: two common CSS properties

The two 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 hyperlinks. By default, web browsers display all text in black.
background-color: You can use this to set the colour behind selected HTML elements or the background of the entire <body> of a web page. All backgrounds are coloured white by default.

color: /* Insert colour value here */;
background-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 against a background-color of light pink.

body { background-color: #fef1ef }
h2, p { color: #1e266d }

By default, each web page has a white-coloured background. You could change this another light colour by entering the following at the end of global.css.

body { background-color: #f7f7f7 }

Aim for a harmonious combination of text and background colours in the main content area of your web pages.

Colour contrast and accessibility

Some colour combinations that are easy for most people to read are difficult or impossible for others. It is estimated that about 20% of web users have some form of limited vision.

In particular, about 1 in 12 men and 1 in 200 women have some form of 'colour blindness'. That means about 5% of your website visitors will not experience your site the way you intended.

There is little point in creating great text content for your website if a significant percentage of your website visitors struggle or cannot read what is on their screens.

An important factor is colour contrast – the difference between the foreground and background colours.

The WebAIM guidelines recommend a minimum contrast ratio of 4.5:1 for text on web pages. For headings and other large text, a contrast ratio of 3:1 is sufficient.

Notice the difference in the contrast ratios shown below. The image is from Google's web.dev website.

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.

h3 { color: DarkOrchid }
h3 { color: darkorchid }
h3 { color: DARKORCHID }

You can see a full list of colour names on this W3 Schools web page.

Adding colours to your four sample CSS files

In previous Tutorials, you created four sample web pages with these file names:

index.html
exercises/page-1.html
exercises/page-2.html
exercises/page-3.html

Later, you linked your sample web pages to these four stylesheet files:

assets/css/global.css
exercises/assets/css/style-1.css
exercises/assets/css/style-2.css
exercises/assets/css/style-3.css

Now you will add colour style rules to the four CSS files (style-1.css, style-2.css, style-3.css, and global.css) and view the effect on the linked sample web pages.

Your finished web pages should look as shown below.

Updating `style-1.css` with colours

Follow these steps to add colours to your first sample web page page-1.html by updating its linked style-1.css stylesheet.

In VS Code, open the stylesheet file named style-1.css in your exercises/assets/css folder.
Near the top of the file just after the RESETS block, add the following:
```
body { background-color: antiquewhite; }
```
To the h1, h2 and h3 style declaration blocks, add this new style rule inside the curly braces:
```
color: brown;
```
At the end of the file, add this for the hyperlink colour.
```
a { color: brown; }
```
Save the style-1.css file.

You can close your style-1.css file in VS Code.

Updating `style-2.css` with colours

Follow these steps to add colours to your second sample web page page-2.html by updating its linked style-2.css stylesheet.

In VS Code, open the stylesheet file named style-2.css in your exercises/assets/css folder.
Near the top of the file just after the RESETS block, add the following:
```
body { background-color: purple; }
```
To the h1, h2 and p style declaration blocks, add this new style rule inside the curly braces:
```
color: white;
```
At the end of the file, add this for the hyperlink colour.
```
a { color: white; }
```
Save the style-2.css file.

You can close your style-2.css file in VS Code.

Updating `style-3.css` with colours

Follow these steps to add colours to your third sample web page page-3.html by updating its linked style-3.css stylesheet.

In VS Code, open the stylesheet file named style-3.css in your exercises/assets/css folder.
Near the top of the file just after the RESETS block, add the following:
```
body { background-color: lightblue; }
```
To the h2 style declaration block, add this new style rule inside the curly braces:
```
color: blue;
```
At the end of the file, add this for the hyperlink colour.
```
a { color: blue; }
```
Save the style-3.css file.

You can close your style-3.css file in VS Code.

Updating `global.css` with colours

Follow these steps to add colours to your home web page index.html by updating its linked global.css stylesheet.

In VS Code, open the stylesheet file named global.css in your main assets/css folder.
Near the top of the file just after the RESETS block, add the following:
```
body { background-color: lightgreen; }
```
At the end of the file, add this for the hyperlink colour.
```
a { color: darkgreen; }
```
Save the global.css file.

You can close your global.css file in VS Code.

Uploading your files to Github

You are now ready to upload your work to your account on Github.

Open a new tab in your web browser and go to Github.com. If you are not already signed in to your Github account, sign in now.
On your Github home page, click the name of the repository (‘repo’) that holds your web pages. Its name will look as follows, where username is your chosen username on Github. username.github.io
On the next Github screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
From the dropdown list displayed, choose the option Upload files.
In File Explorer (Windows) or Finder (Apple Mac), drag-and-drop your index.html file and your 📁 assets and 📁 exercises sub-folders to upload them to your repository on Github.
Scroll down to the bottom of the Github screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
Finally, click the green Commit changes button to upload your entire exercises sub-folder and all the files it contains.

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:

https://username.github.io/index.html
– or simply –
https://username.github.io
https://username.github.io/exercises/page-1.html
https://username.github.io/exercises/page-2.html
https://username.github.io/exercises/page-3.html

It may take a few minutes for your uploaded files to appear on Github.