How to Make Clean Gradients

At an internal event, Ilya Polyansky spoke about gradients and color models, and I recorded and edited his talk.

While working on the redesign of the Russian Post app, we tried different ways to emphasize our uniqueness in visual communication. Including thinking about gradients. By gradients we mean any objects in which one color transitions into another. This includes shadows. It turned out that there are many questions associated with gradients (like using them in a dark theme), and we discussed some of them in this article.

Imagine any of the situations:

• The product owner came and asked to make the design more fashionable and juicier, to add gradients to the buttons and individual screens;

• The designer got his inspiration from somewhere and decided to bring something new to the product;

• A request came from a design director or artistic director, and the designer thought about gradients.

The task seems simple: open Figma, replace the solid fill with a linear gradient and choose two colors. The designer feels confident, he gets it all done quickly, but he notices: something is wrong.

Such gradients are commonly called dirty in the design community. It's hard to explain the feeling in words. If you zoom in on the image, you'll see a grey spot somewhere in the middle of the transition. Even a plantain wouldn't save this gradient.

In Figma, when constructing a transition from color A to color B, this result is almost always obtained by default. The problem is not so much in the program, but in designers who do not understand the RGB color model.

If you take any gradient where the start and end colors are complementary, there will always be a color in the middle of the shape with zero Saturation and half Brightness.

The computer works with the RGB color model, which makes it difficult to understand how color is constructed.

If you imagine it as a cube, its core will be shades of gray, so any gradients that pass through the core (say, from yellow to blue) or somewhere near it will be pretty muddy. If the gradient doesn't pass exactly through the center of the cube, there will be a low-saturation color in the middle of the transition, which in the context of the gradient will also be muddy.

When moving across the surface of the cube (for example, from yellow to green), the gradient will be clean.

If you need a clean transition from yellow to blue, you can add an intermediate point or several to create a radial transition (not necessarily in the form of a curve, as in the picture, the lines can be straight).

In the HSB color model, you can skip gray areas by increasing the Saturation and Brightness values ​​by 5-15 units. Hue should not be increased by more than 5 units, otherwise colors will appear that are weakly related to each other.

This can be done manually or with the help of services, generating radial transitions and selecting an intermediate color.

By default, any gradient given to a shape takes up about half of the shape with the same color. In the picture, 25% is taken up by almost the same red (Hue 0−15) and another 25% is blue (Hue 160−175). To fix this, you need to move the gradient sliders a little beyond the shape.

The question arises: what if the slider extension is an internal parameter of Figma, and it will be difficult to implement in the layout.

In CSS, these parameters are indicated by these yellow values. The initial color will have a position parameter of -13%, meaning the gradient will start outside the shape. The intermediate color will be exactly in the middle (50%), and the final color will be 13% outside the shape (113%).

You can also set the gradient direction – this is the first parameter in our example, equal to 270 degrees (270deg).

Thus the gradient problem is solved and the city can sleep peacefully.