Colour functions

Less can calculate new colours from one base colour: darker for hover, lighter for a background, more transparent for a shadow. A colour function takes a colour and a parameter and returns a new colour. This way the whole palette is derived from a few variables.

Darker and lighter

darken() and lighten() decrease and increase the lightness of a colour by the given percentage. Make a hover shade for the button in styles/components/buttons.less:

// styles/components/buttons.less
@primary: #2563eb;
 
.btn {
  color: white;
  background: @primary;
 
  &:hover {
    background: darken(@primary, 10%);
  }
}

.btn {
  color: white;
  background: #2563eb;
}
.btn:hover {
  background: #134cca;
}

<style>
  .btn {
    color: white;
    background: #2563eb;
  }
  .btn:hover {
    background: #134cca;
  }
</style>
 
<button class="btn">Hover over me</button>

On hover the button becomes noticeably darker, and you did not have to pick the second colour by hand.

Transparency

fade() sets the opacity of a colour in percent — handy for shadows and backgrounds:

// styles/components/cards.less
@primary: #2563eb;
 
.card {
  border: 1px solid fade(@primary, 30%);
  box-shadow: 0 4px 12px fade(@primary, 20%);
}

.card {
  border: 1px solid rgba(37, 99, 235, 0.3);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

Less output rgba() with the opacity 0.3 and 0.2.

Mixing

mix() mixes two colours, tint() mixes with white, shade() with black. This gives soft backgrounds for messages:

// styles/components/alerts.less
@danger: #dc2626;
 
.alert-danger {
  color: shade(@danger, 40%);
  background: tint(@danger, 85%);
  border-left: 4px solid @danger;
}

.alert-danger {
  color: #841717;
  background: #fadede;
  border-left: 4px solid #dc2626;
}

<style>
  .alert-danger {
    color: #841717;
    background: #fadede;
    border-left: 4px solid #dc2626;
  }
</style>
 
<div class="alert-danger" style="padding: 12px">Could not save the post.</div>

Reference table

Function	What it does
`lighten(@c, 10%)`, `darken(@c, 10%)`	Lighter and darker
`saturate(@c, 10%)`, `desaturate(@c, 10%)`	More and less vivid
`fade(@c, 50%)`	Sets the opacity
`fadein(@c, 10%)`, `fadeout(@c, 10%)`	Less and more transparency
`mix(@a, @b, 50%)`	A mix of two colours
`tint(@c, 20%)`, `shade(@c, 20%)`	A mix with white and with black
`spin(@c, 180)`	Rotates the hue on the colour wheel
`greyscale(@c)`	A shade of grey
`contrast(@c)`	Black or white — whichever reads better on `@c`

contrast() is useful for text on a coloured background: on yellow #facc15 it returns black, on blue #2563eb white.

Common mistake

The opacity in fade() is given in percent. Less reads the number 0.5 as half a percent:

// styles/components/cards.less
.card {
  box-shadow: 0 4px 12px fade(#2563eb, 0.5);
}

.card {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.005);
}

The shadow is almost invisible. Write fade(#2563eb, 50%).

Thanks for reading!