カラーコードの基本

Webデザインやソフト開発で、いつも使っているカラーコードですが、ここではその基本を確認します。現在、たいていのコンピュータでは、色の3原色である赤、緑、青のそれぞれに対して256段階の明るさを指定し、その結果、256 × 256 × 256 = 16,777,216色を取り扱えるようになっています。この1,677万色は、しばしばフルカラーと呼ばれます。

コンピュータにおいて、色を扱うときは、カラーコードを用います。HTMLやCSSにおけるカラーコードの表現は、以下のようにいくつかの種類がありますが、基本的に、RGB、すなわち赤、緑、青の順に明るさを指定します。

#rrggbb(数値が6桁)の形式では、赤緑青をそれぞれ16進数の2桁の数値で表現します。00からffで0から255までを表現できます。赤青緑は、それぞれ256段階の明るさを持ちますが、全くその色の光を発していない0から始まるので最大値は255となります。表記の桁数には注意が必要で、8のような1桁の場合は、08と記述し、各色の明るさ指定は常に2桁とします。aからfは、多くの場合は、大文字小文字のどちらでもかまいません。HTMLやCSSではどちらでも動作します。例えば、Adobe Photoshop CS5の場合も、大文字小文字どちらでも入力できます。ただし、入力後に自動的に小文字に変換されます。

rgb(r%, g%, b%)の形式では、赤、緑、青をそれぞれ10進数のパーセントで表記します。ただし、各色の明るさは256段階で管理されているので、0から100の整数だけでは表現しきれず、256段階の全てを使用するなら小数を使う必要があり、正確に0から255の値を指定しようとすると計算がやっかいです。

#rgb(数値が3桁)の形式では、赤、緑、青をそれぞれ16進数の1桁の数値で表現しますが、表現できる色数が制限されます。#123なら、#112233のように同じ数値を繰り返したカラーコードを意味します。このため、以下の表のように明るさは17ずつ増える16段階となり、#000は一番暗い黒、#fffは一番明るい白となります。17ずつというのが不自然に見えるかも知れませんが、きちんと最小は0、最大は255となります。

17ずつ増える現象を、簡単に説明します。通常使用している10進数では、100や1000から1を引くと、99や999のような数値になります。すなわち、先頭が1、残りが全て0のような数値から1を引くと、9がそろう数値になります。1を引くというのは、0から始めるために、カラーコードにおいては必要なことです。それを、100なら0、11、22、…、99、1000なら0、111、222、…、999のように使用することを意味しています。10進数で11ずつ増えていますが、16進数で17ずつ増えていきます。数学的な完璧な証明はともかく、大まかにはこんな感じです。

#rgbの数値
3桁時の1桁 16進数 10進数
0 00 0
1 11 17
2 22 34
3 33 51
4 44 68
5 55 85
6 66 102
7 77 119
8 88 136
9 99 153
a aa 170
b bb 187
c cc 204
d dd 221
e ee 238
f ff 255

JPEGファイルの色のずれ

JPEGファイル(jpgファイル)を作成すると、ノイズが発生するだけでなく、その色の領域全体において、わずかですが、色のずれが発生することがあります。どのようにずれるかを実験してみました。実験では、Adobe Photoshop CS5 Windows版で、以下のような8色(赤、緑、青、シアン、マゼンタ、黄、白、黒)が使われた画像ファイルを保存しました。JPEGファイルにおいては6種類、Photoshop CS5 Windows版の高画質、中画質、低画質とsRGBかどうかで保存しました。参考に、PNGファイルでも、sRGBかどうかの2種類で保存しました。

実験に用いた画像データ
実験に用いた画像データ

各ファイルの、赤、緑、青、シアン、マゼンタ、黄、白、黒のカラーコードを以下の表にまとめました。基本的な傾向として、

  • 最大でも3の小さな色のずれが、その色の領域全体に対して発生する。
  • 画質が低いほど色のずれが大きい。
  • sRGBかどうかと色のずれは関係がない。

という結果になりました。ただし、細かく見ると複雑な結果となっています。赤は、画質が低いほどずれが大きくなっていますが、緑は、中画質、高画質、低画質の順にずれが大きくなっています。重要で基準となりそうな色である黒でも、低画質でずれが出ている一方、白はどのファイルでもずれが発生していません。参考のために出力したPNGファイルは、全く色のずれがありません。

JPEGファイルというと、細部がつぶれたり、ノイズが入ることばかりに目が行きがちですが、領域全体の色がずれるというのはあまり気にされていのではないでしょうか。JPEGファイルを使って、色の見え方とカラーコードの両方を伝えようとする場合もあるかもしれませんが、別にカラーコードを伝えたり、PNGファイルを使用するのが良いでしょう。

保存した画像ファイルのカラーコード
形式 画質 sRGB シアン マゼンタ
オリジナル #ff0000 #00ff00 #0000ff #00ffff #ff00ff #ffff00 #ffffff #000000
JPEG 高画質 × #fe0000 #00ff01 #0000fe #01ffff #ff00fe #ffff01 #ffffff #000000
JPEG 中画質 × #fe0002 #01ff00 #0101ff #00fefe #ff01ff #ffff01 #ffffff #000000
JPEG 低画質 × #fe0002 #00ff02 #0000fd #00fffc #ff00ff #ffff00 #ffffff #010101
JPEG 高画質 #fe0000 #00ff01 #0000fe #01ffff #ff00fe #ffff01 #ffffff #000000
JPEG 中画質 #fe0002 #01ff00 #0101ff #00fefe #ff01ff #ffff01 #ffffff #000000
JPEG 低画質 #fe0002 #00ff02 #0000fd #00fffc #ff00ff #ffff00 #ffffff #010101
PNG × #ff0000 #00ff00 #0000ff #00ffff #ff00ff #ffff00 #ffffff #000000
PNG #ff0000 #00ff00 #0000ff #00ffff #ff00ff #ffff00 #ffffff #000000