カラーコードで色の表現デモ（クリア色～グレイッシュ色まで欲しい色を出すには？）
Webでは16進数で表す6桁の数字で色を表します。それぞれ、赤・緑・青の光の強度を表す、ということまでは知っていても、欲しい色をカラーコードで表すのは難しいですよね。
例えばカラーコード#aaffffがどんな色を表示するのか、なんて、どう想像すればいいのでしょうか？
そこで本記事では、カラーコードを入力して色を表現するデモにより、カラーコードから実際の色を想像する方法を解説します。
カラーコードにどんな数字を使えば欲しい色を表現できるか、想像できるようになるでしょう。
カラーコードについて簡単におさらい
カラーコード
カラーコードはWebで色を表現するのに使う、＃+（6桁の数字）です。ここで使う数字は、16進数を使います（0,1,2,3・・・9,a,b,c,d,e,fの16通り）。
カラーコードについては、こちらの記事で詳細に解説していますので参考にしてみてください。
https://web-children.com/2019/08/06/lets-understand-color-co...ここでぜひ頭に入れておきたいことは、カラーコードは赤・緑・青の光の3原色それぞれの比率を表しているに過ぎないということです。そして色は、その比率の結果決まっている、というわけですね。
CIE色度座標
一方で、赤・緑・青の光の3原色を使って表現できる色を表したものに、CIE色度座標というものがあります。赤・緑・青それぞれを頂点に置いた三角形の中に、それぞれの強度に応じて決まる色を表現したものです。
Webというのは、パソコンやスマホのモニター画面で表示させますが、モニターに使われる液晶ディスプレイなどでは、赤・緑・青の光の3原色を微小なエリアごとに発光させて混色させ、画像を表現しています。
したがって、赤・緑・青それぞれの光強度でどのような色を表すかを示す、CIE色度座標というものを使えば、カラーコードで表現する色を理解しやすいというわけです。カラーコードも赤・緑・青の比率を表したものだからです。
ここではよく理解できなくても、次のデモをご覧頂ければわかりますので、こういうものがあるんだな、レベルで次に進みましょう。
ワードプレスのテーマカスタマイザーでカラーコードデモ
クリアカラーを表現する
さっそくですが、次の動画をご覧ください。ワードプレスのテーマカスタマイザーを使って、色の変化を確認していきます。
動画内では、ワードプレスのテーマカスタマイザーでヘッダーの色を変化させます。カラーコードを打ち込んで色を変化させますが、実際に表示される色と色度座標との関係に注意してご覧ください。
以下は動画の要点解説です。
白色（＃ｆｆｆｆｆｆ）
デモでは、ワードプレスのテーマカスタマイザーで、カラーコードを入力してヘッダーの背景色を変えています。またそのときの色が、色度座標でどこに相当するかも右側に提示しています。
まずは、白色の場合です。白色はカラーコードで＃ｆｆｆｆｆｆで表します。
赤・緑・青それぞれが、フル強度であるｆｆで点灯しているわけですから、CIE色度座標で、三角形の中心部の色である白を表すわけです。
黄色（＃ｆｆｆｆ００）
では、白の状態（赤・緑・青がフル点灯）の状態から、青だけ消灯して＃ｆｆｆｆ００としてみましょう。
CIE色度座標では、青の成分がなくなるので、三角形の中心（ｂ点）から青の反対側へ移動してａ点の色となります。すなわち黄色になることがわかります。
黄緑色（＃ａａｆｆ００）
では赤と緑がフル点灯状態の黄色から、赤の強度をｆｆからａａに少し落としてみます。カラーコードでは＃ａａｆｆ００です。
CIE色度座標では、赤の強度を落とすので、黄色（ａ点）から赤とは反対側に移動します。ただし、赤は完全に消灯していないので、緑までいかずにａ点と緑の間の黄緑色となります。
薄い黄緑色（＃ａａｆｆ８８）
では、黄緑色の状態から、青の強度を上げていくとどうなるでしょうか？青を強度ゼロ（００）からフル点灯の半分程度の強度である８８としてみます。カラーコードは＃ａａｆｆ８８です。
CIE色度座標では、黄緑色の地点から、青に向かって移動します。青の強度はフルの半分程度なので、赤～ｃ点の線までの半分の地点である薄い黄緑色となるわけです。
薄いシアン色（＃ａaｆｆｆｆ）
ではさらに青の強度を上げて、青をフル点灯させてみます。カラーコード＃ａａｆｆｆｆです。
CIE色度座標では、先ほどよりもさらに青に近づき、赤の反対側であるb～cの地点まで移動します。このあたりの色は薄いシアン色ですね。
シアンブルー（＃００ｆｆｆｆ）
では、この状態（薄いシアン色）から、赤を完全に消灯しましょう。カラーコードは＃００ｆｆｆｆです。
CIE色度座標では、薄いシアン色から赤から反対側のｃ点となります。シアンブルーです。
このように、赤・緑・青の強度をカラーコードで表したときに、CIE色度座標と照らし合わせれば、それがどのような色となるのかがわかりますね。
グレイッシュ系を表現する
では、グレイッシュ系の色はどのように考えればよいでしょうか？デモ動画を見てみましょう。
実は、グレイッシュ系の色を表現するようなCIE色度座標はないのですが、デモで説明しているように、色度座標全体がグレー色になると考えればあとはクリア色と同じです。
淡いグレー（＃ｃｃｃｃｃｃ）
グレーは、色相（色のこと）を持たないので、赤・緑・青を同じ強度にすれば表現できます。
あまり暗いグレー基調とすると色相をつけてもわかりにくいので、淡いグレーである＃ｃｃｃｃｃｃをカラーコードとしてみましょう。
CIE色度座標では、どの色もフル点灯ではないので三角形の中心部（ｂ点）は白にならず、淡いグレーとなります。すなわち、CIE色度座標全体が、淡いグレーで覆われている、と考えればよいでしょう。
渋い黄色（＃ｃｃｃｃ００）
では、淡いグレーの状態から、青の強度をゼロとしてみます。カラーコードでは＃ｃｃｃｃ００です。
CIE座標では、クリアカラーのときに＃ｆｆｆｆ００が黄色になったのと同じ動きをします。すなわち、b点を起点に、青とは反対方向へ移動してa点となります。しかし、今回は黄色でなく、渋い黄色（淡くグレイッシュがかった黄色）となります。
渋い黄緑色（＃ａａｃｃ００）
では、渋い黄色の状態から、赤色の強度を少し落とします。ｃｃからａａへ落としてみます。
CIE色度座標では、赤とは反対の方向へ移動して、クリアカラーでいうと黄緑色となります。今回はグレイッシュがかっているので、渋い黄緑色（グレイッシュな黄緑色）となります。
このように、赤・緑・青の各強度を調整することで色相を表現する場合、
- 白色（＃ｆｆｆｆｆｆ）をベースにすればクリア系の色
- ＃ｃｃｃｃｃｃなどのグレー色をベースにすれば、グレイッシュな色
を表現できることがわかりますね。
より強いグレイッシュにしたければ、＃ｃｃｃｃｃｃでなく、＃ａａａａａａ、＃９９９９９９と光強度を落とした濃いグレーをベースにすれば表現できることも簡単に想像できるでしょう。
まとめ
ワードプレスのテーマカスタマイザーでカラーコードを変化させて、ヘッダーの色を変化させてみました。
カラーコードを変化させること＝赤・緑・青の強度を変化させる
ということになりますが、これは、Ｗｅｂ表示に使うモニター画面の赤・緑・青の光強度を変化させることとなり、その色はCIE色度座標を使えば、容易に想像できるようになります。
また、本来CIE色度座標ではグレイッシュ系の色は表現できませんが、光強度全体が下がって色度座標全体がグレイッシュに覆われると考えれば、グレイッシュ系の色も同じように考えることができます。
Webで配色を考える現場においては、実際にはすでに存在するWebサイトや配色見本などから使う色を選択することが多いでしょう。
しかし、すでに存在する配色見本をベースに独自の配色へとアレンジしたいとき（例えば、同じグレイトーンでも、もう一段淡い色が欲しい、など）に、カラーコードをどう変化させればどんな色を生み出せるかを想像できれば、より自由に配色を表現できるのではないでしょうか。
