色の表し方を体験しよう

同じ1つの色を、RGB・CMYK・HSV の3つの方法で表せます。どれかを動かすと、残りも同時に変わります。

カラーコード(16進数)
#000000
RGB(光の三原色)
0, 0, 0
HSV(色相・彩度・明度)
0°, 0%, 0%
CMYK(インクの割合)
0, 0, 0, 100
HSL(明度の取り方が別)
0°, 0%, 0%

光の三原色を、それぞれ 0〜255 の強さで混ぜる

0 00000000
0 00000000
0 00000000

それぞれ8ビット(256段階)なので、合わせて24ビット。表せる色は 256×256×256 = 約1677万色です。

色あい・鮮やかさ・明るさで指定する

色相環(クリックで色あいを選ぶ)

彩度(横)と明度(縦)

0°
0%
0%

H は0〜360度の角度で色あいを表します。S を下げると白っぽく、V を下げると黒っぽくなります。 HSB とも呼ばれ、B(Brightness)は V と同じ意味です。

インクの量で指定する(印刷の考え方)

0%
0%
0%
0%

C・M・Y を全部混ぜても、理論上の黒にはなりません。そのため実際の印刷では黒インク(K)を別に使います。

円をドラッグして、重なりを変えてみましょう

それぞれの光の強さ

255
255
255
円の上に指やマウスを置くと、その場所の色の値が出ます–

光にフィルタをかけると、何が起きるか

当てる光
フィルタ
光源
 
フィルタ
赤
 
目に届く光
当てた光
白
フィルタが通す色
赤
目に届く色
赤

フィルタは「色をつける」のではなく「色を取り除く」

赤いセロハンは、赤い光を作り出しているのではありません。 当たった光のうち緑と青を吸収し、赤だけを通しているだけです。 だから青い光に赤いフィルタをかけると、通る光がなくなって真っ暗になります。 インクや絵の具も同じ原理で、これが減法混色の正体です。

物に当てる光の色を変えると、見え方はどう変わるでしょうか

255
255
255
当てている光

ディスプレイの1画素を、拡大してのぞいてみる

1 倍

スマートフォンの画面に虫めがねを当てたときに見えるものを、再現しています。

拡大していくと、何が見えるでしょうか

いまの色
白
赤の光
255
緑の光
255
青の光
255

画像は、何枚かの「色の板」が重なってできています

「明るさで見る」に切り替えると、その色の光がどれだけ強いかが白黒の濃さで分かります。

コンピュータはどうやって色を表しているのか

ディスプレイに映るすべての色は、赤・緑・青の3つの光の組み合わせでできています。画面を虫めがねで拡大すると、この3色の小さな点が並んでいるのが見えます。人の目はそれらを混ざった1つの色として感じるため、たった3色でさまざまな色を表せます。

この赤(Red)・緑(Green)・青(Blue)を光の三原色といい、頭文字を取って RGB と呼びます。コンピュータは、それぞれの強さを数値で記録することで色を表しています。

1画素は24ビット

一般的な方式では、R・G・B それぞれを8ビット(0〜255の256段階)で表します。3つ合わせると24ビットです。

256 × 256 × 256 = 16,777,216 通り(約1677万色)

これがフルカラーと呼ばれる状態です。人間が見分けられる色の数を超えているため、写真も自然に見えます。透明度(アルファ値)を加えて32ビットで扱う場合もあります。

カラーコードは16進数

ウェブサイトの色指定でよく見る #FF6600 のような表記は、RGB の値を16進数で並べたものです。2桁ずつ区切って、赤・緑・青に対応します。

表記赤緑青
#FF6600FF = 25566 = 10200 = 0

16進数の2桁は、ちょうど8ビット(0〜255)を表せます。2進数で書くと 11111111 01100110 00000000 となり、24桁になります。16進数を使うのは、この長い2進数を短く書くためです。

HSV(HSB)― 人の感覚に近い表し方

RGB は機械にとっては扱いやすい方式ですが、人間には直感的ではありません。「もう少し明るい赤にしたい」と思ったとき、R・G・B をそれぞれいくつにすればよいかは、すぐには分かりません。

そこで使われるのが HSV です。HSB とも呼ばれ、次の3つで色を指定します。

教科書に載っている円錐の図は、この3つの関係を表したものです。円錐を上から見た円周が色相、中心から外へ向かう方向が彩度、上下方向が明度にあたります。円錐の先端(下)が黒になるのは、明度が0だとどんな色相・彩度でも黒になるからです。

画像編集ソフトの色選択画面が、円や四角の組み合わせになっているのはこのためです。上のツールでも、色相環をクリックして色あいを選び、四角の中で鮮やかさと明るさを調整できます。RGB のスライダーを動かしたときに HSV の値がどう変わるかも、同時に確認してみてください。

CMYK ― 印刷で使う表し方

ディスプレイと紙では、色ができるしくみが違います。ディスプレイは自分で光を出していますが、紙は光を出しません。紙に当たった光のうち、インクが吸収しなかった分だけが反射して目に届きます。

そのため印刷では、シアン(C)・マゼンタ(M)・イエロー(Y)という色の三原色を使います。インクを重ねるほど吸収される光が増え、暗くなっていきます。

RGB(光)CMY(インク)
混ぜ方加法混色減法混色
混ぜると明るくなる暗くなる
3つ全部で白黒(に近い色)
何もないと黒白(紙の色)

ただし実際のインクは理想通りではなく、C・M・Y を全部混ぜても濁った茶色っぽい黒にしかなりません。文字を黒く印刷するのに3色も使うのは、インクの無駄でもあります。そこで黒(Key plate の K)を独立させたのが CMYK です。プリンタのインクが4色なのは、この理由によります。

なお、ディスプレイで表せる色と印刷で表せる色の範囲は完全には一致しません。画面で見た鮮やかな色が、印刷すると少しくすんで見えることがあるのはこのためです。

色を減らすとどうなるか

1画素に24ビットも使わず、もっと少ないビット数で色を表す方法もあります。たとえば1画素4ビットなら16色、8ビットなら256色です。使える色が少ないほどデータ量は減りますが、そのぶん元の色を正確に再現できなくなります。

色数が足りないとき、なめらかなグラデーションは境目のはっきりした縞模様になります。これをトーンジャンプやバンディングと呼びます。写真の空の部分などで起こりやすい現象です。

限られた色数でも自然に見せる工夫として、ディザリングという手法があります。近い色の点を細かく散らして混ぜ、離れて見たときに中間色に見せるやり方です。新聞の写真が網点でできているのも、同じ考え方によるものです。

Webセーフカラーという考え方

かつてパソコンの性能が低かった頃は、同時に表示できる色が256色しかない環境が普通でした。そのため、どの環境でも同じように見える色として216色を選んだWebセーフカラーという取り決めがありました。

現在ではほとんどの機器がフルカラーに対応しているため、この制約を意識する必要はほぼありません。ただし、機器によって色の見え方に差があること自体は今も変わりません。同じカラーコードを指定しても、ディスプレイの種類や設定によって微妙に違って見えます。正確な色が求められる仕事では、機器ごとに色を合わせるキャリブレーションという作業が行われます。

ディスプレイの中身

画面が白く光っているとき、白い光を出す部品があるわけではありません。赤・緑・青の3つの小さな光が、すべて最大の強さで光っているのです。

スマートフォンやテレビの画面を虫めがねで拡大すると、細い縦じまが並んでいるのが見えます。この3本ひと組が1画素です。人の目は、これほど細かいものを見分けられないため、混ざった1つの色として感じます。

黄色を表示しているときは、赤と緑だけが光り、青は完全に消えています。黄色い光を出す部品はどこにもありません。上のツールで拡大していくと、この様子が確かめられます。

なぜ赤・緑・青なのか

これは人間の目のつくりに由来します。網膜には錐体細胞という色を感じる細胞があり、3種類に分かれています。それぞれ赤・緑・青のあたりの光に強く反応します。

つまり、人の目はもともと光を3つの成分に分けて受け取っています。だから、その3つを再現できれば、あらゆる色を作り出せるのです。ディスプレイが3色なのは、技術的な都合ではなく、人の目に合わせた設計だといえます。

画像は3枚の重ね合わせ

1つの画素には、赤・緑・青それぞれの強さが数値で記録されています。ということは、画像は赤の情報だけの画像、緑だけの画像、青だけの画像という3枚に分解できます。

上のツールで実際に分解できます。りんごの画像なら、赤の板では実の部分が明るく、青の板では暗くなります。3枚を重ねると元の画像に戻ります。

この考え方は、画像処理の基本です。色の調整、特定の色だけを取り出す処理、写真の加工などは、この3枚それぞれに操作を加えることで実現されています。

カラーフィルタのしくみ

赤いセロハンを通して景色を見ると、赤く見えます。ここで誤解しやすいのは、セロハンが赤い光を作り出しているわけではないという点です。

フィルタがしているのは、逆のことです。当たった光のうち、緑と青の成分を吸収し、赤の成分だけを通しています。つまり色を足すのではなく、引いているのです。

この性質から、意外な結果が起こります。青い光に赤いフィルタをかけると、通れる成分がないため真っ暗になります。上のツールで実際に確かめられます。

インクや絵の具も、まったく同じ原理です。赤い絵の具は、当たった白色光のうち緑と青を吸収し、赤だけを反射しています。だから絵の具を混ぜるほど吸収される光が増え、暗くなっていきます。これが減法混色の正体です。

印刷は4枚の版を重ねている

カラー印刷では、シアン・マゼンタ・イエロー・黒の4枚の版を、順番に紙へ刷り重ねています。上のツールの「インクの4色(CMYK)」で、実際にどう分解されるかを確認できます。

赤いりんごの画像を分解すると、シアンの版にはほとんど何も写らず、マゼンタとイエローの版に実の部分が濃く出ます。赤は、マゼンタとイエローを重ねて作られる色だからです。

印刷物を虫めがねで見ると、細かい点が並んでいるのが見えます。網点といい、点の大きさでインクの濃さを表現しています。4色の網点が少しずつ角度をずらして重ねられ、離れて見ると混ざった色に感じられる仕組みです。

HSLという表し方

HSVによく似た方式に、HSLがあります。H(色相)とS(彩度)は同じですが、3つ目がL(Lightness/輝度)になっています。

違いは、最も明るい状態の扱いです。HSVではV=100%で最も鮮やかな色になりますが、HSLではL=100%にすると白になります。L=50%のときが最も鮮やかです。

どちらが優れているというものではなく、用途で使い分けられています。ウェブページの色指定ではHSLがよく使われ、画像編集ソフトではHSVが主流です。上部の表示で、同じ色がHSVとHSLでどう違う数値になるかを見比べられます。

物の色は、反射した光の色

赤いりんごが赤く見えるのは、りんご自身が赤い光を出しているからではありません。当たった白い光のうち、赤い光だけを反射し、ほかの色は吸収しているからです。

では、赤い光を含まない光で照らしたらどうなるでしょうか。緑の光だけを当てると、りんごは反射できる光がなく、黒っぽく見えます。上のツールの「光で照らす」で、実際に確かめられます。

お店の照明で、肉や魚が売り場ではおいしそうに見えたのに、家では色がちがって見えることがあります。照明に含まれる光の成分がちがうためです。写真を撮るときに白い紙で色を合わせる「ホワイトバランス」も、この問題を補正するしくみです。

板がずれると色がにじむ

カラー画像は、赤・緑・青の3枚の板が重なってできています。この3枚がぴったり重なっていれば元の画像になりますが、少しでもずれると、物の輪郭に色のにじみが出ます。

同じことは、カラー印刷で版がずれたときや、レンズが色ごとに光の曲げ方を変えてしまうとき(色収差)にも起こります。上のツールの「色ずらし」で、ずらす量を変えながら見比べられます。

使い方

© 2026 情報ラボ ホーム カリキュラム対応表 画像のデジタル化 音のデジタル化 ラスタとベクタ 画像のビット演算 色の表し方 2進数・16進数 文字コード データはすべて0と1 パリティマジック コンピュータのしくみ 論理回路 アルゴリズム ネットワークのしくみ 電子メールのしくみ 情報システムとデータの流れ シミュレーション データの分析 機械学習 回帰と予測 クラスタリング 統計的推測 パスワードの強さ 暗号のしくみ あやしいメールを見分ける データ量の計算 データ圧縮 JPEGのくり返し保存 運営者情報・お問い合わせ プライバシーポリシー 更新履歴