RGBAとHSLA

今回は色についてです。CSSで指定するRGBAとHSLAについて理解を深めたいと思います。

CSSでの色指定

CSSで色を指定する場合、

#ADCDFA

あるいは

rgba(173, 205, 250, 1);

や

hsla(0,100%,50%,1);

といった表し方があります。

私はほとんど一番上の指定方法が使い慣れているので、

今回はRGBAやHSLAについて学び、色について理解を深めると同時に、

色選びや色指定をスムーズにさせていきたいと思います。

RGBAとは？

RGBAが表しているのはこうです。

R=red、G=green、B=black、A=alfa(透明度)

RGBはそのまま色の意味ですが、Aは透明度を表しています。

よくCSSでこういう表記を見たことはないでしょうか？

 background: rgba(173, 205, 250, 1);

こちらを表しているのが下のボタン1です。(ちなみにopacityが1の場合は省略可能です。)

そして、

background: rgba(173, 205, 250, 0.5); 

opacityつまり透明度を0.5にするとこうなります。

他にもopacityがよく使われるのが、ボタンにカーソルを合わせた時にちょっと色が薄くなる仕様です。

.btn:hover {
 opacity: 0.8;
}

といった具合です。

RGBAの値

さらにrgbaの最大数値は255、またはffと表します。最小数値は０です。

なので、rの数値だけマックスにして、gとbの値を０にすれば、

rgb(255, 0 0)

真っ赤です。

そして、255はffとも表すので、

赤：最大値ff、緑：最小値00、黒：最少値00なので、こう表せます。

＃ff0000

さらに同じ文字が２つ続く場合は１つに縮めることができるので、赤は

＃f００；

と表すことになります。

だから全部最大値の#ffffff→#fffは白、

全部最少値の#000000→#000が黒になるわけですね。

HSLAとは？

次に私にとって一番馴染みがないHSLAについてです。

HSLAは

HはHue(色相)、SはSaturation(彩度)、LはLightness(明度)、AはAlpha(透明度)を表しています。

色相は赤を0として360度で表します。

彩度はパーセントで指定し、０％は暗い色、100%が明るい色を表します。

明度も同様にパーセントで指定しますが、彩度と違う点は、

100%が白、５０％が純度、０％だと黒になります。

透明度は０から１で指定し、RGBA同様1であれば省略可能です。

hsl(0,100%,50%);

あるいは

hsl(360,100%,50%);

こちらで、

真っ赤です。

HSLAのすごいところ

では、彩度を最大値(100%)、明度を純色(50%)にして色相だけ変えてみると、

background: hsl(0,100%,50%);
background: hsl(40,100%,50%);
background: hsl(80,100%,50%);
background: hsl(120,100%,50%);
background: hsl(160,100%,50%);
background: hsl(200,100%,50%);

こうなり、

今度は色相と彩度を固定値にして、明度だけ変えてみると、

background:hsl(220,50%,40%);
background: hsl(220,50%,50%);
background: hsl(220,50%,60%);
background: hsl(220,50%,70%);
background: hsl(220,50%,80%);
background: hsl(220,50%,90%);

となります。

これは便利ですね。

少し長くなったので、続きはまた次回に。

最後までお読みいただき、ありがとうございました。