カラーコードについて

「16進数について」の処でも話しましたが、色コードは一般的に #付きの6桁表記 が多く使われますよね。
これは 1600万色 以上の色を表現でき、写真には欠かせないと思います。
しかし、ページデザインの時にこんなに細かい色コードは人間の眼では識別できません。
そこで解り易い、ある程度決められた色コードがよく使われます。
　
ページデザインやCSSなどで、よく使用される色コードは 「216色」や「4096色」 が多いですね。

【参考ページ】
・WEBセーフカラー216色
WEBセーフカラー216色－WEBカラーリファレンス

・色名147色コード表・セーフカラー216色コード表
カラーコード表

・4096色カラーチャート
便利　16進数の4096色カラーチャート

色コードの覚え方

この中でも、サンプルなどでよく使われる原色の色コードぐらいは、 コード表を見なくても覚えておきたいものです。
その覚え方のポイントについて話しますが、これを知っておくと、欲しい色を自分で作成出来たりします。

よく使われる16進数コード

色コードは、基本 #rrggbb の様に左から、2桁ずつ赤緑青の順で指定しますよね。
そこで覚えておきたいのが、 「216色」 で登場する「00」、「33」、「66」、「99」、「CC」、「FF」です。
この2桁は3の倍数なんですね♪
それを組み合せて 「216色」 ができてるのです。

光の三原色、基本8原色について

まず、「赤」の場合、「rrggbb」の「rr」の部分に、一番大きい数字「FF」を使い、それ以外の色は必要ないから「00」にする。
即ち、色コードは「#FF0000」となります。

「緑」と「青」は同様に、それぞれ「#00FF00」と「#0000FF」となります。
　
また、すべての光を発しない「黒」は「#000000」ですし、すべての色を発色する、一番明るい「#FFFFFF」は「白」です。

次は、混色です。
「赤紫」（色名では fuchsia とか magenta と言う）は、「赤」と「青」を混ぜればいいので、色コードは「#FF00FF」、「水色」（色名では cyan とか aqua と言う）は「#00FFFF」。
では「赤」と「緑」を混ぜた「#FFFF00」は何になるかと言うと 「黄色」 です。
　
ここまでが色コードの基本8原色です。

様々な色コードについて

次に覚えやすいのが「灰色」。
これはどの色にも染まってないという事から、それぞれの2桁を同じ数字にすれば、自動的に「灰色」になります。
例えば、「#666666」や「#CCCCCC」や「#A5A5A5」などはすべて「灰色」です。
数字が「0」に近付けば暗い「灰色」、「F」に近付けば明るい「灰色」です。
　
変わった処では「橙」（orange）。
これは覚えにくかったのですが、法則を見つけました。
橙は、左から順に数字を少なくしていけばできるという事が解りました。
ですから、「#FFCC99」とか「#FF9966」とかが「橙」になります。
　
また、それぞれの色の度合いが近くて、「F」に近付けばパステル調になりますし、色の度合いが離れれば離れる程きつい色になり、近くなればなるほど暈けた色になります。最近では6桁表記だけではなく、Bootstrapなどで使用されてる、「#rgb」形式の3桁表記もよく見られるようになりました。

補色について

「補色」 とは 「反対色」 とも言われ、最も目立つ色になります。
簡単な処では、青色「#0000FF」の「補色」は黄色「#FFFF00」です。
原色の場合は、「00」を「FF」に、「FF」を「00」に変換すると作成できます。
それ以外は、それぞれの色コードを次の様に変換すると作成できます。
「33」→「CC」
「66」→「99」
「99」→「66」
「CC」→「33」