Css – LESS : hue, saturation and lightness – how to use

colorscssless

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:
Color and HSL - 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?

Best Answer

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;
}
Related Topic