This is one of the major trends of webdesign in 2019, the gradients are installed permanently. They can be found on sliders, logos, billboards and even action buttons.
However, when it comes to mixing colors, it is quickly possible to make a misstep. And all the dynamic effect will turn a little Christmas tree ...
To avoid this, carefully follow our guide of 8 mistakes not to commit for your color gradients.
1. Marry the hot and the cold: complementary colors
Avoid complex gradients and most importantly, do not marry two complementary colors.
The color circle of colors is like a rainbow. We must therefore look for:
> to marry secondary colors: yellow + green + blue / yellow + orange + red / red + purple + blue / blue + green
> but especially not opposite or complementary: yellow + purple / orange + blue / red + green.
2. Use more than three colors
Formal prohibition to use more than 3 colors!
The principle of the gradient is precisely to express all the color nuances between a tone A and a tone B. You will therefore already have a complete panel of colors. Adding extra colors would "break" the gradient effect.
We recommend the use of two tones. Three colors are possible if they are close shades. No need to combine a purple + an orange + a blue that will create an asymmetry of colors and perhaps dangerous for the retina!
3. Overload your home
Who says gradient, necessarily says white spaces.
Your gradient brings color and relief, but your site still needs to breathe and stay airy. Several elements can remain neutral:
- call-to-action on a degraded slider
- a header if you use the gradient for your logo
- components on a gradient background
Find the right mix of clean and colorful spaces to enhance the gradients.