Colour Palette Generator

A starting point for your colours

I sometimes like a colour on its own but get stuck when choosing what should go beside it. That can happen when planning a photoshoot or putting together a website. Seeing a few combinations makes the decision easier.

Use this tool to explore a starting colour, compare palettes and try different roles for the colours. You can keep a colour you like while changing the others, then save the result for later.

A palette is a set of options. You do not need to use every colour, or use them in equal amounts.

Create your palette

Start with a colour you like or already need to use. Choose a combination below, then edit or lock individual colours. The website preview checks text against its background; the photoshoot preview helps you compare outfits.

Give each colour a job

I find a palette more useful when I can see where each colour belongs. Choose one colour to lead, a quieter colour for larger supporting areas and an accent for smaller details.

Similar colours

Neighbouring colours can give you a gentle starting point. Differences in lightness help separate elements without needing a completely different colour family.

Contrasting colours

A colour from the opposite side of the wheel can provide an accent. You may only need a little of it. Two strong colours covering equal areas can compete for attention.

Muted or vivid

The suggestions vary colour relationships and include lighter or darker supporting shades. They are starting points, not a guarantee that every pairing will suit your project. Adjust the colours and check the preview before settling on one.

Are five colours too many?

Five colours give you more options, but they do not need five equal shares of the design. A website might use a light background, a darker card, a main colour and a small accent, with a separate readable text colour.

For a single outfit, three colours may be enough. For a family, five can give people different choices within the same palette. Related shades and neutrals can make the combination easier to use.

If a result feels busy, try using fewer colours before replacing the whole palette.

Using a palette on a website

A row of attractive swatches does not tell you whether people can read a page. Try the colours on backgrounds, cards, buttons and text. Pay particular attention to small text and links.

The checker uses WCAG contrast thresholds: at least 4.5:1 for normal text and 3:1 for qualifying large text. It compares the exact ratio before displaying a rounded result. You can read the W3C explanation of minimum text contrast for the details.

The preview chooses black or white text for the background, card and button. Accent links retain your chosen colour so you can see when a combination needs adjustment. Underlining also helps distinguish a link without relying on colour alone.

I would use the exported CSS as a starting point, then test it on the actual website. A photograph behind text or a different button state can change what works.

Using a palette for a photoshoot

Try assigning colours to two outfits and the background. Similar colours may blend together, while a bigger difference can make the clothing stand out. Neither result is automatically better; it depends on the photograph you want.

Screen colours cannot reproduce fabric shine, reflected light or every shade you will find in a shop. Use the palette as a reference, then compare the actual clothes together.

My guide to choosing colours for a photoshoot covers outfit and location decisions. For the associations behind colours, see colour psychology in photography.