嘗試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：色調，飽和度和亮度 - 如何使用？

回答

例子

相關問題