#demo-element {
  background: @theme-color;
  color: contrast(@theme-color, black, white, 50%);
}

@theme-color: red;

The above example will set the text color of the element as white if the background-color is dark and vice-versa. This is achieved using the contrast() color operation function.

The contrast function accepts four parameters where the first one is the reference color based on which the output should be provided. A dark color that should be output when the reference color is light and a light that should be output when reference color is dark . Threshold is a percentage which defines when a color is considered as a light color and when dark.

A demo of this example can be found here.

Darken

#demo {
  @refcolor: #f0b9b8;
  background: @refcolor;
  border: 1px solid darken(@refcolor, 25%);
}

The above code makes use of the darken() function to set the border color as a shade that is 25% darker than the reference color (which is also the background color).

Less compiler cannot read the value assigned to one property and use it for another and so a separate variable should be defined. This variable will be directly assigned to the background color whereas for the border color, the darken function is used to get a darker shade.

---

Lighten

#demo {
  @refcolor: #f0b9b8;
  background: @refcolor;
  box-shadow: 2px 2px 0px lighten(@refcolor, 5%);
}

The above code makes use of the lighten() function to set the shadow color as a shade that is 5% lighter than the reference color (which is also the background color).

It is possible to change the opacity of a color with fade() function.

fade() takes 2 parameters:

• a color
• opacity (in %)

---

Example:

@elegant: #eeffgg;

.light-elegant {
    background-color: fade(@elegant, 20%);
}

<div class="light-elegant">
    I have a 20% elegant background!
</div>