Webサイトの制作やデザインでは、「rgb(51, 204, 153)」や「#33CC99」といったカラーコードを必ず目にします。
一見するとランダムな記号の並びに見えますが、実はすべて明確なルールに基づいて構成されています。
その基本となるのが、光の三原色をもとにした「RGB」です。そしてWebサイトのCSSなどでよく使われる「HEX（16進数）」は、このRGBの数値（10進数）を別の形で表現（返還）した“表記方法の一つ”です。つまり、表現の仕方は違っても、どちらも同じ色の情報を扱っています。
RGBコードとHEXコードがどのように対応しているのか、その仕組みと変換関係、読み方のコツを理解すれば、カラーコード（色コード）を見ただけで「あ、これは明るいミントグリーンだな」といったように、大まかな色をイメージできるようになります。
ここでは、RGBとHEXの仕組みと変換関係を整理しながら、ツールに頼らずカラーコード（色コード）だけで色を見分けるための実践的なコツを解説します。
実際に読めるようになったかを確認できるツールも用意しています。
カラーコードの仕組みを理解し、色を自在に扱えるようになりましょう。
カラーコードのRGBとHEXは同じ色を表している
カラーコードには「RGB」と「HEX」という2つの書き方がありますが、これらはまったく別の色を表しているわけではありません。実はどちらも、同じ“色の情報”を異なる形式で表現しているだけです。
RGBは色を表す基本の数値で、HEXはそれを別の形に変換した表記方法です。
例えば次のように、RGB（rgb(255,0,0)）とHEX（#FF0000）は1対1で対応しています。
| RGB( | 255, | 0, | 0 ) |
|---|---|---|---|
| ↓ | ↓ | ↓ | |
| # | FF | 00 | 00 |
このように、書き方は異なりますが、どちらも「赤だけが最大で、緑と青がゼロ」という同じ状態を表しています。
つまり重要なのは、「RGBとHEXは別々の仕組みではなく、RGBとHEXは必ず対応している」という点です。どちらか一方を理解すれば、もう一方も“同じ内容を別の形で書いているだけ”だと分かるようになります。
また、なぜ2種類の書き方が存在するのかというと、RGBは人間にとって直感的に理解しやすく、HEXはWeb上で短く書けるという実用上の違いがあるためです。
rgb(255, 255, 255) → 長い書き方
#FFFFFF → 短く書ける書き方
このように用途の違いはありますが、表している色そのものは同じです。
RGB（10進数）の書き方と仕組み：光を混ぜる「足し算」
カラーコードのすべての基本となるのが「RGB（アールジービー）」です。
RGBカラーコードは、「赤（R）・緑（G）・青（B）」という3つの光の強さを数値で表したもので、この3つの光の組み合わせによって、画面上のあらゆる色が作られています。
RGBでは、私たちが普段から使い慣れている「0から255までの数字（10進数）」を使って色を指定します。
書き方は rgb(赤, 緑, 青) という形になり、それぞれの色の強さをカンマで区切って並べます。
RGBは「光の足し算」
RGBは、パソコンやスマートフォンの画面が「光」を発して色を表現する仕組み（光の三原色）に基づいています。絵の具は混ぜるほど黒く濁っていきますが、光は混ぜるほど明るくなる「足し算」の性質を持っています。
たとえば、真っ赤を表現するRGBコードは rgb(255, 0, 0) と書きます。
| rgb( | 255, | 0, | 0 ) |
|---|---|---|---|
| ↓ | ↓ | ↓ | |
| 赤 | 緑 | 青 | |
| （満点） | （ゼロ） | （ゼロ） |
「0」が最も薄い（完全に消灯している）状態を表し、数字が大きくなるほど光が強くなり、「255」が最高の濃さ（満点）になります。
つまり、rgb(255, 0, 0) は「赤の光だけをマックスにして、緑と青の光は完全に消す」という意味になり、画面には鮮やかな赤色が表示されます。
この「光の足し算」のルールを覚えると、以下の極端な2つの色も簡単に理解できます。
・すべての光がゼロの rgb(0, 0, 0)：光が全くない状態のため、画面は「黒（暗闇）」になります。
・すべての光がマックスの rgb(255, 255, 255)：すべての光が最高出力で混ざり合うため、太陽の光と同じ「白」になります。
まずは、この「0〜255の数字で、左から赤・緑・青の光を足していく」という仕組みをしっかりと押さえておきましょう。
なお、ホームページ制作の現場では、このRGBの書き方を少し進化させることで、色を「半透明」に透けさせることができるようになります。Webデザインにおいて非常に重要なテクニックですが、これについては「CSSカラーコードHTMLで使えるRGBA･HSL･HSLA」で詳しく解説します。
HEX（16進数）の書き方と仕組み：RGBを2桁ずつに縮めたコード
基本となるRGBの数値を、Webサイトのコード（CSSなど）で扱いやすいように「16進数」という特殊な数え方を使ってギュッと短く書き換えた派生形が「HEX（ヘックス）」です。
一見するとランダムな英語と数字の記号に見えますが、実はRGBと同じく「赤・緑・青」の3つのパーツに分かれています。
HEXは2桁ずつ3つのパーツに分かれている
HEXカラーコードは、先頭に「#（ハッシュ）」をつけ、その後に6桁の英数字を並べて表現します。
この6桁は、左から2桁ずつがそれぞれ「赤・緑・青」の濃さを表しています。
たとえば、鮮やかなミントグリーンを表現するHEXコードは #33CC99 と書きます。
| # | 33 | CC | 99 |
|---|---|---|---|
| ↓ | ↓ | ↓ | |
| 赤 | 緑 | 青 | |
| （少し） | （多め） | （中くらい） |
16進数の簡単なルール
RGBでは「0から255」という使い慣れた10進数を使いましたが、HEXでは「0からF」までの16進数を使います。
数字は「0」が一番薄く（ゼロ）、段階が進むと「9」の次は「A、B、C、D、E」となり、最高の濃さが「F」になります。これを2桁で表すため、最高の濃さ（満点）は「FF」になります。
今回の #33CC99 であれば、「赤（33）はかなり薄め、緑（CC）は満点の一歩手前まで多め、青（99）は中くらいに混ぜる」という意味になります。
この仕組みを覚えると、以下の2つの極端な色も簡単に読み解くことができます。
・すべてがゼロの #000000：赤・緑・青のすべての光がゼロになるため「黒」になります。
・すべてが満点の #FFFFFF：赤・緑・青のすべての光がマックス（FF）で混ざり合うため「白」になります。
まずは「基本はRGBと同じで、それを16進数を使って2桁ずつコンパクトに並べたものがHEXなんだ」という繋がりをざっくりと押さえてください。
HEXとRGBはどう結び付いている？関係・変換のイメージ
一見するとまったく共通点がないように思える「HEX」と「RGB」ですが、両者の関係は非常にシンプルです。
RGBは「10進数」、HEXは「16進数」という異なる数え方を使っているだけで、両者の関係は「10進数から16進数へ」「16進数から10進数へ」と、数値をただ相互変換しているだけの関係に過ぎません。
この数え方の違いがどのように裏側で結び付いているのか、具体的な変換の仕組みをひも解いてみます。
RGB（10進数）をHEX（16進数）に変換する計算ルール
私たちが普段使っている10進数のRGB（0〜255）を、16進数のHEX（00〜FF）に変換するときは、「16で割る」というルールを使います。
255までの数字を16で割ると、必ず「商（割り算の答え）」と「余り」が出ます。
この2つを組み合わせることで、HEXの2桁の文字列が完成します。
・1桁目（左側）の文字：「16で割った答え（商）」を16進数にする
・2桁目（右側）の文字：「割り切れなかった余り」を16進数にする
たとえば、RGBの「51」という数値をHEXに変換する場合、計算式は 51 ÷ 16 ＝ 3 あまり 3 となります。
答えが「3」で余りが「3」なので、2つを並べて 33 になります。
同様に、「204」を変換する場合は 204 ÷ 16 ＝ 12 あまり 12 となります。
16進数では「12」を「C」と数えるルールなので、答えのCと余りのCを並べて CC になります。
このように、10進数を16で割り算するだけで、簡単に16進数のコードへと変換することができます。
RGBコード「rgb(255, 150, 50)」をHEXコードに変換計算してみよう
先ほど紹介した「16で割る」というルールを使って、真っ赤を表現する rgb(255, 0, 0) をHEXコードに変換してみます。
16進数では「15」を「F」と数えるルールを意識して計算を進めます。
10＝A、11＝B、12＝C、13＝D、14＝E、15＝F
①赤のパーツ：255
・16で割り算をします：255 ÷ 16 ＝ 15 あまり 15
・左側の文字（答えの15）：16進数にすると「F」
・右側の文字（あまりの15）：16進数にすると「F」
・2つを並べると：FF
②緑のパーツ：150
・16で割り算をします：150 ÷ 16 ＝ 9 あまり 6
・左側の文字（答えの9）：16進数にするとそのまま「9」
・右側の文字（あまりの6）：16進数にするとそのまま「6」
・2つを並べると：96
③青のパーツ：50
・16で割り算をします：50 ÷ 16 ＝ 3 あまり 2
・左側の文字（答えの3）：16進数にするとそのまま「3」
・右側の文字（あまりの2）：16進数にするとそのまま「2」
・2つを並べると：32
それぞれの計算結果である「FF」「96」「32」を、左から順番に並べて先頭に「#」をつけます。
これにより、RGBの rgb(255, 150, 50) が、HEXコードの #FF9632 へと変換される根拠がはっきりと分かります。
下記のツールで変換を確認してみてください。
HEX（16進数）をRGB（10進数）に変換する計算ルール
私たちが普段使っている10進数は「10ごとに桁が上がる（10倍になる）」ため、2桁の数字（たとえば「51」）は「10の位が5、1の位が1」と考えます。
これに対して、HEXで使う16進数は「16ごとに桁が上がる（16倍になる）」というルールです。
そのため、HEXの2桁の数字は以下のように計算します。
・1桁目（左側）の文字：「16の塊がいくつあるか」を表す（16を掛ける）
・2桁目（右側）の文字：「1の位がいくつか」を表す（そのまま足す）
HEXコード「#33CC99」をRGBコードに変換計算してみよう
16進数を10進数に変換するルールを使って、先ほど登場したHEXコード #33CC99 を1パーツずつ10進数へ変換してみます。
16進数の「A〜F」は、10進数だと「10〜15」になる点だけ頭の片隅に置いてご覧ください（Cは12にあたります）。
①赤のパーツ：33
・左の「3」は、16の塊が3つあるという意味 ＝ 3 × 16 = 48
・右の「3」は、1の位が3という意味 ＝ 3
・これを足すと：48 + 3 = 51
②緑のパーツ：CC
・左の「C（12）」は、16の塊が12個あるという意味 ＝ 12 × 16 = 192
・右の「C（12）」は、1の位が12という意味 ＝ 12
・これを足すと：192 + 12 = 204
③青のパーツ：99
・左の「9」は、16の塊が9つあるという意味 ＝ 9 × 16 = 144
・右の「9」は、1の位が9という意味 ＝ 9
・これを足すと：144 + 9 = 153
3つのパーツを計算した結果、導き出された数字は「51、204、153」となりました。
これは、RGBコードの rgb(51, 204, 153) と完全に一致します。
基本であるRGBの数値を、16進数の言葉に置き換えてぎゅっと縮めただけの存在が #33CC99 だったのです。
下記のツールで変換を確認してみてください。
【結論】計算して見えてくる、RGBコードとHEXコードの関係
RGBコードとHEXコードは、表記方法が違うだけで、裏側で指定している「色の強さ（レシピ）」はまったく同じであり、どちらも同じ色を出力します。
Webの制作現場では、毎回こんな計算をする必要はありません。変換ツールやデザインソフトを使えば一瞬で自動変換してくれます。
大切なのは、「HEXはRGBの数値を16倍ベースの暗号（16進数）にギュッと縮めて書いているだけなんだ」「RGBはHEXの数値を10進数して書いているだけなんだ」という変換の仕組みを理解しておくことです。
【プロの技】カラーコードだけで「何色か」を見分ける3つのコツ
カラーコードの計算方法が分かっても、Web制作やデザインの現場でいちいち割り算や掛け算をするのは現実的ではありません。
しかし、プロは計算ツールを使わずに、コードをパッと見ただけで大まかな色を言い当てることができます。
それは、コードの並びから「色の特徴」を抜き出す3つのコツを知っているからです。
この簡単なルールさえ覚えれば、誰でも一瞬で色が予測できるようになります。
コツ①：一番大きい数字（アルファベット）のパーツを探す
カラーコードは、左から「赤・緑・青」のレシピです。
そのため、「一番数字が大きい（アルファベットがFに近い）パーツが、その色の主役（ベース）になる」という超強力なルールがあります。
たとえば、この記事の冒頭で登場したHEXコード「#33CC99」を見てみます。
3つのパーツ（赤：33、緑：CC、青：99）の中で、一番大きいのは真ん中の「CC（緑）」です。
この時点で「あ、この色は緑系の色なんだな」と見抜けます。
コツ②：2番目に大きい数字を混ぜて考える
主役のベース色が分かったら、次に数字が大きいパーツに注目します。
「2番目に大きい色が、隠し味として混ざり合う」と考えてください。
再び「#33CC99」を例にします。
一番大きいのは「CC（緑）」ですが、2番目に大きいのは右側の「99（青）」です。
左側の「33（赤）」はかなり小さいため、ほとんど無視して構いません。
主役の「緑」に、隠し味の「青」がたっぷり混ざり合うため、「青みがかった緑 ＝ エメラルドグリーンやミントグリーン系」という具体的な色みが浮かび上がってきます。
コツ③：数字全体の「高さ」で明るさ（トーン）が分かる
最後のコツは、コード全体の数字の「高さ（大きさ）」を見ることです。
これによって、その色が「パステルカラー」なのか「ダークカラー」なのかが分かります。
・全体的に数字が大きい（Fや200に近い）
光の量が多いため、全体的に「明るい色・薄い色（パステル調など）」になります。
・全体的に数字が小さい（0や50に近い）
光の量が少ないため、全体的に「暗い色・濃い色（ネイビーやダークグレーなど）」になります。
・3つの数字がすべて同じ、または非常に近い
赤・緑・青の光がほぼ同じ強さで相殺されるため、鮮やかさが消えて「グレー（灰色）または無彩色」になります。
この3つのコツを頭に入れておくだけで、カラーコードを見たときの景色がガラリと変わり、ただの数字の羅列が「色の設計図」に見えてくるようになります。
とはいえ、本当にコードだけで色が見分けられるようになるには、少しだけ「慣れ」が必要です。
そこで、今回学んだコツが本当に正しいかどうか、下にある入力欄に、気になるカラーコード（HEXまたはRGB）を自由に入れてみてください。
入力する前に、まずはコードを見て「一番大きい数字はどれか」「どんな色が混ざっているか」「明るさはどうか」を頭の中で予想してみるのがコツです。
そのあとで実際に色を出力させて、自分の予想が当たっているか答え合わせをしてください。
ゲーム感覚でいくつか試しているうちに、ツールを使わなくてもパッと見で色がイメージできるようになり、カラーコードへの苦手意識は完全に消え去っているはずです。
