画像の持つ色情報

1ピクセルに含まれる色情報

前に「ブログに使用する画像と解像度の話」をしました。
その記事では、1ピクセルは3バイトの色情報を持っていると、説明しました。


では、1ピクセルの3バイトの色情報とは、何色の色を表現できる色情報なんでしょうか?
という点に関して、説明したいと思います。

※この記事は、「ブログに使用する画像と解像度の話」の記事が長かったので、その記事に含まれていた色情報の部分を分離して、独立した記事に編集し直しました。

books-1099067_1920.jpg
PatternPicturesによるPixabayからの画像


1ピクセルで16,772,216色
1ピクセル=3バイトでしたね。

1 byte=28 bitです。
したがって、
3 byte=28✕3 bit=16,777,216bitになります。

つまり、1pixelは、16,777,216の情報があるということなので、16,777,216の色を表現できるということになります。

※実用的には、16,772,216の数値を表現するのに、6桁の16進数を用いて、左側に#を付けて、#000000~#FFFFFFまでの数値で表します。

1バイトのFF=256(0-255で256の情報)なので、3バイトのFFFFFFは256✕256✕256 = 16,772,216です。

なお、参考までにですが、10進法で数字は0~9までの10種類しかないので16進法では、A,B,C,D,E,Fの6文字を10~15までの数字の代わりに使用します。A,B,C,D,E,Fは大文字でも小文字でも構いません。


HTMLやCSSでの色情報

よくHTMLやCSSなどで16進数を用いた#F6FA22などの表現が出てきますが、これらは 16,772,216色のうちどの色かを表しています。

#F6FA22は、たまたま頭に浮かんだデタラメの数値ですが、どれも16進法の数字なので、これでもちゃんと色を表示してくれるはずです。

#○○○○○○
左側1バイトの数値が赤の情報(R)
真ん中の1バイトが緑色の情報(G)
右側の1バイトが青の情報(B)
を表しています。

「RGB」という言葉を聞いたことがあると思いますが、まさにそのRGB(赤緑青)なんですね。

さて、先程登場したデタラメ色の#F6FA22を分解すると、赤「F6」と緑「FA」と青「22」になります。
これがどんな色かは分かりませんが、推測すると・・・

赤「F6」と緑「FA」の色の成分は「FF」に近いので沢山あり、青「22」の色成分は「00」に近いので少ないですね。
赤と緑色の光が多いので黄色になり、これに青の光がほんの少し入るという感じの色・・・
純粋な黄色よりほんの少しだけ緑色側に近く、それにほんのちょっぴり青が入った色?
では、次の項目で実際に見てみましょう。


#F6FA22の色を確認する
①赤「F6」の色、つまり「#F60000」の色です
10進法で光の赤の成分が「246」ある状態です。
f60000.PNG

②緑「FA」の色、つまり「#00FA00」の色です
10進法で光の緑色の成分が「250」ある状態です。
00fa00.PNG

③青「22」の色、つまり「#000022」の色です
10進法で光の青の成分が「34」ある状態です。 000022.PNG

④赤「F6」、緑「FA」、青「22」が混じった色、
つまり①と②と③の光の色の成分を混ぜた状態、これが「#F6FA22」の色です
10進法で光の、赤の成分「246」と緑色の成分「250」と青の成分「34」がある状態です。
F6FA22.PNG

偶然にも、おおむね予想した色といってもいいですね。

これの状態を見た方のうちには、色々混ぜたのに④が一番明るく見える、へんだな?
と感じた方もおられるかも知れませんね。

「光の混色」は、「色の混色」と大きく違う点があります。
それは、「光の混色」は色の成分を沢山混ぜるとその分明るくなります。
逆に「色の混色」は色の成分を沢山混ぜるとその分暗くなります。


⑤ もし④の色に青「22」の光の成分が入らなかったとすると、どんな色かを見てみましょう。
赤「F6」、緑「FA」、青「00」が混じった色、つまり①と②の光の色の成分を混ぜた「#F6FA00」の色です
f6fa00.PNG
この色は、④の色と違いがわからないぐらいですね。
違いがわからないぐらい、青の光の成分が少なかったということです。
青「22」がかなり「00」に近いというのは、こういうことになるのですね。


まとめ
数値が00に近いほど暗く、FFに近いほど明るい色になります。
1pixelの中の数値の組み合わせが16,772,216通りありました。


真っ黒は#000000です、真っ白は#FFFFFFです。
これ以外で、3つの組の数値が同じだとグレイに見えます。
#444444と#999999はどちらもグレイですが、前者は暗く後者は明るいグレイです。

例えば、グレイの#999999のうち、左側の数値が高いと少し赤っぽいグレイ、真ん中の数値が高いと緑色っぽいグレイ、右側の数値が高いと青っぽいグレイになります。

黒は、黒い色があるというのではなく色情報がないと考えます。
色情報がないので、PCやTVでは何も光を発しないので黒く見えるのです。
黒い光は存在しません。黒っぽいのは光の量が少ない状態です。
00は色情報がない。逆にFFは色情報が目一杯あるので明るい。

赤は#FF0000、緑色は#00FF00、青は#0000FFです。
RGBの各色の「FF」の部分を「00~FF」の間の数値に変えると明るさが異なる各色になります。

RGBの各色を組み合わせで、様々な色を表現しています。


■色情報のサイトのリンク
サイトの正式名が分かりませんが、様々な色とその16進数のRGB値をとりまとめた参考になるサイトのリンクです。

<色見本>タブには以下の内容の色の情報があります。
原色大辞典~ブラウザで名前が定義されている140色の色名と16進数
和色大辞典~日本の伝統色465色の色名と16進数
洋色大辞典~カタカナ表記される慣用色285色の色名と16進数
web216~Webセーフカラー216色の16進数
パステルカラー~パステルカラー300色の16進数
ビビッドカラー~ビビッドカラー300色の16進数
モノトーン~モノトーン256色の16進数
メトロカラー~地下鉄のシンボルカラーと16進数

その他にも、<配色><色を探す><色で遊ぶ><ランキング>のタブが用意されています。


以上、「画像の持つ色情報」のお話でした。

この記事へのコメント

  • tor

    こんばんは。
    違いが分かりませんでした。
    しかし凄い量の色情報になるのですね。
    絵具も混ぜれば色々と作れますが
    16進数を使って表すのも面白いですね。
    すっきり理解できました。

    昔使っていた色鉛筆は12色でした。
    2019年08月20日 19:24
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    1600万色もあっても、人には到底見分けられないですねよ。
    とりあえず虹が7色ということになっていますが、実際は連続した色なので、無限ともいえるわけですが、光の研究をしたニュートンが音の種類が7つなので、それに合わせて光も7色にした方が神秘的?と考えたらしいです。
    実際のところ、私は虹を見ても、せいぜい3色ぐらいにしか見えません。
    といっても、3色や7色の風景写真などはとても不自然に感じるはずです。
    私、今でも色鉛筆を使っているのです。PCのすぐ横に置いてありますが、110色以上はあると思います。
    絵の具なら12色あれば十分ですが、色鉛筆は混色が難しいので、多くなってしまいました。
    2019年08月20日 20:12
  • winga

    おはようございます。
    今回も「お気入り」に。
    こんな情報を皆さんに発信なさるって、凄い!としか
    言いようがありません。
    ど素人の最大かつ最高の評価でございます
    2019年08月21日 06:34
  • 偽ストラト

    なるほど、参考になりました。!(^^)!
    2019年08月21日 10:34
  • フラバーバ

    読ませていただいていたも チンプンカンプンですが
    色の数は 1600万色以上 あるという事ですね。
    そのうち 色の名前が言えるのは 20色ぐらいです。
    2019年08月21日 15:01
  • すずりん♪

    中学生の時、光の三原色を混ぜると何色になるでしょうと言う問(理科?)があり、白と答えて正解だったのが妙に記憶に残っています。
    今回の記事を拝見してそのことを思い出し、そういう理論だったのかと、分からないなりに分かったような気がしています。
    混ぜると黄色になるのと、白になる違いは三色の割合なのですか?
    よく理解できていないので、とんちんかんな質問だったらすみません。

    前々記事を参考にさせていただいて、公開済みの記事の修正をすることができました。
    サムネイルとアップロード時リサイズの数値をどうするか悩んでいたのですが、結局初期設定に戻してました。
    これも参考にさせていただいて、もう少し考えたいと思います。
    2019年08月21日 17:43
  • わけい

    wingaさんへ
    コメントどうもありがとうございます。
    今から40年ぐらい前に、コンピュータの色はこんなふうになっているなどという本を見て、キーボードを押し続けるとどんどんいろいろな色に変わっていくという、簡単なプログラムを作ったことを思い出しました。
    同時に、キーを押すといろいろな音に変化するプログタムとか、面白いのでは(お昼休みにみんなで出かけて、今日は何を食べようか迷うので)「本日のおすすめランチ」をコンピュータが推薦してくれるんです、そんなのを作った記憶があります。
    当時はまだパソコンという言葉はなかったと思いました。
    でも次第に、市販の色々なプログラムが販売されるようになったので、だんだんとプログラムづくりから離れていきました。
    でも当時は、16進法の数値は必須でした。
    2019年08月21日 18:00
  • わけい

    偽ストラトさんへ
    コメントどうもありがとうございます。
    参考になって嬉しいです。
    2019年08月21日 18:01
  • わけい

    フラバーバさんへ
    コメントどうもありがとうございます。
    色の数は、おそらく無限にあるかも知れませんが、パソコンで扱える色の数が1600万程度ということですね。
    パソコンには、色を数値で入力するのが一般的ですが、そのうち140色は色の名前でも入力できるようになっているんですよ。
    もちろん覚えられませんが。
    2019年08月21日 18:06
  • わけい

    すずりんさんへ
    コメントどうもありがとうございます。
    また、長い記事を読んでいただき、光の3原色に何するコメントまで頂きありがとうございます。
    いきなりですが、本当は光には色がないのです。
    ナンテことをいうと、嘘のように思うでしょうが、本当に光には色がないです。
    目にはあたかもアンテナのような役割をする視細胞で3色の周波数を感知し、脳に信号を送ります。その脳で送られた信号を合成して、光の成分の強弱から〇〇色として判断しているのです。
    なぜ光の3原色という言葉があるかは、人間や霊長類には目に3色の光を感じる視細胞がありますが、他の哺乳類は2原色、鳥・魚・爬虫類・両生類は4原色をキャッチする視細胞の種類の数があります。
    たまたま人間が3種類だったということなんですね。
    例えば脳で判断して黄色の光でも、それは本当に黄色の光とはいえません。
    なぜなら、純粋に黄色だけの周波数の光かも知れないし、もしかしたら赤い光と緑の光の2つの周波数の光かも知れないのです。
    光の成分はプリズムを通すと屈折率の違いで分解できます。
    純粋な黄色なら1つに、複数の光の混合なら複数に分かれるのでそれでやっと本当の黄色か合成の黄色か判断できます。

    TVやPCから発する光の3原色に限っていえば、黄色や白は必ず3種類の光の組み合わせでできています。
    でも、屋外の太陽光は無数の色の光の成分が含まれていますので、屋外で見る自然物の色は3つの色の組み合わせではなく無数の色の組み合わせで、できています。
    TVやPCの画像に無数に色のデータの機能をもたせることは現実には無理なので、人間の視細胞の数からして最小限の3色の組み合わせで、ニセの色を作って脳をだましているようなものです。

    黄色や白はTVやPCに限っていえば、3原色の組み合わせですが、太陽光や蛍光灯などは無数の色の組み合わせで黄色や白が作られているといえます。もちろん脳がそのように判断しているわけですが、残念ながら脳は光の3原色の組み合わの色か、自然色の無数の組み合わせなのかor純粋色かを判断できないようです。
    つい、難しそうなことをいってすみません。混乱させる気はなかったのですが、つい書き込んでしまいました。(これでも半分ぐらいに削りました)



    2019年08月21日 20:57
  • すみれ

    う~ん、正直チンプンカンプンです
    前回の画像の話も・・・です
    ブログに使う写真はwebようで適当に圧縮(?)してたし
    今回は更に分からない・・・
    世の中は難しいこといっぱいですねぇ~
    綺麗な色は気持ちがいいけど
    考えたことなかったです~
    2019年08月22日 00:06
  • わけい

    すみれさんへ
    コメントどうもありがとうございます。
    このあたりの話は、全く知らなくてもブログは十分やれると思いますので、それはそれでいいと思います。
    私は、HTMLやCSSをいじったりするので、その際に基本的なHTMLタグの内容やCSSの理解するのには役立つのではと、思います。
    といっても、このあたりの話は入り口の話なので、なかなか深い話には手を出せません。
    他の分野でも調べたいことが山積していますので、困っています。
    2019年08月22日 14:25