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

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

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

HEXとRGBは同じこと

RGBは三つの光の強さを0から255までの数で書きます。HEXはその三つの数を16進数2桁ずつつなげたものです。16進数2桁は0から255までをちょうど収められるため、そう定められました。つまり二つはまったく同じ情報で、書き方が違うだけです。

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

HSLが使いやすい理由

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

透明度が付くとき

色のあとに値がもう一つ付くことがありますが、これは透明度です。HEXでは2桁が増えて8桁になり、RGBでは4つ目の値として書きます。透明な色は後ろに何があるかによって最終的に見える色が変わるので、対比を確かめるときは実際の背景の上で見る必要があります。

画面と印刷は違う

印刷はインクを重ねて光を引く方式なので、画面とは原理が逆です。そのため画面で鮮やかに見える色の中には、印刷でそのまま出せないものがあります。画面用に選んだ色を印刷物にそのまま使うとくすんで見えるのは、ここから来ます。