Colors and difference between them in LESS / Sass

How to understand the difference between the two colors? How to make 360 ​​out of one color scheme? How to turn the colors of the circuit that we have into variables that depend on the same base color and use this in a CSS preprocessor? We will learn more about this later: why do we need this, what kind of jusecas are possible with colors and schemes in LESS (Sass), and what services will help us in turning two colors into one and functions above the first. The article will be interesting to those who use CSS preprocessors, variables in them, as well as functions / impurities.

Motivation

From ready-made colors to create a dynamic scheme based on the base color

Let's start with the rationale - why do we need this? So, we are in the role of layout designer and the designer threw us a set of colors for the site / system / element / block, which we define as a color scheme. On the layout we see that the colors are strikingly interdependent from each other. Let's say that the designer threw us 5 colors and most likely in the HEX format: # FF0000, # E82C0C, # FF530D, # E80C7A, # FF0DFF. What do these letters and numbers tell us? Nothing - it’s more understandable to the monitor than to man.

What we can do?

The easiest option is to create 5 variables in LESS ( for simplicity, we will use it as one of the representatives of CSS preprocessors ), set these values ​​for them and forget:

@clr-base:   #FF0000;
@clr-header: #E82C0C;
@clr-button: #FF530D;
@clr-link:   #E80C7A;
@clr-hover:  #FF0DFF;

The second option is to represent each color in HSL (hue, saturation, lightness), which are more human-oriented values ​​and leave them as variable values. In Chrome, this can be done using the “Color format” / “HSL” setting.

@clr-base:   hsl(  0, 100%, 50%);
@clr-header: hsl(  9,  90%, 48%);
@clr-button: hsl( 17, 100%, 53%);
@clr-link:   hsl(330,  90%, 48%);
@clr-hover:  hsl(300, 100%, 53%);

It already looks good, but can it be done better? For example, leave the value only in the base color, and calculate the others through color functions!

@clr-base:   hsl(  0, 100%, 50%);
@clr-header: spin(desaturate(darken(@clr-base, 2%), 10%), 8);
@clr-button: spin(lighten(@clr-base, 3%), 17);
@clr-link:   spin(desaturate(darken(@clr-base, 2%), 10%), -30);
@clr-hover:  spin(lighten(@clr-base, 3%), -60);

What does this give us? Firstly, there is only one variable - the base color, when changed, the entire color scheme of the site will change. Secondly, greater visibility in the interdependence of colors, which are expressed as humanly as possible. For example, we immediately understand that the button color is 17 degrees rotated on the color wheel and slightly lightened the base color.

Myself Color Scheme Designer and Adobe Kuler

Another use case is to create a basic color scheme independently or using services: similar, one-color (fixed tone), triad, complementary, composite, one-color (fixed tone and saturation). Present it as a set of variables that depend on the base color. And then, without the need to use the service, to make it warmer / colder, lighter / darker, richer / vice versa. And all this, changing only one variable.

Where can it really come in handy? For example, we make websites flow and use some kind of design template. In it we can introduce a similar scheme and already the next customer roll out the prototype, using its base color, in literally seconds.

This will give us the opportunity to create a scheme once, and from it “energize”, relatively speaking, 360 schemes.

See clearly what is the difference between colors

Even if we don’t need to complicate things this way, but we don’t want to understand what the difference is between the two colors, for example, the beginning of the gradient and the end, then we will be helped by the knowledge that colors can be represented as HSL. But why do calculations in the mind if people invented computers?

How to know the difference?

As mentioned above, using the manual therapy method, color translation from HEX RGB to HSL and calculating the difference between the components. This started to bore me right away and, after playing with node.js, I wrote a small utility / service that helps to do this automatically: garex.github.io/nodejs-colors-to-less-operations

In the first column we enter the base color / colors, and in the second - dependent. By pressing the “Go” button, we have a set of color LESS functions that are needed to turn one color into another. For Sass, the names of the functions are identical, except for the function of turning the color wheel: in LESS we have spin, and in Sass we have a more explicit name adjust-hue.

Conclusion

In the end, we learned how to animate color schemes in CSS preprocessors and possible ways / services / utilities for this. In the comments I suggest sharing who organizes the variables and the dependencies between them in their LESS / SASS / YourCSSHere projects. I hope that the article did not work out in the style of "How to draw an owl?"

Issues and pull requests are welcome. Thank you for attention.