Webでの色の表し方（カラーコードを理解しよう！！）
webで色を表現するとき、カラーコード（6桁の英数字）で表現する場合がありますよね。
例えば
・ワードプレスでカスタムカラーを設定するとき、カラーコード（6桁の英数字）の入力が必要
・CSSで色を変更するとき、background-color: #〇〇××△△; と6桁の英数字を使う
この6桁の英数字がどのような色を表現しているのか？気になりませんか？
本記事では、webで色を表現するときに欠かせないカラーコードについて詳しく解説したいと思います。
・カラーコード（6桁の英数字）とは何か？
・カラーコードを変化させて実際の色を体験する
・カラーコードの他の表現方法（6桁の英数字以外）は？
・カラーコードと実際の色との関係を直感的に知るのに便利な色度座標
・カラーコードは絶対的な色でなく相対的な色を表現している
またこのほか、カラーコードやwebの配色についての関連情報は以下の記事がおすすめです。
カラーコードを直接webサイトから取得するツール
https://web-children.com/2020/10/17/colorzilla/配色技法（PCCS）について知る
ウェブチルオリジナルのPCCSトーンマップを使った配色シミュレーター
https://web-children.com/color-distribution-using-original-p...イメージからつくる15種類の配色事例
Webサイトでの色の表記（カラーコード）を知ろう
Webで色を表す＃+6桁（3桁の場合もある）の英数字をカラーコードと言います。
頭にはシャープ（＃）を付けることは決まりとして覚えておくとして、６桁（または３桁）の英数字が何を表すかを以下解説していきます。
6桁で表すカラーコード
カラーコードの6桁の英数字は次のようなルールとなっています。
- 最初の2桁は赤色、真ん中の2桁は緑色、最後の2桁は青色の光の強さを表す
（すなわち光の3原色である赤・緑・青の強さを表す） - 2桁の英数字は16進数となっていて、256段階の強さを表す
すなわち、カラーコードは光の3原色のそれぞれの強度を表すことで、3色を混ぜてできあがる色を表現することができるのです。
16進数というのは、0,1,2,3,4,5,6,7,8,9,a,b,c,d,fというように、0～fまでの16通りの英数字を使います。
1桁あたり16通りで表すことができるので2桁の16進数だと16×16=256通りになるというわけです。
赤・緑・青それぞれ256通りの強度となるので、この3色を組み合わせると、
256×256×256＝16,777,216
とカラーコードを使えば約1678万通りの色が表せるわけです。
カラーコードスライダーで色の表現を体験しよう
では実際に、赤・緑・青のスライダーを動かして、6桁のカラーコードと実際の色を体験してみましょう。
HEXというのが16進数で表したカラーコードです。
rgb（〇△×, △×〇,×〇△）は10進数の整数で表したものです。
CSS（webのデザイン言語）では、このように10進数で表すこともあるのです。
ただし、10進数だと0～256まで最大3桁必要となるので、2桁で表せる16進数の方がよく使われます。
カラーコードが3桁の場合
実はカラーコードは3桁の16進数で表す場合があります。
これは6桁のカラーコードを略したもので、6桁のカラーコード#rrggbbを3桁にすると#rgbとなります。
例えば、#a3cという3桁のカラーコードは、6桁のカラーコード#aa33ccを略したものだということですね。
ちなみに3桁の場合は、赤が０~fまでの16種類、緑と青も同じく16種類で、16×16×16＝4,096 通り の色しか表現できません。
昔のパソコン用モニターでは1680万色もの色を表現できなかったので3桁のカラーコードでも間に合っていたわけです。
ここまででwebでの色の表現方法をまとめると次のようになります。
- #+6桁の16進数で表す
（例）#ff8000 - 10進数で表す
（例）rgb(255,128,0) - #+3桁の16進数で表す（6桁を略したもの）
（例）#ff8800 を3桁の略すと #f80 となる
カラーコードで表す色を理解する
非常に多くの色を表せるカラーコードですが、例えば#f88932の色、と言われても、いったいどんな色なのかピンとこないですよね。
なんとなくでもカラーコードと色との関係を理解できるようになりたいという方には、以下の方法を紹介します。
まずは無彩色を表現する
赤、緑、青の3色を同じ強度で混ぜれば、無彩色を得ることができます。無彩色とは、黒、グレー、白のように、色味を持たない色のことですね。
同じ強度とは、#000000 とか #232323 とか、#abababのように、赤、緑、青が全く同じ強度であることです。
そこで、次の３つのことを覚えておきましょう。
・一番暗い場合（各色の強度がゼロ）のカラーコード#000000は、黒色を表示する。
・一番明るい場合のカラーコード#ffffffは、白色を表します。
・各色00とffの間の強度を選べば、グレーとなる。強度が暗いほど、濃いグレーが得られる。
上のカラーチャートは、
一番左のcolor1が黒（#000000）、
一番右のcolor6が白（#ffffff）、
その間のcolor2~color5が、#3c3c3c、#696969、#9b9b9b、#d2d2d2と段階的に強度を上げたグレーを表しています。
これを見れば、無彩色についてはよく理解できますね。
３色の混色は色度座標で把握する
次に赤、緑、青を混色させて、どのような有彩色（色味のある色）が得られるか確認してみましょう。といっても、ざっくり青と赤を混ぜれば紫色、赤と緑を混ぜれば黄色になる、というように、経験的に理解している人も多いでしょう。でも、複雑な混色はどう考えればよいか難しいですよね。
そこで、便利なのが、次のCIE色度座標です。これを見れば、赤、緑、青の光源を光らせたときに得られる色がこの図の背景色で把握できます。
赤、緑、青 と黒文字で書いているところが、各色光源の強さです。そして背景色が、その光源の強さで実現する色を表します。
具体的には、
・『赤』のところは、緑と青の強度がゼロ。したがって赤が表示される（図で背景色は赤）。
・『緑』のところは、赤と青の強度がゼロ。したがって緑が表示される（図で背景色は緑）。
・『青』のところは、赤と緑の強度がゼロ。したがって青が表示される（図で背景色は青）。
動画でも解説していますのでご覧ください。
この図をうまく使うために、次の流れで考えてみます。
（動画と同じ内容を記事内でも説明していきます）
CIE色度座標から表示色を理解する流れ１
①青、赤はゼロ、緑はフルで光らせる（すなわちカラーコードで#00ff00）
⇒図でいうと『緑』の部分です。背景色は緑色です。
（結論）カラーコード #00ff00 の色は、#00ff00（緑）
すなわち、緑をフル強度で光らせるとクリアな緑が得られる。。
②①の状態に、青はゼロのまま、赤をフル強度で加える（すなわちカラーコードで#ffff00）
⇒図で、『緑』の地点から『赤』の地点との中間点ａの背景色は黄色
（結論）カラーコード #ffff00 の色は、#ffff00（黄色）
すなわち、青と赤をフル強度で同時に光らせるとクリアな黄色が得られる。
③②の状態に、青をフル強度で加える（カラーコードで#ffffff）
⇒図で、aの地点から、『青』の地点との中間点bの背景色は白
（結論）カラーコード #ffffff の色は、白色となる。
すなわち、青と赤と緑をフル強度で同時に光らせると白色が得られる。
（別の解釈では、黄色に青を混ぜると、白が得られる）
CIE色度座標から表示色を理解する流れ２
同じ考え方で、緑光源と青光源を同時に光らせると、シアン（図でｃ地点の背景色）が得られることもわかります。
⇒カラーコード #00ffff の色は、#00ffff（シアン）
では、このシアン（#00ffff）に、少しづつ赤を混ぜていくとどうなるでしょうか？
これもCIE座標を見れば予測できます。
すなわち、ｃ地点からｂ地点に動くわけですから、
#00ffff ⇒ #33ffff ⇒ #66ffff ⇒ #aaffff ⇒ #ccffff ⇒ #ffffff（白色）
と赤の強度を増すにつれて、シアン色が薄くなり白に近づいていくわけです。
以上、ここまでカラーコードとWebで表示される色との関係を解説してきましたが、こちらの記事では、より直感的に理解できるように、色の表現のデモをしています。
クリア色だけでなくグレイッシュ色の表現も解説していますので、ぜひ参考にしてみてください。
Webのカラーコードは色味を保証しているわけではない
以上のように、カラーコードを使えば、16,777,216 通りの色が表現できる わけですが、表示される色は、あくまで相対的なものであることを理解しておく必要があります。
これはどういうことかというと、カラーコードで表す色は、絶対色ではなく、使用するモニターに依存する相対色を表しているのです。
赤、緑、青の強度をそれぞれ256段階の強度に調整した結果、得られる16,777,216通りの色、を表しているだけで、表示するモニターの色（赤、緑、青の色）が異なれば、表示される色も異なってしまう、ということですね。
例えば、音量に置き換えてみましょう。音量を、ゼロからフルボリュームまで10段階（V0、V1、V2・・・V10とします）に調整できる音響機器があったとして、
- Ａ：フルボリュームのときに10の音量が鳴るスピーカー
- Ｂ：フルボリュームのときに20の音量が鳴るスピーカー
を比較するとします。このとき、ボリュームをV2とすると、
- Ａのスピーカーからは２の音量
- Ｂのスピーカーからは４の音量
が鳴ります。同じV2というボリュームでも、違う音量が鳴るということです。
カラーコードはボリューム（V0、V１、V2・・・）に相当し、色は音量に相当します。音響機器の性能を表すフルボリュームで鳴らせる音量は、モニターで表せる色の範囲を表します。
実は、モニターで表現できる色の範囲（色域と言います）は、使用モニターや規格によって異なります。使用する光源（今は主にLED）の波長であったり、光源の光を選択的に透過させるカラーフィルターなどの性能に限界があるからです。
下の図は、sRGBというパソコン用display規格とアドビの提唱するAdobe RGB規格、テレビ標準として米国で定められたNTSC規格とで表現できる色域を表しています。
(出典：IT media NEWS『sRGBとAdobe RGBを理解する』)
CIE色度座標で、緑、赤、青で囲まれた色のついている部分は、人間が認識可能な色域の範囲を表しているのですが、パソコンのモニター等は性能上、この全色域を表すことができません。できるのは、この図で、三角形で囲まれた部分だけなのです。この三角形の中で、青の三角形がsRGBというパソコン用モニターで標準化されている規格の範囲となります。したがってカラーコードも、このsRGBを前提として設定されています。
しかしCIE色度座標を見ると、sRGBでは、かなり狭い範囲しか色を再現できないことがわかりますね。
それに対してAdobe RGB（赤の三角形）やNTSC（黄色の三角形）の方が、表現できる色域が広い（三角形の面積が大きい）ことから、表現できる色が豊富であることがわかります。パソコン用に定められたsRGB規格は、表現という目的としては物足りない規格だと言えるでしょう。
カラーコードで表す16,777,216通りの色というのは、この色域（三角形の面積）を16,777,216通りに分けて表現することになるので、色域の異なるdisplayを使用すれば、同じカラーコードでも違う色になってしまうわけです。
例えば、#00ff00で緑を表す場合、sRGB規格のdisplayの場合は青い三角形の緑の頂点の色、adobe RGB規格のdisplayの場合は赤い三角形の緑の頂点の色が表示されます。すなわち、adobe RGB規格の緑の方がより鮮やかな色となるわけです。
本来sRGBを前提にしてカラーコードは定められているので、sRGBを100%満たすモニターだけが存在すればよいはずなのですが、現実は異なります。実際sRGBを90%程度しか満たすことのできないモニターもあれば、広色域をアピールポイントにしているモニターの場合sRGB比で100%をはるかに超えるものも存在します。
特に近年は、アップルが独自に提唱しているdisplay P3のように、広色域を売りにしているdisplayが増えてきています(display P3は、2015年にMacで、2016年にiphone7で採用され始めました）。sRGB規格で物足りない表現を超えていこうとしているのです。
したがって、Webサイトの色味で与えるイメージにこだわりのあるサイトは、複数のモニターで確認しておくのがよいでしょう。
以下の記事では、外付けのBenQモニターのレビュー記事ですが、私が元々使用しているPCのモニターとの差異も書いていますので参考にしてみてください。
まとめ
もう一度カラーコードについてまとめておきます。
実際にWebサイトの配色設計をするときに、カラーコードから色味を決めることはなく、先に色味を決めてからそのカラーコードが何かを調べる、ということの方が多いでしょう。
しかし、カラーコードの各数値が何を表していて、それぞれの数値がどのように変われば色味がどのように変化するのかをイメージできるようになれば、微妙に色を変えたいときでもいろいろと試してみることができるようになります。
ぜひ、CIE色度座標を活用して、いろいろな色味を表現するヒントにしてみてください。
