ホーム » 色彩の基本知識 » ウェブデザインで使われる色の指定方法

ウェブデザインで使われる色の指定方法

ウェブデザインで色を変更する場合には、数値で色を指定しなければなりません。その色の指定方法を説明しています。

16進数による色の指定

パソコンで表現出来る全ての色は、赤(R)・緑(G)・青(B)の発光する強さの組み合わせによって作られています。この3色はそれぞれ0から255の256段階で変えることが出来ますので、256の3乗ということで、16,777,216色が使える色数となります。

ではこれをどのように表現するのかというと、6桁の16進数の数字で表すことで、色を指定することが可能です。16進数とは16で位が一つ上がるので、私たちがいつも使っている10進数とは違った表現になります。

10進数と16進数の対応表
10進数 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
16進数 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12

16進数ではFFというのが255となり、6桁のうち前から2桁ずつ赤・緑・青の順で、発光する強さを表します。それらが全て最も強く光ると白が作られます。この白はFFFFFFとなるわけですが、その前に16進数であることを表す#(ハッシュと読む)の記号が付けられ、#FFFFFFとなります。逆に全く光っていない状態の黒は#000000となります。このような数字をRGB値などと呼びます。

16進数によるRGB値の例いくつか基本的な色で例を挙げておくと、#FF0000は最初の2桁である赤だけが最大限光っている状態になりますので、鮮やかな赤が表示されます。#A4CFDEですと、赤がA4、緑がCF、青がDEとなり、くすんだ水色が出来上がりました。

なにやら難しい感じもしますが、多くのソフトでは16進数を意識せずに色を選べるようになっているので、心配はありません。ただウェブや本などに掲載されている配色サンプルや筆者が提供している「配色ツール」、実際のウェブページを構築しているHTMLやCSSなどでも、ほとんどの場合にこの数値で色が指定されています。

#のついた6桁の数字が色指定であることを知っておくことで、ブログなどのテンプレートのHTMLやCSSのようなものでも、どこを変えればよいかわかるようにもなりますので、表現方法だけは知っておくようにしましょう。

また他にも色指定の方法はいくつか存在しますが、この表記方法だけを知っておけば十分です。

色を作るツール

Photoshopのカラーピッカーホームページ・ビルダーやBiND for WebLiFE* 3などのホームページを作るツールや、PhotoshopやFireworksなどの画像を加工するツールには、必ず色を指定するツールが付いてきますが、そのような物を使わずにサイトを製作する場合や、重いソフトを立ち上げずにもっと簡単に色を選びたいという場合もあるでしょう。

FE - Color Paletteそのような時には、フリーソフトを利用するとよいでしょう。様々なものがありますが、筆者はフィールドイーストの提供しているFE Color Paletteというソフトを利用しています。

投稿日時: 2010年07月12日 22時49分
カテゴリー： 色彩の基本知識 | コメントはまだありません »
タグ： , ,

Trackback :

Twitter iconこの記事をTwitterでつぶやく

関連記事

何かコメントがあればどうぞ

▲このページの先頭に戻る