How to Create a Colour Palette for my Web

We have talked about colour combinations many times. In most of them we use our friend the colour wheel, because even having more control over the colours, it never hurts to check combinations on it. It is the first step to make a good combination.

But today we will go a step further. Not only we are going to talk about combinations of colours, but we will enter into the fabulous world of hues. I do not know if you remember that when we talk about combinations, we clarify that after choosing a combination you have to decide the tone that best suit with you or your brand; that is, if your combination is with red colour, the red will not be the same as Coca Cola, so the shade of red will make you unique and be different from the competition.

Before we begin, let’s make a little journey to reach the chosen combination of colours.

My combination of range of colours

As we were coming forward, before starting you have to define the colour combination that best fits your brand or your project. For this, the bottom line is to be clear about the psychology of colours and choose the one that best fit what you want to convey.

Yes, we repeat that again, but if we choose a colour whose psychology helps us, we will have half the job done. Once we know our colour choice and what it represents, we must decide which combination is the best going with what we seek.

Although it will depend on what element we are designing, if we need a logo, the normal is a combination of two colours, but it is always good to have other colours just in case, if at some point of the project we need to introduce more colours.

You must also keep in mind why are you doing the range and what kind of contrasts are you looking for: if you are drawing a line on the beach, think of a sea and land combination with some details to highlight, and if instead you are looking for a flowery landscape, it can be a good choice to take a colour and get its range.

In this case, to work with a combination in this article, we are going from a triadic combination with pink colour (that we have not combined long ago,) because we need contrast and harmony and triadic combinations are the best for that. We need strength, as pink is slack, but without losing the serenity that this represents.

Thus we will go from pink and combine it with green and blue. The combination of these last two colours is one with the most positive qualities, and when combined with pink, it is a harmonic range.

range-colour-circle-cromatic

NOTE: In each of the colours of the ranges we have the numbering web color (#), which can easily be introduced into editing programs as Illustrator or Photoshop or directly into web code.

Creating our colour palette

There are some online programs that can help us make our own colour palette (and we will see them another time,) but of course, in the end there is a certain preset on that, so today we will create our colour palette manually, thereby achieving that is totally unique.

It may seem complicated, but it is not. When we have an image that we want to retouch we play with the brightness and saturation; we have to think in the same way with colours. So just follow a few simple steps, and the combination will be out easily!

1. Define how many colours do you want to use

As we were saying before, when we talk about logo it is normal to use a combination of two colours, three at the most, but when we are doing the image of a brand, we always should include in the palette at least five colours, as we will find very different media that will need us to include more colours than at first thought were necessary. When designing a website, not only we can stay with the colours of the logo, but we will have to see the different elements of it and define other colours in the palette that we can use for those elements.

Besides, there are other cases, as typographic prints or downloadable calendars in which we like to play with 4 or 5 colours, so that everything is understood in the same range.

Either way, if you want to make a range of ten colours … go ahead! I will not stop you, but what I can say is that it is going to be obviously much more complicated and you will need them very few times.

So we start from three colours and we will add, because we want to, at least two more colours… Let’s see how!

2. Add neutrals

Thus, a simple way to not be wrong is to add neutral tones to the combination. If we want to create a palette with contrast they cannot all be shiny or neutral, they have to be differences between them.

Thus, it is very interesting to add, what we commonly call as neutrals: grey, white, black or brown. They are almost standard tones that appear in any project. In this way they can serve as backgrounds or in places where we do not want to charge more importance than they need. They also have the property of being able to apply warmth or coolness, which sometimes we need to make the perfect combination.

range-colour-palette

Black and white: they are generally much easier to add, usually the use of white is perfect to create contrast and use as a background, and black is very common in small details even for fonts. But we must not forget the strength of this colour so sometimes it can be helpful to include a grey hue that reduces that force.

Brown and beige tones print qualities of warmth and closeness, so that may be a good option when you do not want to use the white.

range-color-triadic

3. Tones, shades and tints

We have determined the colours that will appear in our range, but of course, now the crucial step comes: we have to decide the tone. It is the most important step, but it does not have to be the most difficult.

It is true that it may scare you because there are plenty of shades. It is the same as when you look into the field in the green splendor: you can see hundreds of shades of green. You must not know them all but know that there are, and among them choose the one you need. The important thing is not to let the eye sees only the pure colours, but know the difference between a hue of another (which does not mean know them all.)

Thus, the key to a good range of colours is to play with these tones. We have pure colours well, if we want to create contrast, why not to saturate the two secondary colours and print brightness to the principal?

We can practice with certain colours until we reach the one that best fits what we want.

palette-colour-pink

range-colour-combination

range-colour-combination

circle-cromatic-pink

range-colours-dark

range-colour-green

One trick to create a beautiful palette of colours (while we are training the eye)

Once you will make many colour combinations you will not need anything more than the colour wheel, but sometimes, even when you have practiced, incentive and inspiration are needed. A great idea to get a colour palette is taken as starting an image.

If we choose a good picture in which colours are complementary and work, we only have to make a good choice of colours in it. We can get a range of colours and variations of it from a picture, depending on what colours we want to use.

My advice: take the main colour and its complementary and go from there deciding the different combinations with the colour wheel. If the image works for you, it will also work in your range.

range-colour-image

create-palette-colour

 

As you see, everything is in the practice and above all you must not stay in the first election as the colours are very versatile, so … let’s play!

Leave a Reply

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