初心者大歓迎！HTMLを使って一緒にHP作成してみませんか？

　色について



　「今回はカラーコードについての説明ね。
　　　　まず　#RRGGBB　だけど、
　　　　R　は　Red（赤）、G　は　Green（緑）、B　は　Blue（青）、のことね。
　　　　この3色を使って、すべての色をあらわしていくの。」


　「赤、緑、青って・・・色の三原色ですか？」


　「ん〜、これは　光の三原色　ね。
　　　　テレビやパソコンの画面で使われているのよ。」


　「あ、そっか。
　　　　色の三原色は絵の具とかプリンターのインクとか、ですね。」


　「そうそう。これから説明していく色っていうのは　光の色　だから
　　　　間違えないようにね。」


　「う〜ん、でも何が違うんだろう？？？」


　「ピンとこないかしら？
　　　　じゃあ・・・な〜んにもない状態って、何色を想像する？」


　「う〜んと・・・白、かなぁ？」


　「ふむふむ。
　　　　じゃあ色を全部混ぜたら、何色になると思う？」


　「えっと、まっ黒になるんですよね？」


　「ふふふ。じゃあ、これを見てみて。」

　「あらら？
　　　　ぼくの思ってたのは色の三原色の方なんだ・・・。」


　「そうね。光の三原色は全部重なると　真っ白　になるのよ。
　　　　そして光がない状態は　真っ黒　よね？
　　　　この感覚を間違えないでね。」


　「はぁい。」





　カラーコードの作り方



　「まず赤、緑、青それぞれを　光の強さ　によって　256段階　に分けるの。」


　「光の強さ？」


　「そう。赤、緑、青のスポットライトを思い浮かべてごらん。
　　　　電源OFFの状態は光が一番弱い状態だから、真っ暗よね？
　　　　光が強くなるにつれて色も強くなっていくでしょう？」


　「なるほど。」


　「この光の強さを

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

　　　　の16種類を使ってあらわすのよ。
　　　　0が一番弱くて、Fが一番強いの。」


　「これで256段階もあわらせるんですか？」


　「カラーコードをもう一度見て。
　　　　#RRGGBB　ってそれぞれ2つづつになってるでしょう？
　　　　16種類の文字を使って　2桁の番号　にするのよ。」


　「16種類で2桁だから・・・ほんとだ。ちょうど256通りだ。」


　「アルファベットが入るとちょっとややこしく感じるけど
　　　　数字の延長だと思ってね。全部並べてみると・・・。」

　「こんなかんじね。
　　　　この中から光の強さの番号を選んで
　　　　#RRGGBB　に当てはめていくだけよ。」





　実際に使ってみよう



　「白、黒、青を作って見るわね。
　　　　まず白、これは赤、緑、青を　一番強い光　にして重ね合わせるの。
　　　　つまり、
　　　　赤　→　FF　　　緑　→　FF　　青　→　FF
　　　　の状態ね。これをカラーコードにあてはめると
　　　　#FFFFFF　になるの。」


　「なるほど！かんたんだぁ♪
　　　　じゃあ黒は全部一番弱い光にしたらいいから、
　　　　#000000　になるのかな？」


　「そのとおり！じゃあ青はどう？」


　「え〜っと・・・。
　　　　え〜っと・・・・・・・。」


　「真っ暗な部屋で、青いスポットライトだけつけるのよ。」


　「そっか。じゃあ青を一番強い光にして
　　　　赤と緑は電源OFFにしちゃえばいいんだ！
　　　　#0000FF　で青になるはず！」


　「そうね。よくできました。
　　　　赤なら　#FF0000
　　　　緑なら　#00FF00　で作れるわよ。」


　「なるほど〜☆」


　「これでカラーコードのしくみはわかったかしら？
　　　　でもどの色を混ぜたらどんな色になるのか、
　　　　全部覚えるのはさすがに無理ね。
　　　　カラーチャート　によく使うカラーコードを集めてあるから
　　　　参考にしてみてね☆」





↑ページのTOPへ

改行とスペース <<<　前のさるぢえへ戻る

カラーコードの計算方法 次のさるぢえへ進む　>>>

ページの背景に色をつけよう <<<　関連ページへ戻る

カラーチャート よく使うカラーコード集

サルでもわかる？かんたんHTML　トップページ 　>>>　さるぢえ集 　>>>　#RRGGBBってなに？