戻る

ここではカラーコードを表現する際に使われる「16進数」という仕組みについて簡単に解説します。

また、いくつかのカラーコードとその実際の色合いなども紹介します。

カラーコードでは、「16進数」という数字の表現方法が使われます。

16進数とは、0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F の16個の記号を使って数値を表す方法です¹⁾。
10進数の数え方と、16進数の数え方の対応は、以下のようになります。

10進数で「10」が16進数では「A」、「11」が「B」、「12」が「C」……というふうに、16進数ではアルファベットが混じります。
そして、10進数で「15」にあたるのが、16進数では１桁の最大値「F」です。
さらに、10進数で「16」になったとき、16進数では「10」になるという感じです。
10進数では10番目の数字を使う時に桁上がりが起きて２桁になるように、16進数では16番目の数字を使う時に桁上がりが起きて２桁になると、まあ、そんな感じです。

０と１の２進数で動作しているコンピューターにとっては、10進数よりもこちらのほうが都合が良いため、カラーコードでも16進数が使われます。

カラーコードでは #99AAFF のように６桁の数値で指定するという話でしたが、その６桁は、２桁の16進数が３セットあると考えてください。

２桁ずつが R G B （ 赤Red , 緑Green , 青Blue ） ３つの色の強さを表します。この赤・緑・青が「３原色」と呼ばれ、すべての色はこの３つの色の混色で表現されます。

３色を混ぜると何色になるかは「光の３原色(加法混合)」のルールにしたがって決まります。

たとえば #99AAFF なら 赤が 99、緑が AA、青が FFの強さを持つということです。

２桁の16進数で色を表す場合、00 が最も暗く、FF が最も明るい値 となります。00からFF までで、0～255まで256段階の値を表現できます。 ざっくり言うと以下の順に強くなると考えるとわかりやすいです。

（暗い）00 ＜ 11 ＜ 22 ・・・ 99 ＜ AA ＜ BB ＜ CC ＜ DD ＜ EE ＜ FF（明るい）

ちょうど中間の色合いは7Fもしくは80です。

実際にカラーコードがどんな色になるか試してみたい場合は、色シミュレーターのページで試してみましょう。

そして良い色ができたら #xxxxxx のようなカラーコードをメモしておけば、いつでも同じ色を再現できます。

ここでは試しにカラーコードを使ってさまざまな色を作り、どんな色になるかを確かめてみます。

たとえば#FFFF00の場合、黄色になります。２桁ごとに区切って # FF FF 00 と考え、赤 と 緑 が強く(FF)、青 は全くない(00) 状態です。赤と緑をだけを混ぜた結果、黄色(Yellow)になります。上の光の３原色を参考にしてください。純粋な黄色なのでとってもビビッドな感じですね。

他の色（青）を混ぜて白っぽくすると、レモンイエローのようになります。

もしこの色が気に入ったのなら、#FFFF88 をコピーしてあなたのページで使ってしまってもＯＫです（具体的な使い方は後述します）。もちろん自分で微妙にカスタマイズしてもＯＫです。

カラーコードが同じなら、コンピューターは全く同じ色を発色します。

全ての色が最小となる#000000は黒色(Black)で、全色最大となる#FFFFFFは白色(White)です。中間あたり#888888はグレー(gray)です。

このように赤緑青の差が少なくなるほど、いわゆる「無彩色」に近づきます。

オレンジを作りたいなら、赤に少し緑を混ぜると良いでしょう。#FF8800 ぐらいでしょうか。2桁ごとに区切って # FF 88 00 と考え、赤の強さが FF（最強）、緑の強さが 88（中間）、青の強さが 00（最弱）というわけです。実際の色合いは以下のようになります。

ここから数字を減らして暗くしていくと、茶色に近づきます。数字の大きさは上で説明した16進数のルールに従います。

たとえば #7ED4FF なら、2桁ごとに区切って # 7E D4 FF と考え、赤の強さが 7E、緑の強さが D4、青の強さが FF というわけです。水色のような色合いですね。

青がもっとも強く、緑が混じることで水色味が強くなります。赤も少し混じることで、彩度が抑えられ、自然な色合いになります。

純粋な緑 #00FF00 はやや明るくきつい色合いに見えがちなので、他の赤や青も混ぜて、色をなじませます。赤を多めに足すと、黄緑に近づきます。例えば #BBFFAA なら下のような感じです。

このように、赤緑青にあまり差をつけないようにすると、自然色に近づきます。自然界では様々な色が混ざり合っているからです。

全体の明るさを抑えると、暗く沈んだ色合いになっていきます。下の色合いは、カーキ色というかオリーブグリーンのような感じですね²⁾。

赤緑青の差を大きくすると、より派手で人工的な色合いになります。例えば上の色により極端な差をつけると、以下のようになります。

かなり人工的な黄緑色になりましたね。コントラストが高く、ポップな感じです。

逆に赤緑青の差を小さくすると、自然な色合いとなり、さらに差を小さくすると、上で示したような無彩色へとなっていくわけです。

ピンクを作りたいなら、紫を明るくする感じです。紫は赤と青の混合で作れるので、#FF00FF です。ここから青を少しだけ弱めて赤みを強くし、赤や青を超えない程度に緑を足して全体を明るくしていきます。#FFCCEE という感じでしょうか。

とってもピンク！😲

このように、カラーコードを使えば、さまざまな色が作り出せるというわけです。

余裕があれば、ぜひカラーコードを使いこなしてみましょう。

戻る