Choosing site or page colours - Dominant Colour

If you get stuck trying to choose colours for a site or page, you can use an image as a main image, and derive the dominant colour from that image. Then using the dominant colour as a BG colour, derive the complimentary colours for Accent, Secondary, etc…

What’s the dominant colour of an image?

If you are familiar with Spotify, then, when you use the Album Art feature, the background colour used is the dominant colour of the image used for the Album Art. There are many systems that claim to work out the dominant colour, but the Spotify system is very good.

There is an free iOS App called Dominant Colors that works really well and returns 1 dominant colour.

These 2 return 4 colours but the first colour can be considered the dominant colour.

https://www.canva.com/colors/color-palette-generator/

Then using a palette generator such as

You can generate complimentry colours.

8 Likes

Nice! (I‘d never have thought of that). For Affinity users it’s also possible to set the dropper tool so that it has a radius of 256px x 256px, and the resulting color will be an average of all the samples in that radius.

2 Likes

Bear in mind that the dominant colour and average colour are very different. The name dominant is a bit misleading.

Where useful, thank you. I was using some other websites, but these two are way better.

Here are a few examples showing how Spotify use Dominant colour to generate the background for Album Art. They actually generate a vertical gradient from the colour.

This is specifically for @habitualshaker , but it relates to this thread. Currently Palette is using the accent color for its buttons, but the dominant color is generally the background color (as these Spotify examples show). So it would be nice to have the option to change the button color assignation in a future version.

1 Like

Noted. I will look add adding in a setting for that as having that control would be useful.

I went for accent as figured it would be the colour that would most likely change between different themes (as most web pages will stick with a white background).

In the meantime, increasing the border width in the Picker style control might be helpful as the border picks up the page background colour. Or there is also the option to build your own palette picker buttons.

3 Likes