カラーコードの覚え方・作り方
つ～じ～です。過去の自分の記事の「つ～じ～」の部分見直してみたらなぜか１回だけ太字にしてませんでしたさてどの回でしょう。
それはさておき、皆さんカラーコード使ってますか？私は使ってます。…使ってませんかそうですか。
WEBなどの電子媒体上で色を表示・表現する際、カラーコードが使われる事が多々があります。
形式は「#FF0000」のように、シャープ1つに英数字が6個付く形です。
なおこのカラーコードは赤を表します。
プログラム上でもこういったカラーコードを直接打ち込むことがあったりするわけですが、
「あの色のカラーコード何だっけ…、どんな色混ぜればいいかはわかるのにな…」
など、欲しい色がある時にどんなカラーコードを入力すればいいかわからず、毎回カラーコードが羅列されたサイトにアクセスしたり…、といった経験あると思います。私はあります。…ありませんかそうですか。
本稿ではこのカラーコードの構造について初心者向けに紹介をしたいと思います。
カラーコードの構造
カラーコードは光の三原色の強度の組み合わせで構築されております。光の三原色はRGB、つまり赤(Red)、緑(Green)、青(Blue)の三色の混ぜ方で色を作る方式です。
実はカラーコードは、6桁の英数字のうち2桁ずつをそれぞれ赤、緑、青の強さとしており、その強さをそれぞれ16進数で示しただけのものだったりします。
先ほどの「#FF0000」の場合、
赤：FF 緑：00 青：00
となります。このFFは16進数です。
16進数、開発では当たり前のように見るものですが実生活だとあまり見ないですね。
16進数は１～９に加え、
１０：A
１１：B
１２：C
１３：D
１４：E
１５：F
と定義している数値です。プログラムではビット演算の都合で2の階乗の数値であることが望ましいため、16進数がよく使われます。
16進数を10進数に直す場合は、2桁目の数値に16をかけたものと、1桁目の数値を足せば出せます。
例えば「FF」の場合は、
F(15)×16 + F(15) = 240 + 15 = 255
なので16進数の「FF」は10進数だと「255」になります。
つまり「#FF0000」は、10進数に直すと
赤：255 緑：00 青：00
となります。プログラム上では各色の強さの最大値を255に定義しているため、
「#FF0000」⇒「赤：255 緑：0 青：0」は
『赤MAX、他の色なし』
の色合いのカラーコードとなるわけです。
カラーコードの作成・アレンジ
上記の構造さえわかれば、好きな色を作りたいときにどんなコードにすればいいか大体わかってきます。
緑を作りたい場合は緑をMAXにすれば良いです。
「#00FF00」⇒「赤：0 緑：255 青：0」
青を作りたい場合は青をMAXにすれば良いです。
「#0000FF」⇒「赤：0 緑：0 青：255」
赤は赤でも違う赤にしたい場合は、次のようにすれば良いです。
暗い赤：「#AA0000」⇒「赤：170 緑：0 青：0」
光の三原色は強さを下げると黒に近づくため、全体の数値を下げれば下げるほど暗い赤になります。
明るい赤：「#FFAAAA」⇒「赤：255 緑：170 青：170」
光の三原色は強さを上げると白に近づくため、全体の数値を上げれば上げるほど白っぽくなります。
※カラーコードはそれぞれの色を0～255の範囲で定義しているため、「300」「-10」など範囲外の数値にすることはできません。
赤緑青だけでなく違う色にしたい場合は、混色をイメージした数値を作れば良いです。
例えば黄色は赤と緑の混色であるため、
「#FFFF00」⇒「赤：255 緑：255 青：0」
このように定義すれば黄色が作れます。そのほか、
紫(マゼンタ)：「#FF00FF」⇒「赤：255 緑：0 青：255」
水色(シアン)：「#00FFFF」⇒「赤：0 緑：255 青：255」
このように色を作ることができます。
あとは「もっと暗くしたい＝数値を小さくしていく」「もっと明るくしたい＝数値を大きくしている」「青を混ぜたい＝カラーコードの下二桁の数値を上げる」などなど、用途に応じてカスタマイズすることができます。
上述では「FF」「00」など同じものを続けた数値を使っておりますが、普通に「EA」「1C」「B7」なども定義可能です。
これらを駆使することで、最大1677万7216種類（256 x 256 x 256）の色を表現することができます。
これを覚えておけば、カラーコードで好きな色を作りたいときに役立つでしょう！ …え？カラーコード一覧のサイト見に行った方が早い？？そうですか…
何らかの形で活用出来たら幸いです。今回はこれにて。
