Tim Kjær Lange

UX Designer @ GoToMeeting

Lighten & Darken with LESS

May 25 · 2015

I had a LESS file full of color variables and it looked something like this:

@color-blue: #0070b9
@color-blue-dark: #003b7f
@color-blue-light: #0079c2
@color-blue-extra-light: #0080cb
@color-blue-xx-light: #9ee0ff

My need for additional color tints grew and so did the length of the variable names. Say hi to @color-blue-very-very-light! There was a another problem: if I wanted to change the hue of @color-blue I would have to change each and every tint.

An unsustainable situation. Today I found out that LESS (and Sass for that matter) has a lighten and a darken function. That means that I can have a master color (e.g. @color-blue) and use lighten and darken to create the tints:

See the Pen EjZRwN by Tim Kjær Lange (@timkl) on CodePen.