今日は、主にCSSで色の指定をする時に使う、カラーコードについてです。
「#ea34f1」こんなやつです。
一見すると「何の暗号？」って感じてしまいますが、きちんとルールがあり、そのルールを覚えてしまえば、さほど難しい問題ではありません。
パソコンのモニターは、三色の組み合わせ
パソコンだけでなくテレビ等もそうなのですが、いわゆるモニターが色を再現する際は、光の三原色を組み合わせる事で色を再現しています。
光の三原色は「赤・緑・青」の３色です。
英語にしたときの頭文字を取って、「RGB」という言葉がよく使われます。
※ Red Green Blue
各々の色をどれくらい組み合わせるか
上記で説明したRGBは、３色の色を各々どれくらい組み合わせるかによって、色を再現します。
そして、組み合わせる量は、0〜255の、計256段階に分かれています。
つまり再現出来る色の数は、256の三乗で、16,777,216通りになります。
例えば「赤」は、
R=255、G=0、B=0
と考えます。
カラーコードは16進数で考える
カラーコードは、RGBの値を、各々16進数で表した時の数値になります。
普段使う10進数が、10で位が一つ上がるのに対し、16進数は、16で位が一つ上がります。9以上はアルファベットを使います。
- 10進数
- 1,2,3,4,5,6,7,8,9,10
- 16進数
- 1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10
16進数で表した時、255は、「FF」になります。
再現出来る色の段階である、0〜256は、16進数で考えると、00〜FFになるわけです。
さて、最初に書いたカラーコードを見てみます。
#ea34f1
これは、#以降の2文字ずつ分解して考えます。
最初の2文字が赤（R）
次の2文字が緑（G）
最後の2文字が青（B）
を16進数で表しています。
#ea34f1
各々十進数に戻すと、
R:ea→234
G:34→52
B:f1→241
となり、各々0〜255の256段階のうち、
赤が234、緑が52、青が241
の色を組み合わせた色となります。
まとめ
カラーコードは、RGBの0〜255の数値を、16進数にしてくっつけたものです。
一見すると暗号みたいに思えてしまいますが、ルール自体は上記の様に単純だったりします。
