When choosing a colour scheme, it’s important not just to pick colours that you find attractive, but also to think about what those colours portray – see 99designs’ article Color meanings and the art of using color symbolism, Smashing Magazine’s article “Color Theory for Designers, Part 1: The Meaning of Color” and Lifewire’s article “What Meanings Are Associated With the Various Colors“.
Using a Colour Wheel
If you have no idea where to start, then you could turn to the color-hex website. This displays some recent favourite colours chosen by their users, and you can also look at popular colours over a longer time period, random colours, or a long list of colours and their names.
For this exercise, I’m supposing that I’ve looked at the information on colour meanings at the top of this page, thought about my target audience and decided that I would like my main colour to be purple.
Now I need to find a purple colour.
I’ve opened the random colours page at color-hex and hit the “Generate Random Colors” button until I’ve found a colour that appeals to me. I can check that this will work for text on a white background using the Learn UI Design Accessible Color Generator.
Clicking on the colour on color-hex takes me to a page that gives me a lot of information, including:
- shades and tints
- triadic, analogous, monochromatic and complementary colours
- related colours (in case I want to try something similar but a bit different)
Canva also has a good online colour wheel, an explanation of various types of colour scheme, and a tool for creating a scheme at www.canva.com/colors/color-wheel/. When I input my purple colour, it comes up with the same colour schemes as color-hex but gives me an easy way to tweak the colours, using either sliders or the dots on the wheel.
Moving the luminance sliders gives me lighter and darker variations of each colour to use in my design.
Using Photographs
Another approach is to find a photograph, or collection of photographs, that invoke the feeling you are trying to convey. Here I’ve searched the free stock image site Pixabay using the keyword “beach” and have scrolled through the results and chosen photos that seemed to have a calm mood.
I’ve used the method that I describe in more detail in my article “Creating a Mood Board with Canva & Coolors” to put three of the calm beach photos in a grid using Canva. Then I’ve used the Coolors image picker tool to come up with a colour palette simply by picking colours that felt “right” to me.
I’ve used the Color Hex website to come up with some lighter and darker variations of some of these colours and used Milanote to make a note of these and give myself a palette with lots of choices. Milanote is great for this purpose; if you type a colour’s hex code into a note then it automatically becomes a colour swatch.
Note that if you want to get inspiration from just a single photograph then you can either upload your own or use Coolors to search directly for one, as it is linked to the free Unsplash microstock site.
To check that colour combinations have enough contrast, from an accessiblity standpoint, you can use the Learn UI Design Accessible Color Generator, which I mentioned earlier. If the colours you have chosen don’t meet the guidelines, then this online tool will suggest an alternative.
More Ideas
For more inspiration, see Canva’s articles “100 Brilliant Color Combinations” and “The best website color schemes — and how to choose your own“, the Reasonable Company’s colour sets, and the beautiful colour palettes at Design Seeds.
