Choosing Brand Colours

I’ve recently made some changes to my University coursework page. So I thought I would document what I have, how I have done it and why I have done it that way….

First step is finding a colour palette. I don’t like using existing websites for inspiration and so I tend to avoid places like Dribbble. This is just my personal process and it’s because I want to create a brand identity, so I need to think about the brand itself. My first step in this process is creating a moodboard, usually using pinterest because I can pin lots of things chaotically and choose to refine them later on. In this instance I actually used a whimsical board.

Whimsical Board

The inspiration for this moodboard came out of my idea to change the layout of my coursework page to reflect a folder manager interface. So I started looking at the folder manager of my first computer which was a commodore 64, and then looked at similar examples across lots of different operating systems. I also have a website example in this moodboard as I found someone had done something similar with their coursework page layout.

The first thing that spoke to me was the various uses of blue. So I used an eyedropper tool to pull out some of the various blues. I did this until I had a collection of various hues, value and saturation.

A Colour Pallete

Now that I have a few colours the next thing that I want to do is consider how I am going to use them, and also that they meet the Web Content Accessibility Guidelines (WCAG). There are a few resources for checking if your colour palette meets WCAG, and it depends on my process on which one I use.

In this instance I use because I am not sure how I am going to use the colours, and the interface lets you see all of your examples together, and it also lets you adjust any colours until they comply.

Screenshot of the website

Now that I have an idea of how I might use the colours I will apply them to the local version of my coursework page. I still am not 100% sure what colours are going where so instead of applying the colours to each element of my page I have created CSS properties for different areas I am going to change the colour. This means that I can quickly change where the colour is applied just from the CSS at the top of my style sheet.

Screenshot of my local “desktop” code in VS Code Editor

I often use this method as I have a preference for building prototypes in CSS. I do also use tools such as figma, however this tends to be when I need to do something quickly or sometime I might do this if I am changing only one particular area of functionality of a website.

Once I have a combination that I like I check the colours meet WCAG. And then I upload the changes to the server using FileZiller.

Now that the website is live I will now double check that it is accessible for colour blind users. In this instance I use This website is really helpful as it shows an example of how the website will look to people with different type of colourblindness.

screenshot of

List of Tools:

*I suggest free open source tools GIMP or Krita (Photoshop Equivalent) and Inkscape (Vector or Illustrator Equivalent).

One response to “Choosing Brand Colours”

Leave a Reply

Your email address will not be published. Required fields are marked *