Mastering LESS Color Functions for Web Design

LESS is a powerful tool for web designers. We’ve previously discussed various aspects of LESS, from designing sleek navigation bars to efficiently working with LESS. However, there’s more to explore. In this article, we’ll delve into the world of LESS Color Functions.

Color plays a pivotal role in web design. Take a look at our collection of stunning three-color websites for inspiration. LESS not only allows you to define colors through variables for consistent application but also offers Color Functions to customize colors without needing a color picker.

Exploring Functions

LESS offers a variety of functions with self-explanatory names for color manipulation. These include lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade(), spin(), and mix().

For demonstration purposes, let’s use the color green (#7bab2e) as our variable.

 @color: #7bab2e;

Darkening and Lightening

Modifying colors using LESS Color Functions is quite straightforward. In the following example, we’ll darken the @color by 20%:

 .box.darken {
   background-color: @color;
   border: 3px solid darken(@color, 20%);
 }

The resulting output shows that the border is darker than the green box’s interior color.

Similarly, you can lighten the @color as follows:

 .box.lighten {
   border: 3px solid lighten(@color, 20%);
 }

The border now appears lighter than the background.

You can also store these functions in variables for later use in your stylesheet:

 @colorDark: darken(@color, 20%);
 
 .box.darken {
   background-color: @color;
   border: 3px solid @colorDark;
 }

Manipulating Hue with Spin

The spin() function in LESS allows you to adjust a color’s hue. If you’re familiar with the Hue/Saturation feature in Photoshop, you’ll find this function works in a similar manner.

Let’s examine the following code snippet:

 .box.hue {
   background-color: spin(@color, 123);
 }

The maximum value for hue manipulation is 180, but negative values like -123 are also acceptable.

In LESS, you can also combine multiple functions. Here’s an example:

 .box.desaturate {
   background-color: desaturate(spin(@color, 123), 50%);
 }

In this example, we first adjust the hue of @color by 123 and then reduce its saturation by 50%. Here are the results:

Blending Colors with Mix

The mix() function in LESS allows you to blend two colors to create a new one. For instance, green is a mix of blue and yellow. Let’s try this in LESS:

 .box.mix {
   background-color: mix(@blue, @yellow, 50%);
 }

This function requires three parameters: the two colors to mix and their respective weights, which we’ve set to 50%. The weight parameter can yield unexpected results, so it’s worth experimenting with.

Concluding Remarks

Color functions in LESS are incredibly versatile. With just a single base color, you can use these functions to create a comprehensive color scheme for your website. For further reading on color theory and application, check out the following resources:

• An Introduction to Color Theory for Web Designers – Webdesigntuts+
• RGBa & HSLa CSS Color – Trent Walton
• HTML Colors – W3Schools