Contents  >

Colours and Web Design

Learning Goals

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

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 and Web Design page-1.html
Colours and Web Design page-2.html
Colours and Web Design page-3.html
Colours and Web Design page-4.html

Contents

About colours in web design

Colours: three CSS properties

The colour name system

The RGB colour system

The hex code colour system

Decoding the hex colour system

Three-character, short-hand hex codes

Identifying colours with web browser DevTools

Adding colours to your four sample CSS files

Updating style-1.css with colours

Updating style-2.css with colours

Updating style-3.css with colours

Updating style-4.css with colours

Uploading your stylesheet files to GitHub

Further resources

About colours in web design

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.

Colours and Web Design

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.

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: /* 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.

Colours and Web Design
  .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.

Colours and Web Design

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.

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.

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 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:

The following examples of CSS style 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 */  }

The hex code colour system

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 style 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.

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:

So, in the hex colour code system:

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.

Colours and Web Design

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:

https://www.citizensinformation.ie

To use the DevTools of the Google Chrome browser:

  1. 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. Tutorial RWD: Media Queries
  2. Click the Select arrow at the top-left of the Chrome DevTools window. Tutorial RWD: Media Queries
  3. Click on the header of the web page with the blue background. Chrome DevTools surrounds the header with a colour border. Tutorial RWD: Media Queries In the Chrome DevTools window, you can see the Elements panel at the left and the Styles sub-panel at the right. Tutorial RWD: Media Queries 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:

  1. 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. Tutorial RWD: Media Queries
  2. Click the Inspect arrow at the top-left of the Firefox DevTools window. Tutorial RWD: Media Queries
  3. Click on the header of the web page with the blue background. Firefox DevTools surrounds the header with a blue, dashed-line border. Tutorial RWD: Media Queries In the centre panel of the Firefox DevTools window, you can see the text and background colour values of the selected web page element. Tutorial RWD: Media Queries

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:

Adding colours to your four sample CSS files

In the Introduction to HTML Tutorial, you created four sample web pages with these file names:

page-1.html
page-2.html
page-3.html
page-4.html

Later, in the Styling Web Pages with CSS Tutorial, you linked your sample web pages to these four stylesheet files:

style-1.css
style-2.css
style-3.css
style-4.css

Now you will add colour style rules to the four CSS files, and view the effect on the linked sample web pages.

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.

Currently, this web page looks as follows:

page-1.html (before colours added).

  1. In VS Code, open the stylesheet file named style-1.css in your websites folder.
  2. To the body style declaration block, add this new style rule inside the curly braces:
       background-color: lightcyan;
    
  3. To the h1, h2 and h3 style declaration blocks, add this new style rule inside the curly braces:
       color: blue;
    
  4. To the p style declaration block, add this new style rule inside the curly braces:
       color: darkslateblue;
    
  5. Save the style-1.css file.

Display your page-1.html web page in your web browser.

It should now look like the web page at the following web address:

page-1.html (after colours added).

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 first sample web page page-2.html by updating its linked style-2.css stylesheet.

Currently, this web page looks as follows:

page-2.html (before colours added).

  1. In VS Code, open the stylesheet file named style-2.css in your websites folder.
  2. To the body style declaration block, add this new style rule inside the curly braces:
       background-color: antiquewhite;
    
  3. To the h1, h2 and h3 style declaration blocks, add this new style rule inside the curly braces:
       color: brown;
    
  4. Save the style-2.css file.

Display your page-2.html web page in your web browser.

It should now look like the web page at the following web address:

page-2.html (after colours added).

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 first sample web page page-3.html by updating its linked style-3.css stylesheet.

Currently, this web page looks as follows:

page-3.html (before colours added).

  1. In VS Code, open the stylesheet file named style-3.css in your websites folder.
  2. To the body style declaration block, add this new style rule inside the curly braces:
       background-color: purple;
    
  3. To the h1 and h2 style declaration blocks, add this new style rule inside the curly braces:
       color: white;
    
  4. To the p style declaration block, add this new style rule inside the curly braces:
       color: white;
    
  5. Save the style-3.css file.

Display your page-3.html web page in your web browser.

It should now look like the web page at the following web address:

page-3.html (after colours added).

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

Updating style-4.css with colours

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

Currently, this web page looks as follows:

page-4.html (before colours added).

  1. In VS Code, open the stylesheet file named style-4.css in your websites folder.
  2. To the body style declaration block, add this new style rule inside the curly braces:
       background-color: #1f364d;
    
  3. To the h1 style declaration block, add this new style rule inside the curly braces:
       color: white;
    
  4. To the h2 style declaration block, add this new style rule inside the curly braces:
       color: deeppink;
    
  5. To the h3 style declaration block, add this new style rule inside the curly braces:
       color: lightgreen;
    
  6. To the p style declaration block, add this new style rule inside the curly braces:
       color: #81b8cd;
    
  7. Save the style-4.css file.

Display your page-4.html web page in your web browser.

It should now look like the web page at the following web address:

page-4.html (after colours added).

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

Uploading your stylesheet files to GitHub

After completing your stylesheet updates, your next step is to upload them to your account on GitHub.

  1. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. 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.css
    style-2.css
    style-3.css
    style-4.css
  3. 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:

https://username.github.io/page-1.html
https://username.github.io/page-2.html
https://username.github.io/page-3.html
https://username.github.io/page-4.html

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

Further resources

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

Color Hunt
A platform for colour inspiration with user-contributed colour combinations.

Muzli Colors
A colour palette/schemes generator.



Return to Contents.