CSSでHSL(三属性)による色の指定
CSSでは、三属性を使って色を指定できます。
本ページでは、HSLによる色の指定方法について説明します。
色の三属性
色の三属性とは、色相(H:hue)、彩度(S:saturation)、明度(L:lightness)のことを言います。この三属性を数値やパーセントで指定するのが、HSLによる指定方法です。
CSSでは、RGBでの指定方法もあります。RGBは、色の三原色である赤(R:red)、緑(G:green)、青(B:blue)を数値やパーセントで指定します。
RGBは、色を作る観点からの指定方法です。ディスプレイなどは、色の三原色を組み合わせて表示しますが、それを数値などで指定します。
HSLは、人の見え方による指定方法です。明るいはっきりとした青に見えるなどを数値化して指定できます。色相、彩度、明度で別々に指定できるため、少し明るくしたいといった時は、明度を上げるだけで済みます。
色相
色相は、カラーサークルの角度で指定します。
サークルの反対側にある色の組み合わせは補色と言われ、互いに色を強調させると言われています。
以下は、角度と色の表示例です。
角度 | 色 | 表示例 |
---|---|---|
0deg | 赤 | |
30deg | オレンジ | |
60deg | 黄色 | |
90deg | 黄緑 | |
120deg | 緑 | |
150deg | 緑シアン | |
180deg | シアン | |
210deg | シアン青 | |
240deg | 青 | |
270deg | 青マゼンダ | |
300deg | マゼンダ | |
330deg | マゼンダ赤 |
角度の単位には、以下が使えます。
- deg
- 度数です。0〜360degの範囲で指定します。
- rad
- ラジアンです。0〜2π(πは3.1415・・・)radの範囲で指定します。2πは、サークルを一周する長さです。
- grad
- 度数が360分割しているのに対し、400分割しています。このため、0〜400gradの範囲で指定します。
- turn
- 一周を示します。0〜1の範囲で指定します。
円は周回するので、-90deg(= 270deg)や390deg(= 30deg)といった指定も可能です。
また、単位を指定しない場合は、degとして扱われます。Internet Explorerは単位に対応していないため、単位を付けると色が反映されません。
彩度
彩度は、本来の色を何パーセント表現するかを指定します。使える単位は、%(パーセント)です。
100%で本来の色そのままを表現し、パーセントが小さくなると鮮やかさが少なくなり、0%ではどんな色相でも灰色になります。
以下は、赤色の彩度と表示例です。
0% | 25% | 50% | 75% | 100% |
明度
明度は、明るさをどのくらい強くするかを指定します。使える単位は、%(パーセント)です。
100%が一番明るく、どんな色相でも白になります。50%は、明るさを変えません。0%は暗く、どんな色相でも黒になります。
以下は、赤色の明度と表示例です。
0% | 25% | 50% | 75% | 100% |
指定例
HSLでの指定例は、以下のとおりです。色相、彩度、明度の順にカンマ(,)で区切って指定します。
color: hsl(0,100%,50%);
上記により、本来の赤が普通の明るさで表示されます。color: hsl(0deg,100%,50%);と単位を付けても同じです。また、color: hsl(30,100%,50%);と指定すると、オレンジ色になります。
もし、明るさを上げたい場合は、以下のように明度を上げます。
color: hsl(0,100%,60%);
上記により、明るい赤で表示されます。
アルファ
色相、彩度、明度に加えて、アルファ(A:alpha)も使えます。アルファによって、不透明度を示します。
指定例は、以下のとおりです。
color: hsla(0,100%,50%,0.5);
最後の0.5がアルファで、半透明で表示されます。1が不透明、0で完全に透明になります。
ツール
以下は、角度10度ごとの色を表示しています。スライダーを動かすか、数値を入力すると、彩度と明度が自動で変わります。また、色をクリックすると、コードが表示されます。コードは、コピーして利用できます。
上の色をクリックすると、以下にコードが表示されます。
彩度と明度は、0〜100の範囲で入力してください。
「CSSプロパティ一覧」に戻る