Color Alchemy with Less: Creating Color Schemes and Palettes

Color is one of the most important elements in any visual design. When properly used, it can have great impact on your web site or application. But knowing color theory solely is not enough to achieve such impact. You need to have the right tool belt to operate easily and successfully with the multitude of colors. Fortunately, Less solves this practical problem by providing plenty of color functions to work with.

In this tutorial, I’ll explore how to use some of these color functions, in conjunction with other Less features, to produce flexible and reusable mixins for color manipulation.

Creating Color Schemes

When attempting to create color schemes with Less, most people take the most obvious approach, which looks like this:

[code language="scss"]
@base-color: #00ff00;
@triad-secondary: spin(@base-color, 120);
@triad-tertiary: spin(@base-color, -120);
[/code]

This method uses variables and Less’s spin() function to create a color scheme (triadic, in our case). This works fine, but for me it’s not particularly reusable and not flexible enough. Fortunately, the issue can be resolved by using mixins. Let’s see what I mean.

[code language="scss"]
.analog(@color, @variant, @property) {
@first: spin(@color, 30);
@second: spin(@color, -30);
@list: @first, @second;
@return: extract(@list, @variant);
@{property}: @return;
}

.triad(@color, @variant, @property) {
@first: spin(@color, 120);
@second: spin(@color, -120);
@list: @first, @second;
@return: extract(@list, @variant);
@{property}: @return;
}

.quad(@color, @variant, @property) {
@first: spin(@color, 90);
@second: spin(@color, -90);
@third: spin(@color, 180);
@list: @first, @second, @third;
@return: extract(@list, @variant);
@{property}: @return;
}
[/code]

The above code creates three types of color schemes. I’ll explain only the last one, because the first two have the same structure and they don’t need individual explanations.

The .quad() mixin takes three parameters. The first one sets the base color for the scheme. The second one tells the mixin which color variant to return. And the third one defines which CSS property to use when Less compiles the code. Inside the mixin’s body, the spin() function creates the three available color variants in a quad scheme, then these variants are put in a list. The extract() function gets the desired variant, defined in the second parameter. And finally, with the help of variable interpolation, the color variant is assigned to the defined CSS property.

We can now put the above code in a separate file called color_schemes.less and use it as follows:

[code language="scss"]
@import "color_schemes.less";

@base-color: #00ff00;

div {
width: 200px;
height: 100px;
border: thick solid;
.quad(@base-color, 3, border-color);
.quad(@base-color, 2, color);
.quad(@base-color, 1, background-color);
}
[/code]

Here we import the file with the color schemes, and then we define the base color for our website or application. The last three lines in the div rule set, define the colors for the border-color, color, and background-color properties.

As you can see, the mixin can be used with any property whose expected value is a color. Besides, it’s super easy to see for which property a particular statement is used; just take a look at the end, and boom, we know it. For example, in the last statement you can clearly see that the first color variant of the quad scheme will be used as the value for the background-color property. Pretty cool, huh?

Continue reading %Color Alchemy with Less: Creating Color Schemes and Palettes%

by Ivaylo Gerchev via SitePoint