Creating a Color Palette with LESS

You might be one of the lucky percentage of population that is so sensitive to color that the sun pours inspiration in from any open window. The rest of us, tasked with creating a color palette, get lost in the infinite possibilities found in the color spectrum. For those day-walking gingers and the remaining 99.99% of the population not mentioned previously, here is a helpful tutorial harnessing the power of LESS and the interwebs.

Spin

First we’re going to create our base color @base ( line 01 ), and add it to the class bc ( line 02 ).

01 @base: #dfc53c;
02 .bc { background-color: @base; }

Here is our color palette so far:

Next, we take our base color @base and use it to create its complementary color @complement ( line 03 ). Let’s add it to a class ( line 04 ) so we can see it.

03 @complement: spin(@base, -180);
04 .cc { background-color: @complement; }

And our color palette…

Okay, so the point is to illustrate the spin() function. Notice we use the base color to set a reference point spin( @base, ) for the function. We follow up with how many degrees to spin from that point spin( @base, -180 ). 180°, that’s correct; we are manipulating our colors based on a color wheel. So 180° out of a total of 360° is directly across from our base color. To further illustrate this concept, let’s rotate the same number of degrees in the reverse direction ( line 05 ).

05 @complementRev: spin(@base, 180);
06 .cc-rev { background-color: @complementRev; }

And you guessed it, the same color.

spin( color, rotate ) – Rotate the hue angle of a color in either direction.

Darken

Now that you have that concept down, we can add the darken() function.

07 @dark: darken( @complement, 20% );
08 .cc-dark { background-color: @dark; }

Our color palette without the duplicate:

darken( color, amount ) – Decrease the lightness of a color in the HSL color space by an absolute amount.

Lighten

Seems obvious, but here is the lighten() function. I am going fill out our color palette with a lighter version of our base color @base.

09 @light: lighten( @base, 10% );
10 .bc-light { background-color: @light; }

Our color palette without the duplicate:

lighten( color, amount ) – Increase the lightness of a color in the HSL color space by an absolute amount.

Functions as Arguments

We have learned three of the functions offered by LESS. It is time to finish our color palette and show just how powerful LESS can be. I need two more accent colors in various brightness. Let’s start with @base again.

11 @accent: spin(@base, 260);
12 .ac { background-color: @accent; }
13 @accentDark: darken( spin(@base, 260), 20%);
14 .ac-dark { background-color: @accentDark; }
15 @accentComplement: spin(@accent, 180);
16 .acc { background-color: @accentComplement; }
17 @accentComplementDark: darken( spin(@accent, 180), 20%);
18 .acc-dark { background-color: @accentComplementDark; }

Our color palette is complete. It should look familiar, because it is basically the color palette for this site.

Read more about LESS.

Where to Start

Knowing how to create a series of colors is one thing but how to come up with those beautiful color combinations is the true mystery. Paletton.com is a handy site to test a range of colors for your next theming masterpiece, or grab a predefined color combination.

To get you started, here is the basic color combination we just created: Palette UID: c1q4e2p5b0ksOvnhWEMn4y8vBpC-Dke

Filed under: Tutorials
Tagged with: ,

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *

Name *
Email *
Website