コンピューターにおける色の表現の仕組み（RGB・光の三原色・カラーコード）

このページにはプロモーションが含まれています

このページでは、コンピューターにおける色の表現の仕組みについて解説していきます。

パソコンやスマホの画面には様々な色のものが表示されていますね！このページでも様々な色が使用されていることが確認できると思います。

では、こういった色はコンピューター内部ではどのように扱われているのでしょうか？このページでは、このコンピューターにおける色の表現の仕組みについて解説していきます。

これを知っていれば、プログラムやソフトウェアで様々な色を扱うことができるようになります。例えば画像や動画を扱うプログラムを開発してみたいと考えているのであれば、このページで説明する内容は知っておいた方が良いでしょう。

また、サイトや画像などを見ていて「この色いいな」「この色を自分のサイトやプレゼン資料に使いたいな」と思うようなこともあると思います。今回説明する内容を理解しておけば、そういった真似したい色を完全に再現することができ、その色を自身のプレゼン資料やサイト等で扱うことができるようになります。

ということで、このページで説明する内容は画像やプログラミングに興味のある方だけでなく、パソコンで資料等を作成する方にも有益な内容になると思います。少しでも興味があれば是非ページを読み進めていただければと思います。

Contents

コンピュータでの色の表現の仕組み
RGB による色の設定
画像とは色の集まり
カラーコードによる色の表現
- RGB を表現するコード
- 色名とカラーコード
まとめ

コンピュータでの色の表現の仕組み

では、本題のコンピューターでの色の表現の仕組みについて説明していきたいと思います。

`RGB` による色の表現

まず、コンピューター内部では色は基本的に赤色・緑色・青色のそれぞれの色の強さで扱われています。

この赤色・緑色・青色の強さは、英語表記の Red・Green・Blue の頭文字をとって RGB と呼ばれることが多いです。そして、この RGB の３色のことを光の３原色と呼びます。

また、これらの RGB それぞれの色の強さは数値として扱われ、具体的には 0 〜 255 の 256 段階の数値で表されることが多いです。各色の強さが 256 段階で表されるため、全部で 256 x 256 x 256 = 16777216 種類 (1677 万種類) の色を扱うことができることになります。

今後、R の色の強さ、G の色の強さ、B の色の強さをそれぞれ単に R・G・B と記させていただきます。また、これらをまとめて RGB 値と呼ばせていただきます。

前述の通り、R・G・B の数値が大きいほど、その色の要素が強くなります。例えば R = 255・G = 0・B = 0 の場合は下図のような色となります。この場合、緑と青の色の要素はゼロで、赤色は最も強い 255 であるため、真っ赤な色となります。これは分かりやすいですね。

また、下の図は G = 0・B = 0 に固定し、R のみを左から順に徐々に 0 から 255 まで増加させていった時の色の変化を示す図となっています。

同様に、G のみを左から順に徐々に 0 から 255 まで増加させていった時の色の変化を示すものが下図となり、

B のみを左から順に徐々に 0 から 255 まで増加させていった時の色の変化を示すものが下図となります。

これらの例からわかるように、赤色・緑色・青色と一口に言っても明るい色や暗い色など様々な色が表現可能です。また、他の２色が 0 の場合、つまり単色である場合は、どのような色になるかが分かりやすいと思います。

加法混色と減法混植の違い

ちょっとややこしいのが、R・G・B のうちの２つ以上の要素の値が 0 以外の値である場合、つまり、R・G・B のうちの２つ以上の色を混ぜ合わせた場合です。

例えばですが、R = 255・G = 255・B = 0 とした場合、この RGB 値によって表現される色は、どのような色になるでしょうか？これは、R = 255・G = 0・B = 0 の真っ赤な色と、R = 0・G = 255・B = 0 の真緑の色を足し合わせた色となります。

答えは下図のような色となります。R = 255・G = 255・B = 0 はイエローを表す色となります。赤と緑を混ぜ合わせたので黒っぽい色になると予想した方もおられるかもしれません。実は、RGB で色を扱う場合はイエローとなります。

加法混色

他の組み合わせのパターンも含めて１つの図で表したものが下図となります。このように、R = G = B = 255 の場合は真っ白な色になります。直感的には黒色になると思われた方もいるかもしれませんね。

このように、RGB で色を扱う場合、設定した RGB 値と出来上がる色とは人間の直感、もっと言えば絵の具などで色を作った時とは異なる感覚になることが多いです。これは、RGB での色の混ぜ合わせ、すなわちコンピューター内部での混色が加法混色によって実現されているからになります。後述で説明するように、絵の具などの色の混ぜ合わせは減法混色によって実現されます。つまり、コンピューター内部で扱う色は、混ぜ合わせによる色の変化の考え方が絵の具とは異なります。

そして、加法混色とは色を重ねると明るくなるという特徴を持つ混色方法となります。

違う言い方をすれば、R・G・B の合計値が大きいほど色が明るくなります。そして、これが小さいほど色が暗くなります。したがって、RGB 全ての値が 255 の場合は真っ白になります。逆に RGB 全ての値が 0 の場合は真っ黒になります。

減法混色

先ほど絵の具の話をしましたが、絵の具における３原色はシアン・マゼンタ・イエローとなります。赤緑青が光の３原色と呼ばれるのに対し、これらのシアン・マゼンタ・イエローは色の３原色と呼ばれます。

そして、絵の具などで色を重ねた場合（色を混ぜた場合）は色が暗くなります。この絵の具での混色のような色を混ぜると暗くなる混色方法を減法混色と呼びます。下の図のように、これらのシアン・マゼンタ・イエローの絵の具を全て混ぜ合わせると真っ黒になります。

また、このシアン・マゼンタ・イエローという色はプリンターのインクの色として採用されています（これらに加えてブラックのインクが存在する場合もあります）。コンピューター内部では、前述の通り赤色・緑色・青色の３つの色の強さで色が扱われますが、これらをシアン・マゼンタ・イエローそれぞれの色の強さに変換したのちに、この強さのインクを紙に噴射することで印刷が行われることになります。

おそらく絵の具などをよく利用してきた方であれば減法混色の方が馴染み深いと思います。ですが、基本的にはコンピューター内部で扱われるのは加法混色である光の３原色となります。この点には注意が必要となります。

MEMO

ここまで説明してきたように、コンピューター内部では色は基本的に RGB で扱われます

ですが、特殊なケースでは他のデータ形式で色が扱われることもあります

例えば、ここで説明したシアン・マゼンタ・イエローの CMY や CMYK (K は黒) で扱われることもあり、CMY や CMYK で色を扱うことが可能な画像フォーマットも存在します

他にも HSV 等の他の指標で色を扱うこともあります

基本は RGB で色を扱うことになりますが、こういった他の形式で色が扱われることも頭の片隅にででも覚えておいてください

グレースケールの表現

また、R・G・B のそれぞれが同じ値である場合、その色は無彩色、すなわちグレースケールの色となります。

前述の通り、R・G・B の全ての値が 0 であれば黒、全ての値が 255 であれば白となります。また、R・G・B の全てが同じ値で、その値が 1 〜 254 の場合はグレーとなります。そして、この値が小さな値であればあるほど暗いグレーの色、大きな値であればあるほど明るいグレーの色になります。

下の図は R = G = Bを保ったまま、それぞれの値を左から順に徐々に 0 から 255 まで増加させていった時の色の変化を示す図となっています。

`RGB` による色の設定

ここまで、コンピューター内部で扱われる色について説明してきました。色が数値で表されることを初めて知った方もおられるかもしれません。この、色が数値で表されることを理解しておけば、パソコンやスマホでの色の扱い方の幅が広がります。

Windows や Mac などでは画像を編集したり絵を描画したりプレゼン資料を作成したりするためのアプリが存在します。例えば Windows であればペイントやパワーポイントがこれらに該当しますし、Mac であればキーノートやプレビューがこれらに該当します。

こういったアプリでは、描画する線や図形等のオブジェクトに色を設定することが可能です。そして、この色は様々な方法で設定可能であり、その１つの設定方法が R・G・B の指定によるものとなります。

例えば Mac のキーノートであれば、各オブジェクトの色を、下の図のような色の一覧からマウスで選択することで設定することができるようになっています。

また、下の図のように R・G・B の値を指定することで色を設定することも可能となっています。

このように、色を設定可能なアプリにおいては複数の色の設定方法が提供されており、その１つとして R・G・B を指定して色を設定する方法が提供されていることが多いです。この方法で色を設定するメリットは色の微調整が容易である点と色の再現が容易である点にあると思います。

まず、R・G・B の値を指定して色を設定する場合、R・G・B の各色の強さを１段階ずつ増減させながら色の調整を行うことができます。これを行うためには、R・G・B のいずれかを +1 or -1 してやれば良いだけです。また、R・G・B の全てを +1 or -1 してやることで色の明るさを１段階だけ調整することもできます。

このように、R・G・B の値によって色を指定する場合、数値で表現されているため定量的な調整が行いやすいです。また、確実に１段階ずつ色を変化させることが可能で、色の微調整も行いやすいです。

また、色を設定する際、以前に利用した色と同じ色を設定したい場合もあると思います。R・G・B の指定による色の設定であれば、以前と利用した色の R・G・B を指定することで同じ色を完全に再現することが可能です。また、画像やサイトなどを閲覧していて気に入った色があるのであれば、その色の R・G・B を調べてそれを指定してやれば同じ色を再現することも可能です。こういった再現性も、R・G・B の指定によって色を設定する方法のメリットとなります。

このように、コンピューター内部で扱われる色が RGB で表現されること、さらには R・G・B それぞれが赤の強さ、緑の強さ、青の強さを表していることを知っておけば、資料作成時やお絵描き時等の色の設定方法の幅が広がると思います。また、RGB が加法混色であることを理解しておけば、R・G・B の指定をどのように変化させればどのように色が変化するかも予想しながら色の設定を行うことができるようになります。

画像とは色の集まり

次は、応用編として画像のデータについて説明していきたいと思います。

画像は画素の集まり

画像は遠目に見たら１枚の画像にしか見えませんが、拡大して見ると点の集まりであることが確認できます。これからも分かるように、画像とは点の集まりになります。

大量の点が２次元的に隙間無く配置されていることで画像として認識できるようになっています。この点のことを「画素」や「ピクセル」と呼びます。つまり、画像とは画素（ピクセル）の集まりのことになります。

ちなみに、上図における猫の画像は写真ACで公開されているリズム727さんの写真を使用させていただいています。可愛いですね…。

画素は色で表現

そして、この画素にはそれぞれ色が設定されており、各画素の色によって画像の見た目が変わることになります。つまり、結局のところ、画像とは色の集まりになります。そして、この画素の色は、前述の通りRGB で表現されることが多いです。

MEMO

他にも、CMYK で表現されることもありますし、後述で説明するような RGBα で表現されることもあります

が、まずは、この基本的な色の表現方法である RGB で画素の色が決まることを前提に解説を進めていきます

画素の色が RGB によって表現される場合、画像をデータとして見てみると下図のように１つの画素が R・G・B の３つの値から構成され、さらにその画素が敷き詰められたようなデータとなります。そして、画像ビューワーアプリ等で画像データが開かれた場合、これらの R・G・B の値に基づいて表示する画素の色が決まり、さらにその画素が二次元的に配置されて表示されることになります。これにより、画像として人が認識できるようになります。そして、画像の見た目は各画素（つまり R・G・B）によって決まることになります。

ちなみに、画像における画素の数の尺度は「画素数」や「ピクセル数」で表されます。

画像のデータ

また、前述の通り、RGB それぞれの値は 0 〜 255 の 256 種類の値で表現されることが多いです。

この 256 種類の値を表現するためには、データのサイズとして 1 Byte が必要となります。1 Byte とは 8 bit のことであり、1 bit で表現できるのは 2 種類の値だけとなりますが、8 bit では 2 の 8 乗の 256 種類の値が表現できることになります。さらに、それが RGB の 3 つ分が必要となるため、１つの画素を扱うためにはデータサイズとして 3 Byte が必要となります。

そして、この画素が画素数分存在するため、１つの画像に必要なデータサイズは 3 Byte x 画素数 となります。

例えば 1000 万画素の画像であれば 3000 万 Byte が必要となり、これは約 28 MByte というデータサイズになります。28 MByte と聞いてピンと来ない方も多いかもしれませんが、このデータサイズは結構大きいです。特に一昔前だと、このサイズを通信で送受信するには結構な時間がかかっていました。

そのため、基本的には画像は圧縮した状態で HDD 等のディスクに保存したり通信したりするようになっています。圧縮フォーマットとして有名なのが PNG や JPEG などになります。そして、これらのファイルをダブルクリックして画像として表示したり、通信で受け取ったデータをウェブブラウザに表示する際に、圧縮したデータが展開されて画像として表示されることになります。

基本的に圧縮が行われると RGB 値の集まりであるという画像の構成が崩れます。が、圧縮したデータを展開することで RGB 値の集まりのデータに戻り、それに基づいてビューワーやウェブブラウザに画像が表示されることになります。

透明度の表現

また、画像データには透明度が設定されているものも存在します。例えば超有名サイトの「いらすとや」さんで公開されている画像データも透明度が設定されているものが多く、特に背景部分が透明に設定されるようになっています。

画像フォーマットによっては、こういった透明度を画素ごとに設定可能なものがあります。例えば PNG 画像などは画素ごとに透明度が設定可能です。

そして、こういった透明度が設定可能な場合、各画素は RGB ではなく、RGBα によって表現されることになります。α はアルファチャンネルと呼ばれるデータであり、基本的には、このアルファチャンネルの値に応じて各画素の透明度が決まるようになっています。

例えば、下図は青背景の前面に２つの画像を配置したもので、左側の画像と右側の画像では RGB それぞれの値は同じものになります。ですが、右側の画像ではアルファチャンネルによって背景の色を透明に設定しているため、右側の画像では背景の色が透過して見えるようになっています。

こんな感じで、基本的に色は RGB それぞれの値によって表現されるのですが、画像によっては各画素が RGB だけでなく、アルファチャンネルによって透明度が設定されている場合があります。

グレースケール画像

また、画像にはグレースケールのものが存在します。白とグレーと黒色の画素だけで構成される画像ですね！

グレースケールの表現でも説明しましたが、グレースケールの色は R = G = B と、R・G・B それぞれを同じ値にすることで表現可能です。で、この場合は R・G・B が同じ値であることが分かりきっているため、R・G・B の３つの値をデータに持たせておくのは冗長です。

そのため、グレースケール画像のデータにおいては R・G・B の３つの値ではなく１つの値だけで画素が構成されることがあります。

この場合、１つの画素に必要なデータは 1 Byte となり、単純に画像のデータサイズとしては 1 / 3 となります。ただ、結局圧縮されるので 1 / 3 よりも大きくなったり小さくなったりしますが、いずれにしてもこの方がデータサイズの節約になることは理解していただけると思います。

ここまで説明してきたように、色は基本的には R・G・B の３つの値によって表現されますが、画像データにおいては R・G・B だけでなくアルファチャンネルも含めた４つの値で画素が構成されたり、逆に１つの値で画素が構成されたります。こういった、画素がどういったデータから構成されるのかについては画像データのヘッダーなどで指定されることが多いです。そして、画像ビューワー等の画像を表示するアプリにおいては、そのヘッダーの情報を読み取り、その情報から１つの画素のデータサイズを考慮して画像の表示が行われることになります。

カラーコードによる色の表現

最後にカラーコードについて解説しておきます。

`RGB` を表現するコード

特にウェブページにおいては色はカラーコードと呼ばれる符号で扱われることが多いです。

カラーコードとは、一般的には下記のように # + 6 桁の 16 進数 で表されます。6 桁 の部分は 3桁 のこともあります。

少し特殊な色の扱い方にも思えますが、考え方はこれまで説明してきた「RGB で色を表現する」と同じです。

この 6 桁の 16 進数 において、最初の 2 桁は赤の強さ、真ん中の 2 桁は緑の強さ、最後の 2 桁は青の強さを表す値となります。

そして、2 桁の 16 進数では、00 〜 FF までの値を扱うことが可能で、FF は 10 進数で考えると 255 となります。つまり、カラーコードの各 2 桁の 16 進数はそれぞれ 0 〜 255 の 256 段階で各色の強さを表す値となります。ということで、カラーコードは # + 6 桁の 16 進数 という形式の符号によって RGB による色の表現で説明した色の表現方法を扱うものということになり、色の表現方法は RGB による色の表現で説明したものと全く同じになります。

また、16 進数の数値は 10 進数に変換可能です。逆の変換も可能です。なので、カラーコードから RGB の値 (10 進数) を求めたり、逆に RGB の値 (10 進数) から同じ色のカラーコードを作成するようなことも可能となります。

前述の通り、特にカラーコードはウェブで利用されることが多いです。もっと具体的に言えば、ウェブページの見た目を決めるのはスタイルシートというファイルであり、このスタイルシートでページ内の各要素の色をカラーコード等で指定することができます。そして、ウェブブラウザがスタイルシートを読み込み、この指定に基づいてページ内のの各要素に色を付けるようになっています。これによって、様々な色合いのウェブページが実現されていることになります。