webデザインで使用する「16進数カラーコード」について

2024年4月22日 21:29

webデザインで色指定に使用するのは「16進数カラーコード」がメインとなります。

16進数とは

0, 1, 2, 3, 4, 5, 6, 7, 8, 9 （10進数）
a, b, c, d, e, f

「0〜9」10進数＋アルファベット「a〜f」6文字
合計16文字を1単位としています。

webで使用するRGBを、16進数で色指定します。
　※ RGB（光の三原色）については「RGBとCMYKの違いについて」参照

「Red」「Green」「Blue」それぞれ「0〜f」を2個ずつ持っており、計6個の16進数の数値で色を作ります。

2個ずつ持つ数値の組み合わせ方は「00」で始まり「ff」で終わります。

光がすべてないと「黒」、光がすべて重なると「白」になるので、数値が一番低い「#000000」は黒、数値が一番高い「#ffffff」は白になります。

6個とも同じ数値と、RBGそれぞれが同じ数値を持つとグレーになります。

同じ数値が6個並ぶ、またはRBGそれぞれが同じ数値のときはショートハンドで「#000000 → #000」「#ff0000 → #f00」と記載することができます。

webで色指定をするときは数値の頭に「#」を付けます。

昔はモニターによって色の出方が違ったので、できるだけ差異なく表示できる「Web セーフカラー」216 色を使用していました。

今でもPhotoshopなどで「Web セーフカラー」指定ができるので、使う色が「白」など決まっているときは素早く色を選択できます。

#ff0000　赤の数値が一番高い

#00ff00　緑の数値が一番高い

#0000ff　青の数値が一番高い

色の三原色、シアン・マゼンタ・イエローは光の三原色の中間の色になります。

#00ffff　緑・青の数値が一番高い：シアン

#ff00ff　赤・青の数値が一番高い：マゼンタ

#ffff00　赤・緑の数値が一番高い：イエロー

「0〜255」の10進数でRGBの色指定もできます。16進数と同じで「0」は光がない、「255」は1番明るくなります。

R：255
G：0
B：0

上記のときは、赤が最高値「255」、緑・青が「0」に設定されているので「赤」になります。

10進数：256色
16進数：16の2乗 = 256色

指定方法は違っても、どちらも表示できる色数は同じです。

RGB 光の3原色：256の3乗（256×256×256）= 16,777,216色

人の目では見分けられないほどの色を作ることができますが、あくまでも理論値となります。