便利eelife TOPへ Color Room TOPへ ColorRoomトップ 便利eelifeトップ

  ホームページの色の表示のしくみ

list コンピュータはどのようにして色を表示しているのでしょうか? コンピュータには光の三原色である()、()、()の3色のみが準備されています。黄色や白、紫、といった他の色は()、()、()の三原色を組み合わせて表現します。


三原色
光の3原色 RGB

では、どのように三原色を組み合わせてさまざまの色を表示するのでしょうか?
上の右図のように ()、()、()の各色の明るさを、0〜255の256段階に分けそれぞれの色の数値を指定することにより表示します (0が一番暗く、255が最も明るい)。つまり【赤:255、緑:0、青:0】と指定すれば(赤)が表示されます。ちなみに(緑)は【赤:0、緑:255、青:0】。(青)は【赤:0、緑:0、青:255】です。さらに、【赤:255、緑:255、青:0】と設定すれば赤と緑が混ざって(黄)が、【赤:255、緑:255、青:255】とすれば三色が均等に混じって(白)になります(上左図)。各数値を【赤:0、緑:0、青:0】にすれば各色とも"0"は一番暗いので当然(黒)になります。このようにして、赤(R)、緑(G)、青(B)のそれぞれの数値を0〜255の間で指定して、あらゆる色を表示します。

list 16進カラーコ−ドで指定
Webページでは(R)、(G)、(B)個々の10進数の数値を16進数 2桁に変換して使います。 #FF00BB のように)値を16進数で2桁、計6桁で指定します。
RGB値の各数値は10進数で0〜255までの値を使い、16進法(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)の16種類の英文と数字でそれぞれ00(最小)〜FF(最大)までの6桁の組み合わせになります。そして先頭に"#"を付けて16進数であることを示します。
たとえば#CC214Dは【赤:204、緑:33、青:77】になります。・・・・CCは(12×16)+12=204、 21は(2×16)+1=33、4Dは(4×16)+13=77・・・・
ちなみに、値が大きいとその色が明るく強くなり、小さくなるほど暗く弱くなっていきます。RGBの値の差が大きいと派手な色、差が小さいと淡い色になります。
ここでいろいろ試してみましょう!!
10進数 ⇒16進数
  
16進数⇒10進数
  
色の表示 10進数
()
()
()


list 色の名前で指定
しかし16進数での色の指定では最初のうちは、直感的にどんな色か浮かばないのが当たり前でしょう。そこでもうひとつ、red、blue、yellow、blackのように色の名前で色を指定する方法があります。下記は基本16色の定義された名前です。この他にもたくさんの名前の付けられた色があります。
Red #FF0000 Lime #00FF00 Blue #0000FF Black #000000
Gray #808080 Silver #C0C0C0 White #FFFFFF Maroon #800000
Green #008000 Navy #000080 Purple #800080 Plive #808000
Teal #008080 Yellow #FFFF00 Fuchsia #FF00FF Aqua #00FFFF

カラーパレットをクリックすると背景がその色になります。



HOME | サイトマップ Copyright (C) eelife  All rights reserved リンクはご自由に