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

2013年01月03日


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


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


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




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


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


「光の三原色」とはRGB(アールジービー)ともいい、それぞれ
RGB.gif
  • R・・・赤(Red)

  • G・・・緑(Green)

  • B・・・青(Blue)


を表しています。


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




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


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


【例:赤色の指定】
#FF0000



【解説】
#FF0000
#R(赤)G(緑)B(青)

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


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




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」まで一覧


000102030405060708090A0B0C0D0E0F
101112131415161718191A1B1C1D1E1F
202122232425262728292A2B2C2D2E2F
303132333435363738393A3B3C3D3E3F
404142434445464748494A4B4C4D4E4F
505152535455565758595A5B5C5D5E5F
606162636465666768696A6B6C6D6E6F
707172737475767778797A7B7C7D7E7F
808182838485868788898A8B8C8D8E8F
909192939495969798999A9B9C9D9E9F
A0A1A2A3A4A5A6A7A8A9AAABACADAEAF
B0B1B2B3B4B5B6B7B8B9BABBBCBDBEBF
C0C1C2C3C4C5C6C7C8C9CACBCCCDCECF
D0D1D2D3D4D5D6D7D8D9DADBDCDDDEDF
E0E1E2E3E4E5E6E7E8E9EAEBECEDEEEF
F0F1F2F3F4F5F6F7F8F9FAFBFCFDFEFF


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


この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色の色見本表を作ったとしても、
その膨大な色見本の中から自分が使いたい色を探すのもまた、非現実的ですよね。


とはいっても

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



ご参考になれば幸いです。


でわ ^^)/~



ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。