HSLカラー値(HSL color values)

虹の円形

HSLは、RGBカラーを補完するものとして追加されました。Hue(色相)、Saturation(彩度)、Lightness(輝度)をカンマで区切って指定します。" hsl(Hue,Saturation,Lightness) "

Hue(色相)は、カラーサークル(虹の円形)の角度で表します。単位の無い number (0 以上 360 未満) のみを記述します。 定義により、red=0=360 となり、 他の色(green=120、blue=240など)が円の周りに広がります。

Saturation(彩度)とLightness(輝度)は、パーセンテージ(0%~100%)として表されます。 100% の彩度は完全彩度であり、0% の彩度は灰色となります。100% の輝度は白、0% の輝度は黒、50% の輝度は " normal(標準) " となります。

example
* { color: hsl(0, 100%, 50%); }   /* red */
* { color: hsl(120, 100%, 50%); } /* lime */ 
* { color: hsl(120, 100%, 25%); } /* dark green */ 
* { color: hsl(120, 100%, 75%); } /* light green */ 
* { color: hsl(120, 75%, 75%); }  /* pastel green */

上に戻る

HSL の例


Red
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
30°
Orange
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
60°
Yellow
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
90°
Yellow Green
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
120°
Green
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
150°
Green Cyan
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
180°
Cyan
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
210°
Cyan Blue
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
240°
Blue
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
270°
Blue Magenta
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
300°
Magenta
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 
330°
Magenta Red
 彩度
輝度                  
                 
                 
                 
                 
                 
                 
                 
                 

上に戻る