Combination of two colours: Applying Gradients in Design

We already talked about combination of colours a lot of times; although we have usually done it to treat them as separately colours even if they appear in combination.

We can need them for a logo or a website. We have a main colour, we know its psychology and we perfectly know what we want to convey; now we only need the chromatic circle to know what colours combine to enhance their characteristics.

However, today we will go one step further and talk about the colour, but instead of taking one main colour, we will take two equally important to have a gradient.

If it is true that although we do not normally use gradient colours at Silo Creativo, we used them for March and you will see them soon in our new template for WordPress Paulie.

Gradients must be visually like a flat bottom. The eye does not have to think that there is any kind of effect; it has to be a natural step between two colours.

Do you want to learn more about gradients? 🙂

How to make a gradient

Make a gradient by hand can be certainly complex, but for both designers and typesetters there are a lot of tools. Ricardo will speak very soon about Gradients in CSS. For designers, programs like Illustrator or Corel Draw have very simple tools to make the gradient based on two main colours.

how-make-gradient-ilustrator

The difficulty of the gradient is in the choice of colours. The result will depend entirely on the colours used for its design … For that we have our chromatic circle! Depending on the effect we want to convey, we must choose a combination of complementary colours, analogous…

Remember, the choice of colours will determine if our gradient is from the 90s or from today 🙂 Pastel colours are trend now. Our gradient is present in our project, but it is not the most important of it.

Anyway if you have any doubt to choose any colour combination, here you have a tool that surely will help you: uigradients. They are preset combinations so you only must copy the colour code and voila!

Types of Gradients

Especially when we talk about gradients, we think in two colours. However, we can make a gradient with the colours we want. In fact we can link colours to infinity, if the last colour of the first gradient is the first colour of the next gradient. It will depend on for what we are using it.

gradient-linear-three-colour

As we discuss below, keep in mind for what you are using the gradient. It is a figure with great importance and it can change very quickly into a complex one; so you have to be very careful not to become the gradient the leading figure in the design dismissing the really essential elements.

Moreover, when we make a gradient, we can do it mainly in two ways, linear or radial.

For the radial gradient, as its name suggests, we start from a central colour to the outside of the circle. We’re not saying that it has to be applied to a circular figure, we can apply it on any surface, but the gradient colours will be in a radially way.

radial-gradient-design

However, if the gradient is linear we will take a rectangle and apply a straight line in the sense and inclination we want, and the gradient will run on that line.

gradient-linear-design

linear-gradient-two-colour

Gradient: yes vs not

In recent years we have heard a lot of gradients. At first they were an intrinsic option in the design of the 2000s (which was already in the 90s). In almost any logo the corresponding gradient was included. The colours used to go on grayscale or perhaps metallic colours and we wanted to attract attention with gradients including an effect that made a design unique.

Thus, many may think that the gradients are not compatible with flat design. However (and thankfully,) the trend has been changing until our days. One of the first things to consider is that while before we printed gradients on any independent surface, at present, the gradient is only applied to large surfaces.

flat-design-gradient

Visually it is not the same to include a gradient on a logo, which normally have a very little surface, that on the background where the logo is printed.

logo-paulie-gradient

background-gradient-colour

I consider gradients a good tool to print on a background: a large area where post a message with creative fonts, or as header of a blog: a place where the printed gradients catch your eye but not all the visual attention. The gradient should be seen as a background in which we can see the transition from one colour to another.

Anyway, as I said elsewhere in this article, the success of your gradient results in the choice of colours. So, gradient… yes, but be careful! 😉

Comments (2)

  1. Gradients are one of my favourite things to use 🙂 You just have to make sure you don’t use them too much or they can start to get pretty boring!

Leave a Reply

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