HEX、RGB、HSLがそれぞれ意味するもの

画面は光を足して色を作る

画面の各点には赤、緑、青の光が入っており、この三つの強さを調整して色を作ります。三つとも最大なら白、三つとも0なら黒です。絵の具は混ぜるほど暗くなりますが、光は足すほど明るくなります。ですから画面用の色は、この三つの光の強さで表します。光の三原色が赤・緑・青なのは、人の目で色を感じる細胞がおおよそこの三つの範囲の光に反応するからです。

HEXとRGBは同じこと

RGBは三つの光の強さを0から255までの数で書きます。HEXはその三つの数を16進数2桁ずつつなげたものです。16進数2桁は0から255までをちょうど収められるため、そう定められました。つまり二つはまったく同じ情報で、書き方が違うだけです。1チャンネルが256段階なので、三つを組み合わせると256の3乗、約1,677万色を書き表せます。

• #FF0000 = rgb(255, 0, 0) = 赤
• #000000 = rgb(0, 0, 0) = 黒
• #FFFFFF = rgb(255, 255, 255) = 白
• 3桁の略記 #F00 は #FF0000 と同じ

HSLが使いやすい理由

HEXやRGBだけを見て「もう少し明るく」しようとすると、三つの数をそれぞれどれだけ上げるか計算する必要があります。HSLは色相、彩度、明度を別々に扱うので、明度の数一つを変えるだけで済みます。同じ色相で明度だけが違う配色を作るときに特に便利です。結局は同じ色を指しますが、人が調整するにはHSLのほうが直感的です。HSLの色相は0度から360度までの角度で書き、0度が赤、120度が緑、240度が青です。明度は50%のとき最も純粋な色で、100%なら白、0%なら黒になります。

透明度が付くとき

色のあとに値がもう一つ付くことがありますが、これは透明度です。HEXでは2桁が増えて8桁になり、RGBでは4つ目の値として書きます。透明な色は後ろに何があるかによって最終的に見える色が変わるので、対比を確かめるときは実際の背景の上で見る必要があります。透明度を0から1の値で書く方式と、HEXの00からFFで書く方式が混在しているので、0.5がHEXではおよそ80だと知っておくと便利です。

画面と印刷は違う

印刷はインクを重ねて光を引く方式なので、画面とは原理が逆です。そのため画面で鮮やかに見える色の中には、印刷でそのまま出せないものがあります。画面用に選んだ色を印刷物にそのまま使うとくすんで見えるのは、ここから来ます。印刷はシアン・マゼンタ・イエロー・黒の四つのインクを使うCMYKで色を指定し、画面用のRGBの値をCMYKに直す公式は一つに決まっていません。印刷所の機材や紙によって結果が変わるので、大事な印刷物は実際の試し刷りで確かめるのが安全です。

同じ数なのに違って見える理由

同じHEXの値でも、画面ごとに少しずつ違って見えます。数は「どれだけ強く」を決めるだけで、その強さの赤がどんな赤なのかは色空間が決めます。ウェブではsRGBという色空間を標準として想定しますが、最近の機器にはより広い範囲の色を出せる画面が多くあります。そこに画面の明るさ、夜間モード、周りの照明まで加わるので、正確な色を合わせる作業は調整済みのモニターで確かめる必要があります。

文字色と背景色の対比

色を選ぶとき、きれいかどうかより先に確かめたいのは読めるかどうかです。ウェブのアクセシビリティ指針(WCAG)は、通常の文字で4.5対1、大きな文字で3対1以上の明度の対比を勧めています。HSLの明度が同じでも黄色は明るく、青は暗く見えるので、明度の数字だけで対比を判断してはいけません。対比を調べる道具に二つの色を入れ、比率を直接確かめるのが確実です。

• 通常の本文:4.5対1以上
• 大きな文字:3対1以上
• 黒と白の対比は21対1で最大
• 色だけで情報を区別せず、文字や形を併用する

場面ごとに選ぶ表記

どの表記を使うかは作業に合わせて選べば十分です。デザインの道具どうしで色をやり取りするときは短くて写しやすいHEXが便利で、コードで値を計算して変えるときは数が分かれているRGBが扱いやすくなります。ボタンの通常・押下・無効の状態のように、同じ色の変化形をいくつも作るときはHSLが最も便利です。印刷物は最初からCMYKで指定するのが安全です。