How colour harmonies work
Colour harmonies are rules based on the colour wheel, the 360 degree circle of hues. Each rule picks hues at set distances from your base colour, which is why the results tend to look like they belong together.
- Analogous: neighbours on the wheel, 20 to 40 degrees apart. Calm and cohesive, good for a soft, consistent feed.
- Complementary: the opposite hue, 180 degrees away. High energy, so use one as the main colour and the other for small accents.
- Split complementary: the two hues either side of the opposite, at 150 and 210 degrees. Strong contrast with less clash.
- Triadic: three hues 120 degrees apart. Bright and playful, best when one colour leads and the others support.
- Tetradic: four hues 90 degrees apart. Rich but hard to balance, so keep two of them for details.
- Monochrome: one hue at different lightness levels. Clean, safe and easy to keep consistent.
Building a brand palette from five colours
Most brands need fewer colours than you think. A useful split is one main colour, one or two accents, a light background and a dark text colour. The 60-30-10 rule is a good start: about 60% neutral background, 30% main colour and 10% accent for buttons and highlights.
Give each colour a job and stick to it. If your accent is for links and buttons, don't also use it for headings. People learn what a colour means on your page, and consistent use makes the things you want clicked easier to spot.
HEX, RGB and HSL: which code to use
All three describe the same colour in different ways. HEX, like #2875C5, is the short form most apps, Canva and website builders ask for. RGB lists red, green and blue from 0 to 255, which some design tools and code use.
HSL is hue, saturation and lightness, and it's the easiest to adjust by hand. Change only the L value to get a lighter or darker version of the same colour, which is handy for hover states and backgrounds.
Tips for using your palette online
Test text colours before you commit. A pale palette can look lovely as swatches and still be hard to read as text, so check each text and background pair and aim for a contrast ratio of at least 4.5:1.
Use the same codes everywhere: profile picture borders, story highlight covers, thumbnails and your link-in-bio page. Exporting the palette as CSS variables or Tailwind colours means your website uses exactly the same values as your graphics.
Frequently asked questions
How do I make a colour palette from one colour?
Pick the colour, then apply a colour wheel rule. Analogous uses neighbouring hues, complementary uses the opposite hue, and triadic uses three hues 120 degrees apart. This tool does the maths and gives you five colours.
How many colours should a brand palette have?
Three to five is plenty for most creators and small brands: a main colour, one or two accents, a light background and a dark text colour.
What does locking a colour do?
A locked colour stays the same when you shuffle or change the base colour, so you can keep the ones you like and try new options for the rest.
What does Shuffle change?
Each shuffle nudges the hue, saturation and lightness of the colours you haven't locked by a little, while keeping the harmony you picked. Your base colour never changes.
Can I use the palette in Tailwind?
Yes. Export as Tailwind v4 for an @theme block with --color-palette-1 to 5, which gives you classes like bg-palette-1. For Tailwind v3 you get a colors object for tailwind.config.js.