ブログに横長の楽譜（1段譜）を画像で表示して弾き方などを解説する方法♪次へ >>

HTML,スタイルシート,CSSによるカラーコードと色の指定｜16進数での指定方法

2013年01月03日

HTMLやスタイルシート（CSS）などによるWeb上の色の指定方法には何通りかありますが、
ここでは広く一般的に使われている指定方法をご紹介します。

なお初心者の方のために分かりやすく書いているつもりですので、
あんまり厳密性は求めていません。

つまり、プロのデザイナーでもないかぎり、
これくらいの範囲で知っていれば十分に使えるということですね。^^

【基礎知識】色の発色の仕組み：光の三原色 - RGB

パソコンのモニターやスマホ、ケータイのディスプレイでは、
「光の三原色」と呼ばれる３つの光の組み合わせや割合によって、
実際にどんな色で発色するのかが決まってきます。

「光の三原色」とはRGB（アールジービー）ともいい、それぞれ

R・・・赤（Red）

G・・・緑（Green）

B・・・青（Blue）

を表しています。

すべての色はこのRGBの組み合わせで表現されているのです。

RGBによる一般的な色の指定方法

「光の三原色」RGBによる一般的な色の指定方法は次のように表記します。

【例：赤色の指定】

#FF0000

【解説】

#	FF	00	00
#	R(赤)	G(緑)	B(青)

「#」の横の英数字が色の値を指定している部分で、
左から２桁ずつ順に、R(赤)、G(緑)、B(青)の値となっています。

この２桁ずつの値をそれぞれ入力・調整していくことで、
最終的に発色する色を指定することができるという仕組みです。

16進数による値の指定

R(赤)、G(緑)、B(青)それぞれの値には「16進数」を使います。

【16進数とは】

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

0からFまでの16の英数字を使って数を表しています。

16個目の「F」の後のは「10」となり、
「11」、「12」、「13」・・・「1D」、「1E」、「1F」と続き、

さらに「20」、「21」、「22」・・・「2D」、「2E」、「2F」、「30」、「31」・・・
と続いていきます。

ちなみに10進数は・・・

0,1,2,3,4,5,6,7,8,9

0から9までの10の数字を使って数を表していますよね。
10個目の「9」の後のは「10」となり、「11」、「12」、「13」・・・と続くお馴染みものです。

さて、R(赤)、G(緑)、B(青)の各値の指定は2桁ですから、
最小の「00」から最大の「FF」までの値（256通り）が指定できます。

16進数による「00」から「FF」まで一覧

一見、複雑で面倒くさそうに見えますが、
単純な法則性がありますので慣れてしまえばカンタンです。

この00からFFまで256通りの16進数を使って、
R(赤)、G(緑)、B(青)の各値を指定していくことになります。

なお、A,B,C,D,E,Fは大文字でも小文字でも構いません。
表示結果はまったく同じになります。

16進数での指定による原色と色味の変化

では16進数によるRGBの指定と、実際に発色される色の関係を見ていきましょう。

原色の指定

原色の赤色は、R(赤)を「FF」に、G(緑)、B(青)の値をそれぞれ「00」にします。

#FF0000

原色の緑色は、G(緑)を「FF」に、R(赤)、B(青)の値をそれぞれ「00」にします。

#00FF00

原色の青色は、B(青)を「FF」に、R(赤)、G(緑)、の値をそれぞれ「00」にします。

#0000FF

また

原色の黄色は、R(赤)とG(緑)を「FF」に、B(青)の値を「00」にします。

#FFFF00

原色のピンク紫（マゼンタ）は、R(赤)とB(青)を「FF」に、G(緑)の値を「00」にします。

#FF00FF

原色の水色（シアン）は、G(緑)とB(青)を「FF」に、R(赤)の値を「00」にします。

#00FFFF

色味の変化

16進数によるR(赤)、G(緑)、B(青)それぞれの指定では、
「00」に近づくほど色味成分が少なくて暗く、くすんでいき、
「FF」に近づくほど色味成分が多くて明るく、鮮やかになっていきます。

【例：赤色の指定と色味の変化】※わかりやすくするため値はゾロ目にしてあります。

#000000

#110000

#220000

#330000

#440000

#550000

#660000

#770000

#880000

#990000

#AA0000

#BB0000

#CC0000

#DD0000

#EE0000

#FF0000

【例：緑色の指定と色味の変化】※わかりやすくするため値はゾロ目にしてあります。

#000000

#001100

#002200

#003300

#004400

#005500

#006600

#007700

#008800

#009900

#00AA00

#00BB00

#00CC00

#00DD00

#00EE00

#00FF00

【例：青色の指定と色味の変化】※わかりやすくするため値はゾロ目にしてあります。

#000000

#000011

#000022

#000033

#000044

#000055

#000066

#000077

#000088

#000099

#0000AA

#0000BB

#0000CC

#0000DD

#0000EE

#0000FF

また、
R(赤)、G(緑)、B(青)すべての値が「00」になると「黒」、
R(赤)、G(緑)、B(青)すべての値が「FF」になると「白」になります。

#000000

#FFFFFF

R(赤)、G(緑)、B(青)すべての値を中間の値でそろえると「灰色（グレイ）」になります。

#888888

#AAAAAA

#DDDDDD

RGBの配合で色を作る

R(赤)、G(緑)、B(青)の各値の配合を調整することで、
実際に配色する色を指定していきます。

【例】

#FFFF66

#CC88FF

#FFBB33

#33CCFF

#72A287

#C3539A

#91BF5C

#4D88D2

RGBの値をそれぞれ調整することで、
もっと微妙な色合いをたくさん作り出すことができます。

その数なんと
16,777,216色！！です。

R(赤)00～FFの256通り × G(緑)00～FFの256通り × B(青)00～FFの256通り＝ 16,777,216

16進数によるRGB指定の色見本一覧

上記のように、16進数によるRGBの指定は16,777,216通りもありますから、
表のような形で色見本の一覧を作るのはあまり現実的ではありません。

また仮に16,777,216色の色見本表を作ったとしても、
その膨大な色見本の中から自分が使いたい色を探すのもまた、非現実的ですよね。

とはいっても

何か色の参考になる見本が欲しいところだと思いますので、
次のよう色見本表をご用意しました。