How to Create a Cohesive Colour Palette

Creating colour palettes is probably one of the most exciting parts of my job. Who doesn’t love mixing and matching beautiful shades and tones to tell your story? 

But there is a method to the madness. Here is my step by step process in creating a cohesive colour palette for your brand: 

What does a cohesive colour palette mean?

A cohesive colour palette is a group of colours that feels intentional and connected. The colours do not need to match or come from the same colour family. They simply need enough in common that they create a consistent visual mood when used together.

That connection may come from a shared temperature, similar undertones or a balanced level of saturation. Cohesion also comes from giving each colour a clear job and using it consistently.

For example, your darkest shade might always be used for body text. Your lightest colour might become the main background. Your accent colour might appear only on buttons, links and small details. When those roles stay consistent across your website and marketing, your brand becomes easier to recognise.

For most small business websites, four to six colours are plenty. You need enough variety to create hierarchy without giving yourself so many options that every page starts to look different.

1. Make a Moodboard

Now it is time for the fun part. Create a Pinterest board and collect images that catch your attention or evoke the feeling you want your brand to have.

The images do not need to relate directly to your business. Your inspiration might include a cosy sweater, a dramatic landscape, beautiful fragrance packaging, a styled table or an interior you would happily move into tomorrow.

Try not to analyse every pin as you add it. Once you have around 15 to 25 images, step back and look for patterns.

Ask yourself:

• Which colours appear repeatedly?
• Does the board feel warm or cool?
• Are the colours muted, earthy, bright or high contrast?
• Is the overall mood soft and romantic, bold and playful or clean and minimal?

Your answers should give you a clear starting direction for your palette. If the board feels scattered, edit it before choosing colours. Removing a few outliers is often all it takes to reveal the common thread.

2. Colour Psychology

Colour can influence how a brand is perceived, so it is worth considering the associations your audience may bring to each shade. Blue can feel calm or trustworthy. Red can feel energetic or urgent. Green may suggest nature, growth or balance.

These meanings are not universal though. Context, culture, shade and the other colours around it all change how a colour feels. A pale powder blue creates a very different mood from a dark inky navy.

Use colour psychology to sense check your direction rather than allowing a generic chart to make the decision for you. Canva’s colour meanings guide is a helpful place to explore common associations, but your brand strategy and ideal client should have the final say.

3. Four Elements of Colour Hierarchy 

Build the four parts of your colour hierarchy

Once you have an anchor colour, build a practical colour hierarchy around it. At minimum, your brand website needs these four roles.

Colour role	What it does	Where to use it
Light	Creates space and gives darker elements room to breathe	Main backgrounds, cards and text over dark images
Dark	Adds contrast and makes important content easy to read	Body text, headings, footer backgrounds and overlays
Mid range	Connects the light and dark ends of the palette	Alternate sections, borders, graphics and supporting details
Accent	Draws attention to priority actions or details	Buttons, links, icons and small highlights

You can have more than one mid range colour, but each additional shade should earn its place. If two colours would always be used in the same way, you probably only need one of them.

Your accent colour also does not need to be neon or dramatically bright. Its impact is relative to the rest of your palette. In a soft neutral brand, a muted clay or deeper green can create enough contrast to stand out.

4. Look for a common thread between your colours

When a palette feels slightly off, the problem is often not the individual hues. It is the relationship between them.

Compare these three qualities:

• Temperature: Do the colours lean warm, cool or intentionally balance both?
• Undertone: Do your neutrals have pink, yellow, green or blue undertones that work with your main colours?
• Saturation: Is one shade extremely bright while everything else is soft and muted?

Your colours do not need to be identical in any of these areas. A palette often needs contrast to stay interesting. The goal is to make that contrast feel deliberate.

If a cool grey looks harsh beside a warm cream and earthy terracotta, try a warmer charcoal or taupe instead. A small shift in undertone can be the difference between a collection of nice colours and a truly cohesive colour scheme.

5. Test Your Palette

So you have a beautiful row of colour swatches. Now comes the most important question. Do they actually work together?

One of the biggest mistakes I made early in my design career was judging a palette before testing it within real brand elements. A colour can look perfect as a small square and feel completely different when it fills an entire website section.

Mock up at least one real page and test your colours as:

• a full width background
• body text and headings
• a button and its hover state
• a photo overlay
• a card or testimonial section
• links, icons and smaller details

Check the page on desktop and mobile. Pay attention to how the palette sits beside your photography too. This is especially important for photographers because the colours in your images already contribute so much to the overall look of the site.

If you are working with a template, add your palette to one complete page before updating the whole site. Showit makes it easy to change colours, fonts and other elements without code, but testing a single page first will help you make confident decisions. You can see how customizable Showit templates really are before you begin.

8. Check colour contrast and readability

A cohesive colour palette also needs to be usable. A beautiful combination is not doing its job if visitors cannot comfortably read your text or find your buttons.

Test every foreground and background combination you plan to use. As a baseline, WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Also avoid using colour alone to communicate meaning. Links, errors and selected states should have another visible cue where needed.

This step may change how you use a colour without removing it from the palette. A soft beige might work beautifully as a background but not as text. A light accent might suit decorative details but need a darker companion for buttons.

9. Tweak your colours and save the final hex codes

After testing, you may find that two shades are too similar or one colour creates visual tension. This is where you fine tune the palette before finalising it.

Sometimes you only need to make a colour slightly lighter, darker, warmer or softer. Other times, it is worth returning to your moodboard and pulling out a new option.

One of my favourite tools for this is Coolors. Its shade picker makes it easy to test variations until you land on the exact colour you need.

Once the palette works, save the hex code for every shade and document its role. A simple brand guide might say:

• warm ivory for main backgrounds
• espresso for headings and body text
• sand for alternate sections
• olive for supporting details
• terracotta for buttons and links

This is what turns a cohesive palette into a consistent colour system. You will no longer need to guess which beige or green to use every time you create a page, social graphic or client guide.

Common colour palette mistakes to avoid

1. Choosing every colour at the same intensity

If every shade is trying to be the star, the design will feel busy. Balance stronger colours with quieter neutrals and give one accent priority.

2. Picking colours without assigning roles

A palette is much easier to use when you know which colour belongs on backgrounds, text and calls to action. Decide those jobs before you roll the colours across your website.

3. Using colours that are too similar

Two pale neutrals may look different in your colour picker but almost identical on screen. If visitors cannot see the hierarchy, the second colour is not adding much.

4. Forgetting about your photography

Your website palette does not exist in isolation. Test it beside the types of images you publish most often so the colours support your work rather than competing with it.

5. Skipping accessibility checks

Never assume that a dark colour and a light colour have enough contrast. Test the exact hex codes in the combinations you plan to use.

A quick cohesive colour palette checklist

Before you finalise your palette, check that:

• every colour supports your three brand words
• the palette includes a useful light and dark shade
• each mid range and accent colour has a clear purpose
• undertones, temperature and saturation feel intentional
• text and buttons meet contrast requirements
• the colours work beside your photography
• the palette has been tested on desktop and mobile
• every final hex code and usage rule is documented

If you can tick each one, your palette is ready to use.

Frequently asked questions about cohesive colour palettes

How do you make a cohesive colour palette?

Start with three words that describe your brand and create a moodboard around them. Choose one anchor colour, then add light, dark, mid range and accent shades. Look for a common thread in temperature, undertone or saturation. Finally, test the colours on real website sections and adjust them until the palette feels balanced and readable.

What is a cohesive colour scheme?

A cohesive colour scheme is a set of colours that works together to create one intentional visual mood. The colours may match through their undertones, temperature or saturation, but consistent usage is just as important. Assigning each shade a clear role helps the scheme stay cohesive across your website and marketing.

What is the difference between a cohesive and a consistent colour palette?

Cohesive describes how well the colours relate to one another. Consistent describes how reliably you use them. A strong brand needs both. Your colours should feel connected and the same shades should perform the same jobs wherever your brand appears.

How do I make a consistent colour palette?

Save the exact hex code for every colour, assign each shade a specific role and repeat those roles across your website and marketing. For example, use the same dark shade for body text and the same accent for primary buttons. A simple brand guide will stop near matches and one off colour choices from creeping in over time.

How many colours should a brand palette have?

Four to six colours are enough for most small business brands. Start with a light colour, a dark colour, one or two mid range shades and an accent. You can add another colour when it has a distinct purpose, but more options do not automatically make a palette more useful.

How do I use my brand colours in a Showit website template?

Begin by adding the palette to one page and assigning each shade a specific role. Use the light colour for your main background, the dark colour for readable text, mid range colours for alternate sections and your accent for buttons or important links. Once the page feels balanced, repeat the same system throughout the template.

Ready to bring your palette to life?

The right colour palette can completely transform a website template and make it feel like it was designed for your brand from the beginning.

If you want a flexible, professionally designed foundation for your photography website, browse the Vanilla + Oak Showit website templates. You can update the colours, fonts, photos and layout to create a website that feels completely your own, without touching a line of code.