How To Create A Color Scheme For Your Website

If you have a new brand or you’re building a website you need a color scheme. Ideally you should work with a designer or someone who is skilled in branding, but that might not always be possible. We’ve written this guide for anyone who finds themselves in that position, so read on and we’ll reveal some simple tools and techniques that will enable you to make your own epic color scheme.

Hex Codes Are Your Friend!

Before jumping in, it’s useful to know how your designer will think about colors. Colors are often referred to by their ‘hex code’. The hex code is simply a six-digit code prefixed with a ‘#’ symbol. When you tell your designer about your color scheme, you can just tell them the hex codes.

To identify colors and their hex codes, you can use one of the great free color palette tools out there. My current favourite is Coolers – https://coolors.co/app – and we’ll get in to how to use it in just a second.

My Simple Formula For Creating A Color Scheme

A simple formula for a website color scheme is black, white, grey and two colors. Your web designer will be well versed in what combinations of black, white and grey work for them, so really you just need to identify two great colors that work well together. Once you’ve got them you can add a third if you want, but it’s not always necessary.

How To Use Coolers

Visit the Coolers website and cycle through the colors by tapping your space bar. Coolers will suggest a bunch of colors that work well together already, so keep tapping until you find a color you like. Once you’ve found one you like, lock it by pressing the lock symbol and keep tapping. Repeat this until you’ve got a nice set of colors. If you find something that’s close to what you had in mind you can hit the slider icon to make adjustments.

One Crucial Thing

The crucial thing is how your chosen colors interact with each other. Specifically, you want a color that works as a background and a color that works as text on top of it. Not only must they look nice together, there must be enough contrast between them so the text is easy to read. When you identify colors on Cooler, hover over the color and select the grid symbol to make your color light or darker. That way you can increase the contrast.

Our nomadz.co website is a good example of this technique. The yellow and the blue look great on their own but also work well as both background and foreground colors. If you’re doing this without expert input, it might be that your designer has to tweak the colors a little when they start to use them on a website, but that’s okay.

Wrapping Up

If you create an account (free) Coolers allows you to save your color schemes so you can return to them later. Coolers also allows you to upload an image to work out the hex codes of its colors – pretty handy sometimes, so check that feature out if you’re inspired by some art or a photo.

There’s plenty more to say about colors so perhaps we’ll return to the subject at a later date. Thanks for reading, and let us know how your color scheme-creating efforts have gone in the comments below.

PS. We offer a color scheme creation service for just $147 when you purchase one of our websites.

About Us

Hey! We're nomadz.co, and our mission is to provide high quality ready-to-go WordPress websites especially designed for location independent professions. We take the hassle and worry out of creating a website, so you can concentrate on running your business.

Follow Me

Subscribe to our newsletter and receive a special discount

You have Successfully Subscribed!

Pin It on Pinterest