LESS : hue, saturation and lightness - how to use?

Question

Trying LESS for a few days. Came with a problem with HSL - Hue-Saturation-Lightness, or may be it's a problem of my understanding, I'm afraid.

I tried the following HTML:

<div class="box hue">1</div>&nbsp;<div class="box saturation">2</div>&nbsp;<div class="box lightness">3</div>

And tried the LESS accordingly:

   @color2: #167e8a;
    .hue{
      background-color: hue(@color2);
    }

    .saturation{
      background-color: saturation(@color2);
    }

    .lightness{
      background-color: lightness(@color2);
    }


    .box{
      width: 50px;
      height: 20px;
    }

But the first three classes showing empty, doesn't showing anything - no background color. But the box is taking width & height.

What Photoshop did for me:

I checked the color code in Photoshop with changes in HSL, they all showing different colors in different combination. Then why my LESS is deceiving me?

Answer 1

HSL LESS functions don't return a color, rather an integer value for the color part that the name indicates.

From the documentation:

hue(@color); // returns the `hue` channel of @color in the HSL space

Examples

.foo{
    color: hue(#167e8a);
}

// rendered as
.foo {
  // invalid...hence you don't see a color
  color: 186;
}

Before going further, it's worth mentioning that the spin() function will modify hue without requiring that you break down the color parts. Specifically, it will "rotate the hue angle of a color in either direction."

Even if you wish to break down HSL manually, it is straightforward.

@h: hue(#167e8a);
@s: saturation(#167e8a);
@l: lightness(#167e8a);

.foo{
    color: hsl(@h,@s,@l);  
}

// rendered as
.foo {
  color: #167d88;
}

More importantly, you can take the extracted channels, modify them, and subsequently rebuild the color:

@h: hue(#167e8a) + 40;
@s: saturation(#167e8a) - 5;
@l: lightness(#167e8a) + 30;

.foo{
    color: hsl(@h,@s,@l);  
}

// rendered as
.foo {
  color: #5978de;
}