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ずつ増えていきます。数学的な完璧な証明はともかく、大まかにはこんな感じです。
| 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 |
