こんにちは、近藤です。

WEBで利用される色指定フォーマットには、RGB・カラーネーム・HSLなど、様々な種類があります。
今回は、色指定フォーマットに関してのまとめをしたいと思います。

はじめに：色空間

色の感じ方は個人差もあり、定量的に表すのは難しいものです。

Aさんがいう「もうちょい明るい赤」と、他の人がいうそれとは、
たぶん、ほんのちょっとズレているのが普通ですよね。

この色の指定を、より秩序立てて考えられるようにしたのが、色空間です。

色空間を使うことで、色の指定を「座標」の感覚で指定できるので、
定量的な指定が可能になります。

以下、有名どころの色空間のまとめです。

RGB

R（Red:赤）・G（Green:緑）・B（Blue:青）の3原色から構成される、ウェブだと最もポピュラーと言える色空間。
値が大きいほど白に近づき、減らすと黒に近づきます。

CMYK

印刷で利用する色指定。
C(cyan:シアン)、M(magenta:マゼンタ)、Y(yellow:イエロー)、K(Key plate:黒)。

HSV・HSB

H(Hue:色相)・S（Saturation:彩度）・V（Value:明度）から構成される色空間。
Hの値は、360°の色のわっか。
Sで鮮やかさ（値が大きければ、より原色に近い色に）を%指定し、
Vで明度を%指定します。
Vの代わりに、B（Brightness）を用いて、HSBとも言われます。

HSL

H(Hue:色相)・S（Saturation:彩度）・L（Lightness/Luminance:輝度）から構成される色空間。
HSVと似ていますが、異なる点は、「彩度」の内容と、「輝度」。

HSLでは、彩度は、0～100%の値で、小さいほど灰色に近い色になります。
輝度0%を黒、100%を白とし、50%を純色とします。

HSVとHSLは少し紛らわしいですが、以下のような立体図をイメージすると覚えやすいかと思います。

HSVやHLSは、直感的に分かりやすいのが特長です。

CSSでの色指定方法

さて、WEBでの色の指定と言えばHTML・CSS・SVGなどで可能ですが、
一番はCSSだと思います。

以下、CSSでの色指定方法をまとめます。

カラーネーム

色の、英語名で指定できるため、分かりやすい色も多いです。
ただし、147色のみ、なので、表現の幅は狭まる＋覚えるのは大変です・・

カラーネーム	記述例	結果
red	background-color:red;
green	background-color:green;
blue	background-color:blue;
black	background-color:black;

RGB

#+16進法6桁でRGBそれぞれの値を設定する方法と、rgb()で値を設定する方法があります。
なお、rgba()は、rgb()に、a(Alpha:透明度)を追加で指定できる記述方法です。

#16進法	rgb()	結果
#ff0000	rgb(255,0,0)
#00ff00	rgb(0,255,0)
#0000ff	rgb(0,0,255)
#000000	rgb(0,0,0)

HSL

CSS3で追加されました。
hsl(色相環の度数[0-360],彩度[0-100%],輝度[0-100%])で指定できます。

hsl()	結果
hsl(0,100%,50%)
hsl(120,100%,50%)
hsl(240,100%,50%)
hsl(0,0,0)

度数は0°の赤からスタートし、度数が上がるごとに、以下の図のように緑・青～～と変化し、360°で一周して赤に戻ります。

色相環や、彩度の考え方は、CSSやSVGのFilter Effectでも利用される（まだ一部）ものなので、今後利用される機会増えそうで楽しみですね。

応用？：JavaScriptでの動的な色指定

たとえば、似たような項目が複数並んでいて、それぞれ色分けして分かりやすくしたい！
という時があるかもしれません。

そんな時は、HSL色相環などを利用して、項目数に応じて色分けしてしまう、
というのもお手軽な方法です。

See the Pen cssのhsl()で遊ぶ by kinoborisan (@kinoborisan) on CodePen.

匿名性の高いデータや、ヒートマップなど、
色自体に意味を持たせたデータの利用時にあると助かりますね。

以上、ウェブでの色指定フォーマットのいろいろ、でした。