Understanding Colour Usage On My Personal Website Before Cleaning Up

Not much planning went into building my personal website 3 years ago. I lacked the know-how to build solid foundations at the time. Over time, I introduced a lot of new and random colours to build new layouts/functions in the site. There were unnecessary variations of the same colours. Some used HEX values and some RGB with opacities. It was a mess.

Recently, I realised that I need to start cleaning up some of this mess. And to bring some logic, structure and order to the chaos – starting with colours. Fonts, class names and other forms of clean up will follow.

This article is about that first step – understanding the existing colour usage. I audited colours used on each page, their purpose, and narrowed them down so I can recreate a colour palette.

‍

Understanding Colour Usage by Listing Down All Colours Used

First, I needed to understand all the colours and variations I was using on my website, purpose and the page (eg. border, background, text etc). I checked all pages on the website, took note of all major elements and their actual colour values from Webflow. I did this exercise with makeshift tables in Figma itself to avoid introducing a new app.

This tedious and manual exercise allowed me to visualise the hot mess I had created over time. For instance, I was using HEX colour values for some elements and RGB with opacity in some places. I also found out I was using 2-3 different colour values for primary text across the site. And more for secondary texts.

‍

Analysing, Organising and Narrowing Down to Unique Colours

The next step was to bring order to this chaos I discovered. First I grouped similar colour values together to get a sense of the number of styles I was using on the site. The groups were – primary, shades of primary, blacks and greys, whites and accents (blue, orange, purple, green, red).

This allowed to me to understand the most used colours, no. of variations of each and the least used colours which can be merged or eliminated later.

Further, I extracted a list of unique colours out of these in a separate list. This would become a key reference to be able to create a new colour palette to replace the existing mess.

‍

Categories and Colours

After going through the narrowed down list, I realised most of the colour usage could be categorised into one of text, background, icon and separators.

Again, I organised all colours into one of these categories to create an exhaustive list of colours I MUST have as tokens/variables. This would make sure all current use-cases are covered.

‍

Final Words and Next Steps

This entire process took a bit of hits and misses, and was longer than I expected. I didn’t find any suitable way to automate the tediousness. Being technically challenged didn’t help either.

I plan to create a new colour palette to cover all existing usage and clean up the existing mess. I also plan to learn and utilise the variables functionalities in Figma and Webflow. This would help me streamline adding, editing, applying colour values to elements.