発表課題 インターネット上においての色の表現 調査期間：2012年05月～06月 発表日：2012年06月07日

Presentation on theme: "発表課題 インターネット上においての色の表現 調査期間：2012年05月～06月 発表日：2012年06月07日"— Presentation transcript:

1 発表課題 インターネット上においての色の表現 調査期間：2012年05月～06月 発表日：2012年06月07日
駒澤大学 経営学部 市場戦略学科 3年 西村セミナー所属　いなほ 1

2 カラーコード RGB 16進数 カラーコード分解実験 カラーコードの分類 おまけ：セーフカラー まとめ 参考
目次 カラーコード RGB 16進数 カラーコード分解実験 カラーコードの分類 おまけ：セーフカラー まとめ 参考

3 1.カラーコード 文字色を変更するときのポピュラーなhtmlタグ を挙げてみよう。
例）<font color=”#ff0000”>文字</font> 赤字になっている部分がカラーコードである。「 red」などのカラーネームで指定することもできる。 ちなみに実際にこれを書くと、赤い文字になる。 例）文字 では、この英字と数字の羅列は何なのか？

4 2.RGB ここでまず、RGBという表現法が出てくる。赤（Red）、 緑（Green）、青（Blue）の三原色を混ぜて幅広い色 を再現する加法混色の一種である。*1 赤緑青はいわゆる光の三原色であり、液晶画面など はこの三色で表現されている。対して、色の三原色 ・シアン、マゼンタ、イエローは印刷物などに使われ る。 このRGBがコードの中に隠れているのだ。 例）#ff0000 つまり#RRGGBBというように対応している。 ではRGBの三色がなぜfやら0になるのか？

5 3.16進数 ⅰ.16進法 ここで16進法である。 普段私たちは10進法を利用している。しかし、実は他 にも60進法や100進法を使っていることには気づい ているだろうか。 1から9まで数えたら次は位が上がって10になるが、 同じように1秒から59秒まで数えたら次は1分になる し、1cmから99cmまで数えれば次は1mになるのだ 。 つまり、16進法とは1から15まで数えたら次に位が上 がる数え方であり、その数え方で表された数字が 16進数なのである。

6 3.16進数 ⅱ.アルファベットはなぜ必要か しかしカラーコードは6桁で表現しなければならない。 0～9までは良いとしても、10～15はそのまま書くわ けにはいかないのだ。 ここでアルファベットを借りる。 10をa、11をb…15をfと当てはめることで、この問題を 解決するのだ。

7 4.カラーコード分解実験(1) カラーコードの英数字は結局数字を表していたという ことがわかったところで、試しに以下の色はRGBの どの色をどれだけ出力しているのか計算してみよう 。 ■（赤）　#ff3333 ■（水色）　#33a3a3 ■（黄）　#ff950e

8 4.カラーコード分解実験(2) ここで厄介なのはもちろん16進数であることだ。「11」 と表記されていても「じゅういち」ではない。 1×16+1=17、「17」になるのである。 アルファベットにも気をつけて計算すると以下になる。 ■（赤）　#ff3333 =R(15×16+15),G(3×16+3),B(3×16+3) =255,51,51 赤系の色は、やはり赤の出力が一番大きいことが数 値からもよくわかる。

9 4.カラーコード分解実験(3) 他の2色も計算してみよう。 ■（水色） #33a3a3
=R(3×16+3),G(10×16+3),B(10×16+3) =51,163,163 ■（黄）　#ff950e =R(15×16+15),G(9×16+5),B(0×16+14) = 255,149,14

10 5.カラーコードの分類(1) 次に、各色の大まかな表し方を一覧にしてみた。 ちなみにすべて最大出力である。 下段に関しては、緑＋青＝水色、
赤＋青＝紫、赤＋緑＝黄色、と 覚えられたら使いやすいかもしれない。 #ffffff #ff0000 #00ff00 #0000ff 白 赤 緑 青 #000000 #00ffff #ff00ff #ffff00 黒 水色 紫 黄色

11 5.カラーコードの分類(2) 先ほどの一覧を参考に考えてみよう。
例えばカーキ色を使いたいとき。緑系で、水色よりは 黄色に近く、暗めの色になる。 すると、数値の大きさはG>R>B、全体的に小さめの 可能性が高い。 例）■：355e00 淡い水色が欲しいなら、#ffffffと#00ffffの間で微調整 をしてみるといいだろう。 例）■：#99ccff

12 6.おまけ：セーフカラー 昔、多くのコンピューターが同時に表示できるのが 256色に限定された時代があった。このとき提案さ れたのがセーフカラーである。*2　これを使えば、ど のブラウザでも作成者が設定したほぼその通りの 色を表示できる。 一般的なのはカラーコードのRGBそれぞれにあたる 数値を00、33、66、99、cc、ffのどれかに限定した 256色である。 ただし、2007年時点で携帯電話でさえ問題なく256色 以上を表示できたなどの事情から、徐々に利用は 減っているようである。*2

13 7.まとめ 　インターネット上の色の多くは、カラーコードで 表現されている。つまり、このカラーコードをいかに 活用するかで閲覧者に与えるイメージはがらりと変 化させられるし、他者に差をつけて印象を残すこと もできる。 今回は残念ながら実際の色の使い方にまで迫る ことはできなかったが、カラーコードだけに焦点をし ぼったことでむしろ面白い考え方ができたように思 う。 13

14 8.参考・他 *1：Wikipedia 原色(2012/6/4) *2：Wikipedia ウェブカラー(2012/6/4)
*2：Wikipedia ウェブカラー(2012/6/4) %AB%E3%83%A9%E3%83%BC ※（）内は参照日付である。 14