Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From \$16.50/m

# Creating Color Schemes with LESS Color Functions

Difficulty:IntermediateLength:ShortLanguages:
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?

### Complementary

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

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:

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:

## 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:

#### Tip

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.

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:

### Saturation

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.

## 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 `white``whitesmoke`, 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.