CSS講座

色の指定方法

一般的な色の知識

パソコンで表示される色は、「光の三原色」によって表されています。これは、赤（R）・緑（G）・青（B）の３色のことです。

赤・緑・青 （光の三原色）

私は、特別色に関して詳しいわけではないので、難しい話はしません。とりあえず、「RGBの三色の光をさまざまな分量で混ぜることで、違った色を作り出せる」と覚えておいていただければ結構です。

RGBとは別に、CMY(K)という色の表し方もあります。こちらは、シアン・マゼンタ・イエロー（・ブラック）で色を表します。黒は、CMYの３色を混ぜることで作り出すことができるのですが、この方法では、完全な黒を作ることができないため、補助役の色として４番目に黒（blacK）があります。要するに、こちらは色の三原色。

CSSでの色表現

CSSには、色を表現する方法がいくつかあります。

  1. RGBカラーコードによる指定（16進）
  2. RGBカラーコードによる指定（10進）
  3. RGBカラーコードによる指定（パーセント）
  4. カラーネームによる指定

１つ目のRGBを16進で表現する方法が一般的に使われています。まずはサンプルを見てください。

color: #fa643f;

上のサンプルソースはデタラメに書いたので、分かりにくい数字かもしれませんが、

  • 赤 ⇒ fa
  • 緑 ⇒ 64
  • 青 ⇒ 3f

のように対応しています。（RGBの順になっています。）

R・G・B の３色それぞれが、ff とか 44 のように、同じ数字が連続したコードの場合は、以下のようにコードを簡略化して記述することができます。

background: #2266ff; ⇒ background: #26f;

ただし、RGBの３つとも連続した数字のコードでなければ、簡略化表記を行うことはできません。つまり、以下のようなコードは簡略化できません。

background: #2260ff; ⇒ background: #260f;

２つめのRGBを10進（0～255）で表現する方法は、以下のように使用します。

color: rgb(255, 0, 112);

多分、説明は要らないでしょう。カッコの左から、赤, 緑, 青の順番に記述します。

３つめのRGBをパーセントで表現する方法は、２番目とほぼ同じ書き方をします。

color: rgb(50%, 50%, 100%);

この指定方法も、左から赤, 緑, 青の順番に記述します。

パソコンでは、赤・緑・青をそれぞれ0～255の256通りの明るさに分割して、表現しています。つまり、256（赤）×256（緑）×256（青） = 16,777,216 通りの色を表現できるということです。実際、目で違いを確認できる色数はもっと少ないでしょうけど。ちなみに、255は16進では ff と表すことができます。

ちょっと話が変わりますが、WEBセーフカラーについて説明しておきましょう。WEBセーフカラーと呼ばれる 216色 が存在しています。

これらの色には、規則があります。いくつかサンプルを載せます。すぐに気が付くと思います。

  • #ff6600 (#f60)
  • #003399 (#039)
  • #3333cc (#33c)
  • #ffcc66 (#fc6)
  • #336699 (#369)

上のサンプルを見れば気が付くことですが、WEBセーフカラーは 「00 33 66 99 cc ff」の組み合わせで表される色のことです。

なぜ、これらの色がWEBセーフカラーと呼ばれるか。理由は、（Windows 95など）古いパソコンは256通りの色しかディスプレイに表示することができなかったことにあります。WEBセーフカラーは、256色ディスプレイで表現することができる色のことです。（256 - 216 = 40色 ・・・ 残りの40色は・・・256色の環境でも正常に表示できるはずですが・・・気にしないこと。）

ただし、今は 16bit（65,536色）もしくは 24bit（16,777,216色）の色を表現できる環境が一般的です。したがって、WEBセーフカラーを意識する必要性は無くなってきているでしょう。（あまり必要性は無いのですが、一応説明しておきました。）

次に、カラーネームによる指定について、説明します。

カラーネームとは、 white、blach、green、gray、red、yellow、pink ・・・ などの色の名前のことです。書き方は、以下のようになります。

color: blue;

カラーネームは、140色あります。・・・でも、一覧表を作るのがめんどくさい＆あまり需要が無いので、このサイトでは紹介しません。他サイトを参照してくださいm(__)m

色表現方法の比較

表現方法を変えて、同じ色を表してみましょう。

以下の表現は、いずれも「黒」を表しています。

  • color: #000000;
  • color: #000;
  • color: rgb(0, 0, 0);
  • color: rgb(0%, 0%, 0%);
  • color: black;

以下の表現は、いずれも「白」を表しています。

  • color: #ffffff;
  • color: #fff;
  • color: rgb(255, 255, 255);
  • color: rgb(100%, 100%, 100%);
  • color: white;

では、ちょっと違った色を表してみましょう。

  • color: #8b4513;
  • color: rgb(139, 69, 19);
  • color: rgb(54.7%, 23.3%, 7.8%);
  • color: SaddleBrown;

ただし、パーセントによる指定では、正確な色を表すことができません。

CSSの色指定 - まとめ

CSSには、いくつかの色を表現する方法が用意されています。一般的に、使用されているのはRGBカラーコードによる指定（16進）です。

理由は・・・おそらく、

  • 短い記述で済む（括弧や、コンマなどを使用しない）
  • どんな色でも正確に表せる

ということでしょう。

ただし、ちょっとしたデメリットもあります。それは、16進数表記が直感的に理解しにくいということです。

しかし、これを解消してくれるツールが世の中には存在しています。オススメはColor Cop（英語）。

この他にも、同じような機能を持ったツールは多く存在しています。自分の気に入ったものを使用すれば良いでしょう。

ちなみに、このホームページを作成するのに使用しているエディタ、ez-HTMLにも簡単な色挿入機能を備えています。GIMPやInkscapeにも16進数の色表記に対応しています。