The colors and the difference between them in LESS / Sass

How to understand what the difference between the two colors? How to make 360 ​​from one color scheme? How to turn the color schemes we have into variables that depend on a single base color and use this in the CSS preprocessor? We will find out more about this: why we need it, what kind of yukaseys are possible with colors and schemes in LESS (Sass), and also 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 it? So, we are in the role of a typesetter and the designer has thrown 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 amazingly interdependent on 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 is more understandable to the monitor than to the person.

What we can do?
')
The easiest option is to create in LESS ( further, to simplify, we will use it, as one of the representatives of the CSS preprocessor ) 5 variables, setting these values ​​to 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 is 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%); 

Already looks good, but you can do better? For example, leave the value only for the base color, and calculate the rest through the 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? First of all, only one variable is the base color, which, if changed, will change the entire color scheme of the site. Secondly, greater visibility in the interdependencies of colors, which are expressed as humanly as possible. For example, we immediately understand that the color of the button is 17 degrees rotated on the color wheel and a slightly lightened base color.

Yourself Color Scheme Designer and Adobe Kuler

Another use is to create a basic color scheme on its own or with the help of services: similar, monochrome (fixed tone), triadic, complementary, composite, monochrome (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 this really come in handy? For example, we streamline websites and use some kind of design pattern. In it, we can embed a similar scheme and roll out a prototype to another customer, using its base color, in literally seconds.

This will give us the opportunity to create a scheme one time, and from it “accumulate”, figuratively speaking, 360 schemes.

Clearly see what is the difference between colors

Even if we don’t need to complicate things like that, but we don’t want to understand what the difference between the two colors is, for example, the beginning of the gradient and the end, then the knowledge that colors can be represented as HSL will help us. But why make mental calculations if people invented computers?

How to find the difference?

As mentioned above - using the method of manual therapy of color translation from HEX RGB to HSL and calculating the difference between the components. It started to bore me right away and, having played around with node.js, I wrote a small utility / service that helps to do this automatically: garex.imtqy.com/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 LESS color functions that are needed to turn one color into another. For Sass, the function names are identical, except for the color wheel rotation function: in LESS we have a spin , and in Sass it is more explicitly called adjust-hue .

Conclusion

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

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