RGB と HEX カラーコードの変換方法

光の三原色の値（0 から 255）から、HEX のカラーコードと HSL の値を求めます。

カラーコードの成り立ち

各色を 16 進数 2 桁で書き、赤・緑・青の順に並べたものがカラーコードです。1 色あたり 8 bit、256 段階なので、ちょうど 2 桁に収まります。10 進数の 0 から 255 は、16 進数では 00 から FF です。3 色を合わせると 1677 万色になります。

HSL

HSL は同じ色を、色相・彩度・明度の 3 つで表したものです。色相は 0 から 360 度の角度で、赤が 0 度、緑が 120 度、青が 240 度にあたります。明るさだけを変えたいときや、同じ系統の色を並べたいときは、HSL のほうが扱いやすくなります。

相対輝度

あわせて出る相対輝度は、その色の明るさを目の感じ方に合わせて表した値です。0 が黒、1 が白になります。

$R_l$、$G_l$、$B_l$ は、各色を光の量に比例する値へ戻したものです。緑の係数がいちばん大きいのは、人の目が緑をもっとも明るく感じるからです。

例

赤 59、緑 130、青 246 は、カラーコードで #3B82F6 です。HSL では色相 217 度、彩度 91 パーセント、明度 60 パーセント、相対輝度は 0.235 になります。

59 は 16 進数で 3B、130 は 82、246 は F6 です。色相が 217 度なので、青と水色のあいだの色にあたります。

注意点

ここで扱うのは sRGB です。写真や印刷で使う別の色空間では、同じ数値でも違う色になります。

文字と背景の見やすさを測りたいときは、相対輝度そのものではなくコントラスト比を見てください。