Web-Children > blog > テクニカル > 配色技法 > Webでの色の表し方(カラーコードを理解しよう!!)

Webでの色の表し方(カラーコードを理解しよう!!)

ホームページにおいては、どのような配色を使うかで、そのサイトの印象がガラっと変わりますよね。例えば、堅実さを表したいときには寒色系(ブルー系)、親近感を表したいときには暖色系(赤やオレンジ系)を使う、などのように言われていたりします。

そんなWebサイトの印象づけにおいて重要な配色ですが、ワードプレスを使って色を選ぶ場合でも、#f401a3などのように、♯+6桁の英数字で色が表記されていることに気づいたことがあるでしょう。でもカラーパレットを使うから詳しいことは知らない、という人も意外に多いのではないでしょうか。

そこで、ここでは、Webで使われている色の表記方法について解説します

 

 

Webサイトでの色の表記(カラーコード)を知ろう

Webで色を表す#+6桁(3桁の場合もある)の英数字をカラーコードと言います。

頭にはシャープ(#)を付けることは決まりとして覚えておくとして、6桁(または3桁)の英数字が何を表すかを知っておきましょう。

 

6桁のカラーコードの場合は、#rrggbbとも表すこともあるのですが、最初の2桁は赤、真ん中の2桁は緑、最後の2桁は青のそれぞれの色の強さを表します。すなわち、光の3原色である赤、緑、青の強度で色を表すわけですね。

そして、それぞれの色の強度を、2桁の16進数で表します。16進数と聞くとなんだか難しく感じますが、普段我々が使い慣れている10進数と比較してみれば、理解しやすいのではないでしょうか?

 

もしカラーコードが10進数ならば

10進数の場合は、使う数字は小さい順から0、1、2、3、4・・・・9 と全部で10種類ですよね。なので、もし、2桁の10進数で色の強度を表すならば、

(1の位が10種類)×(10の位が10種類)=100通り となります。

赤、青、緑がそれぞれ100通りなので、100×100×100=1,000,000 通りの色を表現できることになります。非常に多いように感じますが、写真などの色を再現しようとすると、全く不足しているわけです。

 

16進数で表されるカラーコード

これに対して、16進数の場合は、0、1、2・・・・9の次はアルファベットに変わって、a、b、c、d、e、f まで全部で16種類になります。なので、16進数で2桁で表せる色の強度は、

(1の位が16種類)×(10の位が16種類)= 256通り となるわけです。

 

これが、3色分あるので、Webで6桁のカラーコードで表せる色表記は、

(赤が256通り)×(緑が256通り)×(青が256通り)= 16,777,216 通り の色が表せることになります。

 

ちなみに、3桁のカラーコードの場合は、#rgb となるので、赤が0~fまでの16種類、緑と青も同じく16種類で、16×16×16=4,096 通り の色となります。

 

 

カラーコードで表す色を理解する

非常に多くの色を表せるカラーコードですが、例えば#f88932の色、と言われても、いったいどんな色なのかピンとこないですよね。

 

そこで、例えばHTMLカラーコードといったサイトを使えば、表記される色とカラーコードとの関係を簡単に知ることができますので、使ってみるとよいでしょう。

 

でも、なんとなくでもカラーコードと色との関係を理解できるようになりたいという方には、以下の方法を紹介します。

 

 

まずは無彩色を表現する

赤、緑、青の3色を同じ強度で混ぜれば、無彩色を得ることができます。無彩色とは、黒、グレー、白のように、色味を持たない色のことですね。

同じ強度とは、#000000 とか #232323 とか、#abababのように、赤、緑、青が全く同じ強度であることです。

 

そこで、次の3つのことを覚えておきましょう。

・一番暗い場合(各色の強度がゼロ)のカラーコード#000000は、黒色を表示する。
・一番明るい場合のカラーコード#ffffffは、白色を表します。
・各色00とffの間の強度を選べば、グレーとなる。強度が暗いほど、濃いグレーが得られる。

gray-chart

上のカラーチャートは、

一番左のcolor1が黒(#000000)、
一番右のcolor6が白(#ffffff)、
その間のcolor2~color5が、#3c3c3c、#696969、#9b9b9b、#d2d2d2と段階的に強度を上げたグレーを表しています。

これを見れば、無彩色についてはよく理解できますね。

 

3色の混色は色度座標で把握する

次に赤、緑、青を混色させて、どのような有彩色(色味のある色)が得られるか確認してみましょう。といっても、ざっくり青と赤を混ぜれば紫色、赤と緑を混ぜれば黄色になる、というように、経験的に理解している人も多いでしょう。でも、複雑な混色はどう考えればよいか難しいですよね。

CIE座標
CIE色度座標

そこで、便利なのが、右のCIE色度座標です。これを見れば、赤、緑、青の光源を光らせたときに得られる色がこの図の背景色で把握できます

赤、緑、青 と黒文字で書いているところが、各色光源の強さです。
・『赤』のところは、緑と青の強度がゼロ。したがって赤が表示される(図で背景色は赤)。
・『緑』のところは、赤と青の強度がゼロ。したがって緑が表示される(図で背景色は緑)。
・『青』のところは、赤と緑の強度がゼロ。したがって青が表示される(図で背景色は青)。

となっています。

 

この図をうまく使うために、次の流れで考えてみます。

CIE色度座標から表示色を理解する流れ1

①青、赤はゼロ、緑はフルで光らせる(カラーコードで#00ff00
⇒図で、『緑』の部分の背景色は緑色
⇒カラーコード #00ff00 の色は、#00ff00(緑)

すなわち、緑をフル強度で光らせるとクリアな緑が得られる。。

 

②①の状態に、青はゼロのまま、赤をフル強度で加える(カラーコードで#ffff00
⇒図で、『緑』の地点から『赤』の地点との中間点aの背景色は黄色
⇒カラーコード #ffff00 の色は、#ffff00(黄色)

すなわち、青と赤をフル強度で同時に光らせるとクリアな黄色が得られる。

 

③②の状態に、青をフル強度で加える(カラーコードで#ffffff
⇒図で、aの地点から、『青』の地点との中間点bの背景色は白
⇒カラーコード #ffffff の色は、白色となる。

すなわち、青と赤と緑をフル強度で同時に光らせると白色が得られる。
(別の解釈では、黄色に青を混ぜると、白が得られる)

 

CIE色度座標から表示色を理解する流れ2

同じ考え方で、緑光源と青光源を同時に光らせると、シアン(図でc地点の背景色)が得られることもわかります。
⇒カラーコード #00ffff の色は、#00ffff(シアン)

 

では、このシアン(#00ffff)に、少しづつ赤を混ぜていくとどうなるでしょうか?
これもCIE座標を見れば予測できます。すなわち、c地点からb地点に動くわけですから、
#00ffff ⇒ #33ffff ⇒ #66ffff ⇒ #aaffff ⇒ #ccffff ⇒ #ffffff(白色)

赤の強度を増すにつれて、シアン色が薄くなり白に近づいていくわけです。

 

 

色度座標+無彩色の表現 で全ての色が理解できる(グレイッシュ系の色表現)

CIE色度座標は、3色混ぜた場合に白色となっていることから、各光源の明るさはフル強度がベースとなっています。
(無彩色の表現でもわかるように、フル強度で光らせないと、白は得られずグレーとなる)

すなわち、カラーコード#ffffff であるCIE座標センターの白色 を起点として、
そこから、どの色を弱めるか、で色を表現しているといってよいでしょう。ただしこの場合、グレイッシュ系の色は表現できません。

 

もし、グレイッシュ系の色を作りたければ、無彩色の表現 でわかったように、#ffffffではなく、#aaaaaaとか#999999のように、光源の強度を弱めてCIE座標のセンター色をグレーにすれば、欲しい色が得られることが理解できますね。

 

例えば、c地点からb地点へのシアンベースの色を例に取ると
(光源強度フルの場合)
#00ffff ⇒ #33ffff ⇒ #66ffff ⇒ #aaffff ⇒ #ccffff ⇒ #ffffff(白色)

(光源強度33%減の場合)
#00aaaa ⇒ #22aaaa ⇒ #44aaaa ⇒ #66aaaa ⇒ #88aaaa ⇒ #aaaaaa(グレー)

(光源強度66%減の場合)
#005555 ⇒ #115555 ⇒ #225555 ⇒ #335555 ⇒ #445555 ⇒ #555555(グレー)

 

のようになるわけです。

 

Webのカラーコードは色味を保証しているわけではない

以上のように、カラーコードを使えば、16,777,216 通りの色が表現できる わけですが、表示される色は、あくまで相対的なものであることを理解しておく必要があります。

これはどういうことかというと、カラーコードで表す色は、絶対色ではなく、使用するモニターに依存する相対色を表しているのです。

 

赤、緑、青の強度をそれぞれ256段階の強度に調整した結果、得られる16,777,216通りの色、を表しているだけで、表示するモニターの色(赤、緑、青の色)が異なれば、表示される色も異なってしまう、ということですね。

実は、モニターで表現できる色の範囲(色域と言います)は、使用モニターや規格によって異なります。使用する光源(今は主にLED)の波長であったり、光源の光を選択的に透過させるカラーフィルターなどの性能に限界があるからです。

 

displayによる色域の違い
(出典:ITmedia NEWS)

右の図は、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を使用すれば、同じカラーコードでも違う色になってしまうわけです。

 

本来sRGBを前提にしてカラーコードは定められているので、sRGBを100%満たすモニターだけが存在すればよいはずなのですが、現実は異なります。実際sRGBを90%程度しか満たすことのできないモニターもあれば、広色域をアピールポイントにしているモニターの場合sRGB比で100%をはるかに超えるものも存在します。

特に近年は、アップルが独自に提唱しているdisplay P3のように、広色域を売りにしているdisplayが増えてきています(display P3は、2015年にMacで、2016年にiphone7で採用され始めました)。sRGB規格で物足りない表現を超えていこうとしているのです。

 

したがって、Webサイトの色味で与えるイメージにこだわりのあるサイトは、複数のモニターで確認しておくのがよいでしょう。

 

まとめ

Webにおける色の表現であるカラーコードと、カラーコードと実際の色との関係について解説してきました。

実際にWebサイトの配色設計をするときに、カラーコードから色味を決めることはなく、先に色味を決めてからそのカラーコードが何かを調べる、ということの方が多いでしょう。

しかし、カラーコードの各数値が何を表していて、それぞれの数値がどのように変われば色味がどのように変化するのかをイメージできるようになれば、微妙に色を変えたいときでもいろいろと試してみることができるようになります。

 

ぜひ、CIE色度座標も活用して、いろいろな色味を表現するヒントにしてみてください。

 

最後に、以下のように簡単にカラーコードについてまとめておきます。

カラーコードと色の表示方法

 

関連記事はありません