Gyum Fox Gyum Fox - 3 years ago 169
Less Question

How to make a colour darker if light, or lighter if dark in LESS

Given a colour as input, how do you transform it in LESS so that it becomes darker if it's a light colour, or lighter if it's a dark colour?

For example:


  • when the colour is dark, the result is something like
    darken(@color-input, 10%)

  • when the colour is light, the result is something like
    lighten(@color-input, 10%)



Is there any conditional test that can be applied or any color operation that would give this result?

Answer Source

I think the question was correctly identified as a duplicate, but for the sake of answering it correctly, here is the right answer (based on seven-phases-max's answer):

contrast(@color-input, lighten(@color-input, 10%), darken(@color-input, 10%));

You can see a working example here.

You can read more about the contrast function here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download