Designing gradients is one of the coolest topics nowadays. Making a gradient is actually creating a good gradient that distinguishes your brand or UI from the others. Using gradients are easier than flat colors. Flat colors are not natural and our eyes are familiar with gradients around us. Smooth shading covers almost all objects, caused by the sunlight and the reflections between objects. Making a decent gradient is the key to discover new potentials in interface designs.
I had told about why using gradients in your project is important here: Design with Gradients. But I didn’t tell the math behind it. In this post, I tell about it over some examples.
Soft linear gradients
Providing sources is good, but they need to be examined right. So let’s dive into the depth of how to make linear gradients for your UI’s, with examples. If you want to prepare soft transitive ones, you need to use close colors. Let’s look at the example below:
In this gradient, hex values are nearly the same, only the middle part of the hex value is different than the others. To clarify, hex values are actually a representation of amounts of red, green and blue lights that a color consists of. For this example, EF stands for R239, D0 stands for G208, and 9C stands for B156 as RGB values. In above gradient, I used slightly different shade of green than the first one by changing color values of green from G208 to G163. Because the numbers are close and total light value is between ~600 and 550, our gradient has a soft look. If you change the color elements into close ones, you will get the soft looking gradients.
We can change one or two from the RGB colors, and make them little different to create soft looking gradients. If you get wild and change the amount of the numbers too much, you will examine sharper color changes. See the example below;
In the first one, I change the amount of both green and blue lights, but with small percentages. So this gradient can actually be considered as a ‘flat color’ at first glance, but it has more natural look. Around us, we see colors with some light variances on them.
In the second one, I change the amount of green dramatically, and I get a sweet gradient with a smooth distribution. (It’s time to give names! Let’s call first one Everlasting Desert Sand and the second Sweet Fruit!)
This is the safe path to generate soft gradients, but be careful here, if your color has low light values like this (such as R239 G50 B50) or this (R239 G50 G150) decreasing the highest light value/s will add more black and change the look dramatically.
Let’s try a different one;
I made a gradient at the first box below, with increasing the red value dramatically. This way, I add more light to one of the channels to make gradient a little brighter than the first color while selecting the red one.
Another thing that needs to be considered is the amount of light. If you want to prepare soft looking gradients like above, you should take the amount of the light and the colors into account at the same time. From my experiences, I can say that the total numbers of red, green and blue should be at least 400. Because lower light means higher amount of black, and this leads us to dirty looks on the gradients. When you use too much black, there is a high probability that you will end up with a dirty look.
Between two gradients
Providing a gradient color scheme is another thing. For instance, if you need to provide different hero banners for different pages and need different gradients, you can select close gradients by versioning between colors.
Increasing or decreasing RGB values by small percentages and versioning the colors can help produce new gradients.
It’s not easy to create a mathematical formula to create soft looking gradients. The more you try, the more you will find the best ones. Your brand color, imagery you use, the impression you want to give should all be considered.
Most importantly, do not forget to continuously observe objects around you. Because it is designer’s job to notice that many elements around us are in soft gradients although they seem as if they are in flat colors. We are reducing the colors around us to flat colors, to understand and to be understood by others in our everyday lives. We reduce the meanings into understandable ones. Like yellow couch, green carpet, black screen. But without noticing, our brain has the real information about these colors, that they do not only consist of one color but plenty of soft shades. If we use the colors with their correct shades in user interfaces, our brains still grasp the reduced color while considering element as real.