June 6, 2020
Color Palette

How to Create a Color Palette for your Website

There are many occasions where we’ve talked about combinations of colors, and you’ve probably heard us mention the chromatic circle before. This trustly circle is a great tool for arranging and testing new combinations, so it’s well worth shouting it out again.

Color Palette

But today we are going to take another approach. Today we are not only going to talk about your color combination, but we will go into the fabulous world of tonalities.

Let’s get started, shall we?

Creating your color palette

There are some online programs that can help you to make your own color palette (and we will see them perhaps on another occasion). Today, we are going to create our color palette manually, making it totally unique to your brand and the way you design it.

It may seem complicated, but it really is not that bad. We have to think about our color palette in a similar way to touching up photos with saturation and gradients. Just follow a few simple steps, and the combination almost comes out all by itself.

1. Determine how many colors you want to use

When it comes to designing a color palette for your brand/website, usually the first thing that comes to mind is your logo. Even if it’s not the first thing, it’s a pretty important one. The most simplest logos are often the most effective, so it’s best to think of 2 or 3 colors that would go well with your brand, and use them for your logo. When we design a website, we can carry these logo colors over, and use them in the overall design. That’s why it’s such a great idea to start with the logo – because it acts as a stepping stone to future color palette designs.

Color Palette

Play around with a few different color combinations. Each logo is drastically different, so what works well for others may not work so well for you, and vice versa. It’s not a race, so don’t rush yourself.

So, now that you have your 2 or 3 colors that you’re going to carry over from your logo, it’s time to start thinking about the possibility of adding others. That thought leads us to the next point:

2. Add neutral tones

A very simple way of not making a mistake is to add neutral tones to the combination. This is probably the safest bet as most neutral colors go well with many designs.

White, black, grey, and even brown are common themes among any website, no matter the content. Not everything has to be wild and contrasting. Often times, the quiet and simple color palettes are the ones that get the best reaction from users.

Color Palette

White and black, in general, are even easy to add in later down the road. Normally, the use of white comes in almost only to create contrast and use as a background, and black is very common in small details like fonts or borders. That being said, we must not forget the strength of these colors. Grey also falls into this category, so don’t forget about it!

The brown and beige tones promote qualities of warmth and closeness, so they can be a good option when you’re trying to avoid white.

3. Shades, shadows and tints

We have already decided on the colors that will appear in our palette, but of course, now comes the fundamental step: deciding tonality. In some cases, this step is just as, if not as important as any other, but that doesn’t mean it has to be difficult.

Color Palette

It’s true, this can be tricky. Since, you know, there are infinite shades. But, it’s pretty much the same as when you look at the field in full green splendor: you can see hundreds of shades of green. These greens are clearly visible as being different. Some glimmer, some are dull, but they’re all perfectly balanced and unnoticeable. Running with that same idea, your color palette should use colors that are different, but work together as one. The shades, although there are many, shouldn’t be in your face, but subtle.

The key to achieving a good range of colors is to play with those tones. We already have the pure colors, so let’s start playing with their brightness and saturation, so we can get new tones and shades.

Maybe it’s a good idea to memorize the original color code at this point, so you can always reset to square one. Until then, play around with shading colors, and adjusting their tone and brightness.

A trick to create a nice color palette (while training the eye)

Color Palette

Everything should be considered training. When you do many combinations of colors, you will not need anything more than the chromatic circle. But sometimes, even when you have practice, you need incentives and inspiration. A great idea to get a color palette is to take an image as a starting point.

If we choose a good image, in which the colors complement each other and work, we can draw inspiration from it, and use it to coordinate the rest of our palette. From a photograph, we can take a range of colors and variations of them, depending on what colors we want to start with.

The conclusion

My advice, take it nice and slow and definitely get a few different opinions. If you’re feeling adventurous, there are quite literally an infinite amount of color combinations you can run with. However, that does not, by any stretch of the imagination, mean that they all work well with your brand.

It’s worth spending quite a bit of time to get this right. As mentioned before, what works well for others, probably won’t work as well for you. But, the end result is worth so much more when you realize the thought and time it took to get your color palette to perfection.

Leave a Reply

Your email address will not be published. Required fields are marked *