ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

※2020年10月に簡単な解説動画も追加しました。

 

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

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

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

 

まずは動画でも解説していますので、動画をご覧ください。

 

6桁で表すカラーコード

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

そして、それぞれの色の強度を、2桁の16進数で表します。すなわち6桁のカラーコードは次のような構成となっているのです。

 

光の強度を16進数で表す、というのは、慣れないとなんだか難しく感じますが、ようは、16段階の強さを1桁で表します。

普段我々が使い慣れている10進数だと、1桁で10段階の強度(0,1,2・・・9の10段階)しか表せないですよね。

 

それが16進数だと、0、1、2・・・9のあとはアルファベットのa、b、c・・・fまでの16段階を表すことができるのです。

 

もしカラーコードが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 と3桁で表す場合があります。これは、6桁のカラーコード#rrggbbを略したものです

例えば、#a3cという3桁のカラーコードは、6桁のカラーコード#aa33ccを略したものです。

 

ちなみに3桁の場合は、赤が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(白色)

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

 

 

以上、ここまでカラーコードとWebで表示される色との関係を解説してきましたが、こちらの記事では、より直感的に理解できるように、色の表現のデモをしています。

クリア色だけでなくグレイッシュ色の表現も解説していますので、ぜひ参考にしてみてください。

 

 

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

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

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

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

 

例えば、音量に置き換えてみましょう。音量を、ゼロからフルボリュームまで10段階(V0、V1、V2・・・V10とします)に調整できる音響機器があったとして、

  • A:フルボリュームのときに10の音量が鳴るスピーカー
  • B:フルボリュームのときに20の音量が鳴るスピーカー

を比較するとします。このとき、ボリュームをV2とすると、

  • Aのスピーカーからは2の音量
  • Bのスピーカーからは4の音量

が鳴ります。同じV2というボリュームでも、違う音量が鳴るということです。

 

カラーコードはボリューム(V0、V1、V2・・・)に相当し、色は音量に相当します。音響機器の性能を表すフルボリュームで鳴らせる音量は、モニターで表せる色の範囲を表します。

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

下の図は、sRGBというパソコン用display規格とアドビの提唱するAdobe RGB規格、テレビ標準として米国で定められたNTSC規格とで表現できる色域を表しています。
(出典:IT media NEWS『sRGBとAdobe RGBを理解する』)

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

 

 

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色度座標も活用して、いろいろな色味を表現するヒントにしてみてください。

 

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

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

 

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる