How to Pick a Colour Palette for Your Next Website
As a minimalist designer, I often do my layouts completely in grayscale and then consider colour options later. However, picking colours can be one of the most difficult, important and fun parts of coming up with a new design. There is a surprising amount of colour theory involved in branding. Here's a good overview of colour meanings and psychology.
Red is courageous and aggressive, blue is peaceful and trustworthy, and yellow is uplifting and illuminating. It's important to align your colour choices with the brand you're designing for. Colours convey a message at a subconscious level and contribute a great deal to your storytelling efforts.
With that said, there are some really cool (and free) tools available that I use to assist in my colour selection that I want to share with you:
1. Flat UI Color Picker
It's exactly what it sounds like. A curated selection of colour codes that work well together in the (currently en vogue) flat design style.
Sometimes all you need is a starting point or an idea. This is a great place to start or to find an inspiring colour.
The site has recently been updated so you can easily copy colour codes in :
HEX, RGB, RGBA, HSL, HSV, HWB, Ncol, and CMYK.
2. Coolors.co
This one is a must and my go-to for every new project. Coolors is still simple, but a little more feature-rich than Flat UI Color Picker.
Coolors helps you create a full colour palette in a couple different ways:
1. Hit the space bar to generate random colour combinations to your heart's content.
2. Start with your own colour(s) and lock them in and hit the space bar to generate colours that compliment colours you've chosen.
3. Generate a colour palette using an image from URL or an uploaded image.
4. Browse from the 900,000+ combinations that have already been created by other users.
Once you've found a colour palette you like, go ahead and tweak your colours by adjusting temperature, hue, saturation, brightness, etc.
I simply can't say enough about this tool and I think you'll love it too. Save your palettes, export them, share them—the feature list goes on and on. Rather than listening to me prattle on about Coolors, check it out for yourself.
3. UI Gradients
Back in the early 2000s, the tacky overuse of gradients was everything. After the internet got over that, we all moved to flat design just before the time iOS 7 was released in 2013/14 with its flat overhaul. Flat design is still widely used, but gradients are making a comeback in a big way. You can find gradients ranging from subtle to extreme in all types of modern web and interface design, and it looks damn good when done right.
Again, UI Gradients is exactly what it sounds like. Use it to choose from a curated selection of tasteful gradients and quickly copy the hex values or generate and copy the CSS necessary for web projects.
Colorzilla used to be my go-to for these functions, but I find it there's a lot more fiddling involved in getting colours that work well together and the interface is getting a little long in the tooth. UI Gradients has a simple, beautifully modern interface that aligns well with my minimalist sensibilities. Check it out.
I'm a big fan of tools that make life easier. These are go-to tools for me. If you've got a tool that you use, I want to hear about it. Drop a comment below, I love hearing from you.