色には大きさがある

一番大きな色と一番小さな色はなんでしょう?
サトウ、またわけのわからないことを言っていますが、もちろん、本来、色には大きさなんてありません。
でも、コンピュータの世界では、色を大きさで表現しています。
ExcelやWordでは、この色いいなあと選ぶとその色になるのですが、RPAやWebのことをするときにはその色の大きさで指定しなければなりません。

色の大きさ

一番大きな色は白です。これ以上明るくない色が最高です。
逆に一番小さな色は黒です。全く明るくない、明るさ要素0なので、黒は値0です。これ以上低い数値になってマイナスになったりはしません。

色の種類

コンピュータでの色の種類は3種類です。
赤、緑、青です。Red、Green、Blueの頭文字をとって、RGBと呼ばれます。
真緑と真っ赤を比べると、赤の方が大きいです。真っ青と緑青と比べると、真緑の方が大きいです。
それぞれの色の明るさを指定するのですが、Webでは一色につき0から255の256段階で表します。
一番の青は255です。それに対し、一番の緑は65280です。一番の赤は16711680です。
なぜこんなに値が違うのでしょう。
青は、0~255そのままで表します。
緑は、0~255に256をかけ合わせます。
緑と青で見てみると、青は256をかけられているので、256おきになります。その間に最大255の緑要素が入るのです。
1段階の青と緑が合成された色は、青1×256+緑1なので、257になります。とても黒に近い色ですが。
このように色は赤、緑、青の合成色のうち、それぞれの色の明るさを足して求めているのです。
赤は、0~255に緑のぶんの256をかけ、さらに青の分の256をかけ合わせます。
このような違う要素をこのような段階で表すテクニックはコンピュータでは結構あります。
小学校の生徒管理をExcelでする時に、1クラス40人であれば、クラスに40をかけて、それがさらに1学年3クラスで、3をかけて、全6学年なので6をかけて、その行に入力していけば、1行1行に学年とクラスを記入しなくてもそれが、何年何組の生徒かわかるわけです。

色は16進数で表す

Webでは、数値を16進数で表します。
我々使っているのは10進数で、10になったら桁が上がります。
それに対し、16進数は16を超えたら桁が上がります。0から9までは普通なのですが、その後はAから始まるアルファベットで最後はFです。
Fまで行ったらGにはならずに桁が上がります。
十進数の16は16進数ではFで、17は10です。
コンピュータでは、色は、16進数で表すと0からFFFFFFと最大6文字で表現できます。
16進数になると色の管理も楽になります。
2文字ずつFF FF FFと分けて、最初の2文字は赤、真ん中の2文字は緑、最後の2文字は青です。
紫は赤と青の合成なので、FF00FFとなります。
黄色は赤と緑の合成なのでFFFF00です。

水色って青のもっと明るい色なんじゃないの?

水色を考えると、真っ青よりも明るいです。というと真っ青よりも明るくなるんじゃないかと思うのです。
真っ青は255。しかし、青の最高レベルも255で、これ以上明るくならないのです。
さて、水色はパソコンで表現できないのでしょうか?
実は水色は、真っ青から、赤や緑のレベルも上げることによって、明るくして表現していきます。
青は255として、赤と緑を100くらいにすると全体的に白に近くなるので、水色になります。
ピンクも同じで表現できます。
灰色は、赤、緑、青を同じレベルにすることで表現できます。

こういうことってどうやって覚えるの?

こんなことって、みなさんどうやって覚えていますか?
おそらく勉強だけでは実感できないのかなと思っています。
実際にWebページの色設計を自分でやってみたりでしょうか。
私は、高校生の頃(まだ昭和でしたね)にゲームのプログラムをしながら覚えました。
いろいろな覚え方があると思いますが、Webページやプログラムなどでぜひ実践していただけたらと思います。

サトウヨシヒロ

Excelを中心としたMicrosoft Officeの魔法使い。
仙台市在住のフリーランスのパソコンインストラクターです。
1969年1月生まれ。
Excelを黎明期から30年近く使っています。Wordも使えます。
出版社様と一緒にExcelの情報発信もしています。
最近は羊に夢中です。
2019年はRPAと業務効率化を勉強しています。

Twitterでも業務で使える便利なOffice技をめっちゃつぶやくツイッタラーです。@yosatonet

コメントを残す

メールアドレスが公開されることはありません。