Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. LESS

Creating Color Schemes with LESS Color Functions

This post is part of a series called LESS: Beyond the Basics.
A Deeper Look at LESS Mixins
Understanding the LESS Loop

LESS provides a handful of functions which make defining and manipulating colors super easy. In this tutorial we are going to walk through a number of them, helping you control colors, produce better color pairings and keep them organized.

Color Spinning

First up is the spin() function which allows us to reach a color around the color wheel. This function comes into useful, for instance, when generating a color scheme. You may have read about some common color structures that formulate harmonious color combinations such as complementary, triad, and compound. There are a number of tools, like Adobe Color CC (formerly Kuler), where you can generate color schemes to follow these structures in snap. But how about we craft our own color scheme using LESS?


We’ll begin by generating the easiest color structure, complementary. This pairing comprises two colors which reside on opposite sides of the color wheel.

Complementary color diagram.

Firstly, we define the color base as the pinpoint reference to the second color. Pick a favorite, or any color that suddenly enters your mind. Here I’ve picked up a blue-ish color, #3bafdA, as an example:

As we would like to reach the opposite side of the wheel to the color base, we set the degree value to 180.

This gives us two precise, lovely colors, which complement one another.

Here is an example of these colors applied to a web design prototype:

Quite lovely, isn't it?


We can explore color models further and create a triadic color structure. Triadic, as the name implies, comprises three colors. We therefore divide our wheel into thirds and set the degree of rotation within the spin() function:

The result turns out equally nice:

Triadic color structure

Colors Mixing

Another way of creating color schemes is by mixing two colors; probably something that you learned way back in art class in elementary school. If we mix red with yellow, for instance, we will get a solid shade of orange. With LESS, we can do the same using the mix() function:

The output of this example is #ff8000–the exact Hex code of the "orange" color keyword:


Avoid mixing colors from the same spectrum. Given our base color, #3bafdA, which resides somewhere within the blues on the visible spectrum, you’ll get more satisfying results by mixing it with an opposing color, for example, mediumvioletred or lightseagreen.

This gives us a lovely color scheme; all generated colors feel harmonious as they inherit the same hue, #3bafdA.

If you are clueless about the colors you should apply, pick your favorite one and try mixing it with any color using the mix() function. The result will—most likely—surprise you. 

Here is a (familiar) example of applying such results into a mobile design prototype.

Color Shades and Saturation

Let’s examine some other ways of manipulating color.


Shade defines the light and dark intensity of a color. In web design, shade commonly comes into practice to distinguish element states. A button, for example, may have slightly darker or lighter background color upon :hover or :focus. With LESS, we can use the darken() and lighten() function to make a color darker and lighter, respectively.

This results in:

Defining color state with lighten() and darken() function.


Alternatively, we can adjust the color saturation instead of the lightness. Saturation defines the depth of a color; a greater saturation will make a color more vibrant, while the lowest level of saturation will turn it to gray. 

Given the above example we can replace the shade functions with saturate() and desaturate(), and additionally define the color of the disabled state.

Further adjust the desaturated color lightness until it feels right within your design context. 

Our variables are now tightly bound to the color base which will save us a handful of time when customizing the button styles; they will change correspondingly as you adjust the color base.

Adjusting color state with saturation.

Intelligent Color Output

LESS allows our styles to be a little bit smarter. For example, we can make our styles “think” and decide what color to apply under certain conditions. Assuming we are creating a website template, this is the basic style button, and you plan to extend it with various colors and styles. But how can we control the color outputs? We certainly do not want the text color to be dark on a dark background, or vice versa. We need to ensure that the text retains contrast so that it is easier to read, and this is where the contrast() functions come into play.

In the above example, we set the color through the contrast() function. This ensures that the text color has enough contrast against the background color. In this case, the text should return #fff since the background is #000. If you set the background to a light color, such as whitewhitesmoke, or skyblue, the color should return #000.

You can also customize the color for dark and light contrast. In the following example, the color will return #999 or #777 in place of #fff and #000.

Often, I also prefer not to output a style declaration if the color is transparent, especially for the background color. To do so, encapsulate the background declaration within LESS Mixin Guards.

You could also do the same for declaring border and color properties, and save a couple of lines in your stylesheet by eliminating unnecessary rules.

Wrapping Up

I hope a few of these functions will help you to improve the color arrangement in your designs. You can find the complete list of LESS color functions here, and start experimenting. I would have to agree with Kezz Bracey. There is no way better to harness coloring than trial and error:

“It was only after I started creating solid color schemes through pure trial and error that all the color theory I had read started to make sense.

Further Resources

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.