尝试LESS几天。出现HSL问题 - 色相 - 饱和度 - 轻度，或者可能是我的理解问题，恐怕。LESS：色调，饱和度和亮度 - 如何使用？

我尝试了以下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中为我所做的：
Color and HSL - Photoshop did for me

我检查的颜色代码在Photoshop与HSL变化，它们都示出了不同的组合，不同的颜色。那为什么我的LESS会欺骗我？

来源

2013-09-30 Mayeenul Islam

HSL LESS函数不返回颜色，而是名称指示的颜色零件的整数值。

从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; 
}

来源

2013-09-30 06:48:41

感谢。但我也问“如何在LESS中使用HSL？”。假设，我想用HSL组合相应的（+24） - （ - 25） - （ - 56）从底部创建一个新颜色（＃167e8a）。我怎样才能做到这一点？ –

看看最后一个例子......你可以为你提取的每个值添加一个偏移量。这是否回答了这个问题？确切地说，是 –

。这正是我期待的。非常感谢您在旅程中帮助我。 –

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

回答

例子

相关问题