「色」について

こんにちは、今日は「色」についてお話ししたいと思います

サイトを作るにあたって、サイトの印象に大きく影響する一つが「配色」ではないでしょうか?


最近では、柔らかい雰囲気の色や自然を感じさせるような色が人気のように思います

どんなサイトに仕上げるのか楽しみの一つでもありますね

参考に「WEB色見本 原色大辞典」というサイトをご紹介します

https://www.colordic.org/


さて、この「色」についてですが、コンピューター上では、「カラーコード」などで表現されます


「色」の表し方もいくつかありますが、今回は「RGB」の説明から話を進めていきます

「光の三原色」とも言われる「Red」「Green」「Blue」の頭文字をとって「RGB」と言います

この3つの色を「0〜255」までの256段階でバランスを変えて混ぜ合わせることで様々な色を表現します


全部が「0」なら「黒」、全部が「255」だと「白」に始まり、「R=255、G=0、B=0」なら「赤」、混ぜ合わせることで、「R=255、G=255、B=0」だと「黄色」となります

サンプルカラー

この方法で、「256×256×256」で「16,777,216」?

読みやすく表現すると「1,677万7,216色」表すことがでるんです!


ここまでは、「色」についての説明でしたが、ちょっと趣向を変えて、ここからコンピューター君の話に触れたいと思います


コンピューター君は、ご存知の通り「デジタル」です

コードなんかは、1文字の誤字脱字で動いてくれません

「それぐらいちょっとマケてよ〜」とか思ってしまいます(-。-;

ロボット

「青のもうちょっと濃いやつ」とか通じないので、1,677万色を正確に伝える方法が必要なんですね


そしてもう一つ、コンピューター君に伝えるデータ量に着目してみましょう!


今のパソコンのスペックで「MB」「GB」「TB」などが主流になってますが、「メガ」「ギガ」「テラ」はざっくり言うと桁数を省略しているので、ベースとなるデータの単位が「B=バイト」です


データの量としては、半角英数1文字が1バイトです

データ量についての細かい説明は、また別の機会に。。。


さて、先ほどの色の表現ですが、コンピューター君に伝えるには、私たちが普段使わないであろう「16進数」で伝えます(10進数は0から9の次に桁が上がる、16進数は0から15の次に桁が上がる)

順番に数えると「0,1,2,3…8,9,a,b,c…e,f,10,11,12…19,1a,1b…1e,1f,20…9e,9f,a0,a1…fe,ff」…わかりづらいですね


ところが、この方法を用いることで「256段階」を2桁で表すことができるんです!

(補足すると「16×16=256」)


さて、ここまでの話を全てまとめて、最後にコンピューター君に伝える「カラーコード」についてです

頭に「#」をつけて「#000000(黒)」とか「#ffffff(白)」「#3d3d3d(ライトグレー)」と言う風に表します


「#と6桁」、つまり「たったの7バイト」で「1,677万7,216色」の色を正確に伝えるのが「カラーコード」なんですね!さかなクンばりに、勝手にテンション上がっちゃいました!笑


大変長くなってしまいましたが、「1,677万7,216色」の中から皆さんのお気に入りの「色」を見つけて、素敵なサイトを仕上げましょう!


最後までお付き合いいただき、ありがとうございました!