カテゴリー: クリエイティブ

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