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での指定例は、以下のとおりです。色相、彩度、明度の順にカンマ(,)で区切って指定します。

【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度ごとの色を表示しています。スライダーを動かすか、数値を入力すると、彩度と明度が自動で変わります。また、色をクリックすると、コードが表示されます。コードは、コピーして利用できます。

上の色をクリックすると、以下にコードが表示されます。

hsl(x,y%,z%)

彩度:

明度:

彩度と明度は、0〜100の範囲で入力してください。

CSSプロパティ一覧」に戻る