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 and Smashing Magazine’s Color Theory for Designers.
Some Useful Websites
Color Hex
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 supposed that I’d 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.
I opened the random colours page at color-hex and hit the “Generate Random Colors” button until I found a colour that appealed to me.
Clicking on the colour on color-hex took me to a page that gave me a lot of information, including:
- shades and tints
- triadic, analogous, monochromatic and complementary colours
- related colours (in case I wanted to try something similar but a bit different)
Coolors
Coolors is another great website that can be used to generate colour palettes.
Pressing the space bar generates different palettes, and individual colours in a palette can be locked with the padlock icon.
A useful trick to find lighter and darker variations of a chosen colour is to copy and paste its hex code into each section of the palette, and then use the “view shades” icon (the one that looks like a grid).
There’s a contrast check icon to make sure that the colours can be used with either white or black text.
I also like to check that the light variations of the colour have enough contrast to be used with the three darker shades, using the Learn UI Design Accessible Color Generator.
0 to 255
An alternative website for picking colours and/or finding lighter and darker variations is https://0to255.com/
Canva
Canva 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 came up with the same colour schemes as color-hex but gave me an easy way to tweak the colours, using either sliders or the dots on the wheel.
Moving the luminance sliders gave 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 searched the free stock image site Pixabay using the keyword “beach”, scrolled through the results and chose photos that seemed to have a calm mood.
I 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 used the Coolors image picker tool to come up with a colour palette simply by picking colours that felt “right” to me.
I 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.
Accessibility
To check that colour combinations have enough contrast, from an accessiblity standpoint, you can use the Learn UI Design Accessible Color Generator. If the colours you have chosen don’t meet the guidelines, then this online tool will suggest an alternative.
Adding a Colour Palette to GeneratePress
The GeneratePress theme has global colours built into its customiser. The documentation explains how you can add your own colours to this palette.
Taylor Drayson has developed a useful tool for generating a file that can be imported into GeneratePress Premium to speed up the process of inputting your colours. His video shows how Coolors could be used to produce the CSS variables.
Instead of using the code from Coolors, I tried setting up a text file with my usual colour naming conventions, so that I could edit this and then paste it into Taylor’s generator. I found that this method worked well.
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.
