画面に映る色は、すべて赤・緑・青(RGB)という三つの光の強さの組み合わせで作られています。ところが、まったく同じ一つの色を、16進数の HEX で書いたり、色相を中心にした HSV や HSL で書いたり、印刷用の CMYK で書いたりと、いくつもの形で表すことができます。見た目の表記はばらばらでも、これらはたがいに決まった計算式で行き来できます。式はちゃんと存在します。ここでは主要な変換の公式を、ひとつずつ順番に見ていきます。
HEX は RGB を16進数で並べただけのものです。#RRGGBB の各2桁が、それぞれ赤・緑・青の 0〜255 を表します。16進数の1桁は 0〜15(0〜9 と A〜F)なので、2桁でちょうど 0〜255 を表せます。たとえば #FF6347 なら、FF が 255、63 が 99、47 が 71 で、RGB(255, 99, 71) になります。
各桁の値 = 16 × (左の桁) + (右の桁) FF = 16 × 15 + 15 = 255 RGB(255, 99, 71) → FF, 63, 47 → #FF6347
逆に RGB から HEX へは、各成分を16進数2桁に直して連結するだけです。#f63 のような3桁表記は、各桁を2回くり返した #ff6633 の省略形です。ここには難しい理屈はなく、単なる書き換えだと考えて構いません。
HSV は色を「どの色みか(色相 H)」「どれだけあざやかか(彩度 S)」「どれだけ明るいか(明度 V)」の三つに分けます。まず R, G, B をそれぞれ 255 で割って、0〜1 の範囲にそろえます。そのうえで、最大の成分・最小の成分・その差を求めます。
R' = R/255, G' = G/255, B' = B/255 Cmax = max(R', G', B') Cmin = min(R', G', B') delta = Cmax - Cmin
明度は一番強い成分そのもの、彩度は「最大値に対する差の割合」で決まります。真っ黒(Cmax が 0)のときだけは、割り算を避けて彩度を 0 とします。
V = Cmax S = delta / Cmax (Cmax が 0 のときは S = 0)
色相は、三つのうちどれが最大かで場合分けして求めます。単位は度で、0〜360 の範囲です。
delta = 0 → H = 0(無彩色なので色みなし) Cmax = R' → H = 60 × (((G'-B')/delta) を 6 で割った余り) Cmax = G' → H = 60 × ((B'-R')/delta + 2) Cmax = B' → H = 60 × ((R'-G')/delta + 4)
やっていることは、色相環の上を「赤→黄→緑→水色→青→紫→赤」と一周する角度を、三つの成分の大小関係から逆算しているだけです。60 という数字は、6つの色の区間(各 60 度で合計 360 度)に対応しています。
逆変換もほとんど機械的です。彩度と明度から色の「幅」を作り、色相の位置に応じて三つの成分へ振り分けます。
C = V × S X = C × (1 - |((H/60) を 2 で割った余り) - 1|) m = V - C
H が 0〜60 度なら (R, G, B) = (C, X, 0)、60〜120 度なら (X, C, 0)、120〜180 度なら (0, C, X)…というように、60 度ごとに並びを入れ替えます。最後に全体へ m を足し、255 倍して整数に戻します。C はいちばん色みの濃い量、X はとなりの色へ混ざっていく中間量、m は底上げ分だと考えると分かりやすいです。
HSL も色相・彩度・明度(Lightness)ですが、明度の定義が HSV と違います。HSL の L は、最大と最小の平均です。
L = (Cmax + Cmin) / 2 S = delta / (1 - |2L - 1|) (delta が 0 のときは S = 0)
色相 H の求め方は HSV とまったく同じです。違いは明度で、HSV の V が「いちばん明るい成分」だったのに対し、HSL の L は「上と下の真ん中」です。そのため同じ純色の赤でも、HSV では V=100%・S=100%、HSL では L=50%・S=100% と、数字の意味がずれます。どちらが正しいという話ではなく、目的に応じた別々のものさしだと考えてください。
CMYK は印刷向けの表し方です。光を足していく RGB とは逆に、白い紙からインクで光を「引いていく」減法混色にもとづきます。
R' = R/255, G' = G/255, B' = B/255 K = 1 - max(R', G', B') C = (1 - R' - K) / (1 - K) M = (1 - G' - K) / (1 - K) Y = (1 - B' - K) / (1 - K)
K は黒(もっとも濃い成分の不足分)を表し、残りの C・M・Y はそこからの差で決めます。真っ黒で max が 0 のときは K=1 とし、C・M・Y はすべて 0 にします(1-K が 0 になり割り算ができなくなるのを避けるためです)。最後にそれぞれ 100 倍すれば、おなじみのパーセント表記になります。
ここまで見てきたどの変換も、「まず 0〜1 に正規化し、最大と最小を調べ、その関係から各軸を計算する」という同じ流れでできています。公式は確かに存在し、しかも一度理解すれば、たがいに逆算できるきれいな対応関係になっています。このツールのカードに並ぶ RGB・HSV・HSL・CMYK の値も、すべてこの計算式そのままで作られています。式の形をながめるより、「最大の成分が明るさ、最大と最小の差が鮮やかさ、その差の向きが色み」という三点をつかむのが、色の変換を理解する近道です。