html怎么调颜色的饱和度,css – LESS：色调,饱和度和亮度 – 如何使用？

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() 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;

}