Updating your Website Colours

Learning Goals

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

• Update the visual appearance of a website template by the changing the colours of such web page elements as menus, buttons, footers and the main content area.

About website colours

In deciding which colours to use with your web pages, you may find this list of resources in a previous Tutorial helpful.

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

Keep in mind that website users are people. And people are complex. So the above chart will not hold true for every individual. However, this information is a good, research-based starting point for 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.

You can see some striking colour choices on the Experiments section of the Cody House website.

If you are using the Firefox Mozilla web browser, you can quickly 'grab' the hex code of any colour on a displayed web page as follows:

1. From the menubar at the top of the browser window, click Tools and then Web Developer.
2. From the sub-menu displayed, click the Eyedropper option.
3. With your mouse, hover over any part of the web page to see the relevant hex colour code.
4. Next, click on the highlighted area to copy the hex colour code. You can now paste this code into your CSS stylesheet file.

Creating your colour palette

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

Two good websites for helping you decide on a colour palette are Colour Hunt and Muzli Colours.

Colour and contrast 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 large 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.

After you have chosen a colour palette, you are now ready to apply it to the website template.

Menu background colour

With Bootstrap, all elements of the website menu, on all screen sizes, are located inside the navbar block at the top of each web page.

In this block, you can see two classes navbar-dark and bg-dark. These, working together, control the background colour of the menu.

If you prefer a navbar with a light background, replace these classes with navbar-light and bg-light as shown below.

You can edit the dark or light background colour of the navbar in the global.css stylesheet. For mobile screens, you can also change the colour of the three bars on the hamburger icon.

When you set a different colour for background-color, you need to add the word !important after the colour value. This ensures your chosen colour will override the default colour set by Bootstrap.

The !important property means that all other CSS style rules for the selected HTML element are to be ignored, and that this style rule ‘wins’.

Here are three examples of menus with a dark coloured background.

And here are three examples of menus with a light coloured background.

Another option for your menu background is to use a linear gradient. AIB Bank, for example, uses the following linear gradient for their dark coloured background.

 nav.navbar.navbar-dark.bg-dark { background-image: linear-gradient(90deg,#802b7b,#de0a85); }   

Menu text hyperlinks colours

When you change the menu background from dark to light, the colour of the hyperlinks in the menu also changes accordingly. In this way, the text of the menu links is always visible against the navbar background.

Whether you choose a dark or light background colour, you can change the text colour of the menu hyperlinks.

About the two hyperlink ‘states’

Unlike most other web page elements such as headings or text paragraphs, hyperlinks are interactive. And their visual appearance can change depending on whether and how the user interacts with them. The same is true of button elements.

You can think of hyperlinks and buttons as having two main states:

• Passive state: This is how a hyperlink looks when the user is not interacting with it.   In CSS, the link passive state is controlled by the link and visited selectors. For example:
• Interactive state: This is how a hyperlink looks when the user is interacting with it – such as hoverng over it with the mouse, or clicking/tapping on the link.   In CSS, the link interactive state is controlled by the hover and active selectors. For example:

In the sample menu below, the links are coloured black in their passive state, and change to red when the user interacts with them.

Update the colours of your menu links for both their passive and interactive states, as required.

Button colours

In the pages of the website template, all the buttons have a Bootstrap CSS class of btn-primary that gives them a blue background colour and white text.

You can see a full list of Bootstrap button CSS classes on the official website.

For example, to display a button with black text against a yellow background, replace the class of btn-primary with btn-warning in the HTML of the web page.

A button class of btn-danger will create a red button with white text.

Footer colours

The background colour of the footer is set in the global.css file as shown below.

You can edit this, and also the colours of the text, icons and hyperlinks in the footer.

Ensure there is sufficient contrast between the text and background colours.

Another option for your footer background is to use a linear gradient.

Main content background and text colours

Below the menu and hero blocks, and above the footer, is the main content area of each web page. Below are guides on updating the website template colours in this area of your web pages.

Heading and sub-heading colours

By default, Bootstrap headings and sub-headings are coloured black.

To change these, enter different colour styles at the end of the global.css stylesheet. For example:

h1, h2, h3 { color: #76448a }

Paragraph text colours

By default, paragraph text and bullet text are also coloured black.

To change these, enter a different colour value at the end of global.css. For example:

p, li { color: #222222 }

Content background colour

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. Here are some examples:

• World Diabetes Day: Dark blue headings and text (#003366) with white (#fff) background.
• Victor Kaiwong: Dark green headings and text (#483c0c) with light green (#cfe6ad) background.
• Miguel Lopez: Dark blue headings and text (#142850) with light blue (#dce6ef) background.

Websites with ‘dark themes’ are increasingly popular. Here are a few examples of light text against a dark background:

• Laura Harvey: Dark blue background (#222c3b) with light yellow (#ece4c1) or white text.
• Ahmad Usman: Almost black background (#25262a) with light green (#64f4ac) or white text.
• Indie Hackers: Dark blue background (#0e2439) with light blue (#a2b8cd) or white text.

Upload your website to GitHub

The final step is to upload your website pages and folders to GitHub.

1. Sign in to your GitHub account and, at the left of the screen, click the name of the repository that holds your web pages.
2. On the next screen, click the Add file button and then choose Upload files from the dropdown list.
3. In File/Windows Explorer on your computer, display your websites folder and then drag-and-drop the following files and sub-folders to the GitHub tab in your web browser.
4. 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 files and folders.

Your web pages are now published on GitHub. Your Home page has a web address 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

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

Return to Contents.