HSL


HSL計算機


 
rgb(255、0、0)
#ff0000


H:
S:
L:

HSLカラー

HSLカラー値は、IE9以降、Firefox、Chrome、Safari、およびOpera10以降でサポートされています。

HSLは、色相、彩度、明度の略です。

HSLカラー値は次のように指定されます:hsl(hue, saturation, lightness)


色相

色相は、0から360までのカラーホイールの次数です。0は赤、120は緑、240は青です。


飽和

飽和度はパーセンテージ値です。0%は灰色の陰影を意味し、100%はフルカラーを意味します。


軽さ

明るさもパーセンテージです。0%は黒、100%は白です。

";} x + =" "; x + =" "; n = 0; for(i = 0; i";} x + = ""; x + = ""; document.getElementById( "huetable")。 innerHTML = x;} function drawSatTable(hue){var x、i; x = "" x + = ""; for(i = 0; i ";} x + =" "; x + =" "; for( i = 0; i ";} x + ="
" + i + "
"; document.getElementById(" saturationtable ")。innerHTML= x;} function drawLigTable(hue){var x、i; x =" "x + =" "; for(i = 0; i ";} x + = ""; x + = ""; for(i = 0; i ";} x + ="
" + i + "
"; document.getElementById(" lightnesstable ")。innerHTML= x;} drawHueTable(0); drawSatTable(0); drawLigTable(0);

自分で試してみてください

HSLカラー値は、すべての主要なブラウザーでサポートされています。

<style>
div {
    background-color: hsl(180, 50%, 50%);
    color: hsl(0, 0%, 100%);
}
</style>

❮ 前 次 ❯