CREATOR BLOG

カラーネーム/RGB/HSL ウェブでのカラー指定いろいろ

2014/09/17
近藤
  • このエントリーをはてなブックマークに追加

こんにちは、近藤です。

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.

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

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

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive