How I Designed a Colour Palette from Scratch For My Personal Website
As part of my ongoing attempt to clean up my website under the hood by building and using systems for colours, typography, class names and more, I built a colour palette from scratch.
Still in the (re)design phase, this system of colour still needs to be implemented in the final (re)build of the site.
Generating Extended Colour Palettes With Overlay Method
I use Dark Blue (#1745BA) as the primary colour on my website. So to create a colour palette, that’s what I started with. Initially, I generated all the tints and shades manually using the Overlay Method. I created Frame 1 with White (#FFFFFF) fill to act as the bottom/base layer. I created Frame 2 with a Dark Blue fill (#1745BA). I added 11 square shapes in the frame stacked next to each other. Each had a background fill of the primary colour and incremental opacities (5%, 10%, 20%…,90%, 100%).
By overlaying Frame 2 on Frame 1, it allowed me to generate tints of the primary colour. To generate shades of the primary colour, I repeated this process with a Black (#000000) fill in Frame 1 instead of White. I copied these values using the Colour Picker to create an extended palette for my primary colour.
I created similar extended palettes for other major colours by simply selecting that colour using Figma’s “Selection colours” section. In addition, I added a primitive name and HEX values for each of these colours for reference.
Narrowing Down to Usable Colours
After creating an extended palette for the primary colour, I went through a few trial-and-errors to narrow down the 20 colours down to 10 usable colours.
First, I eliminated a few alternating tints and shades, mostly from the darker side of the spectrum. I also factored in the colour styles actually being used on my website currently thanks to this elaborate exercise I did previously.
Second, I noticed that a few lighter shades appeared dull and greyish. I adjusted the hex values for some of these by eyeballing it.
Third, I used a Figma plugin “UI Colour Palette” to generate the palette for my primary colour. Impressed with the results, I discarded my ‘eyeballed’ version, with a heavy heart.
Completing the Colour System With All Other Colours
I used the same “UI Colour Palette” plugin to generate palettes for other colours as well (skyblue, orange, purple, red etc). I ran into a wall with orange and yellow. For some reason, the palette generated by the plugin resulted in extremely dull colours for both orange and yellow.
After trying a bunch of other colour generators, I found the Tailwind CSS Color Generator. I used it to generate the palette for orange and yellow, and UI Colour Palette for all the rest.
After nailing down these, I had all the colours that I would need (that I can think of so far) and then some. At this point, I organised all of them neatly, renamed all with primitive names (blue-50, teal-100, pink-200 etc), added HEX values and chilled out for a while.
Creating Variables/Tokens For The Colour Palette
After generating the entire palette to my liking, I decided to experiment with Variables in Figma (and Webflow). I added all these colour values as variables, trying to figure out a way to organise all variables as I went along.
Originally published on my blog.
