较少:色调,饱和度和亮度 - 如何使用？

Question

尝试少许几天.遇到HSL的问题 - 色调 - 饱和度 - 轻盈,或者可能是我理解的问题,我害怕.

我尝试了以下HTML:

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

并相应地尝试了LESS:

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

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

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


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

但前三个类显示为空,没有显示任何东西 - 没有背景颜色.但是盒子的宽度和高度都在增加.

Photoshop为我做了什么:

我在Photoshop中检查了HSL中的颜色代码,它们都以不同的组合显示不同的颜色.那为什么我的LESS欺骗了我？

Answer 1

HSL LESS函数不返回颜色,而是返回名称指示的颜色部分的整数值.

从文档:

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

例子

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

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

在进一步说明之前,值得一提的是spin()函数将修改色调而不需要分解颜色部分.具体来说,它将"在任一方向上旋转颜色的色调角度".

即使您希望手动分解HSL,也很简单.

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

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

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

更重要的是,您可以获取提取的通道,修改它们,然后重建颜色:

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

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

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