较少：色调，饱和度和亮度 - 如何使用？

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函数不返回颜色，而是返回名称所指示的颜色 part 的整数值。

来自documentation：

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() function将修改色调而不要求你分解颜色部分。具体来说，它将“在任一方向上旋转颜色的色调角度。”

即使您希望手动分解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;
}