広告スペース（AdSense審査通過後にここへ配置）

色を入力

カラーピッカーで選ぶ HEX（#RRGGBB）

RGB（各 0〜255）

HSL（H:0〜360 / S・L:0〜100%）

プリセット（クリックで反映）

HEX—
RGB—
HSL—

広告スペース

📘 説明と計算式

HEX → RGB：#RRGGBB の2桁ずつを16進数として10進数に変換します。例：#7C3AED → R=0x7C=124, G=0x3A=58, B=0xED=237。
RGB → HEX：各値を16進数2桁にして連結。例：124,58,237 → 7C,3A,ED → #7C3AED。
RGB → HSL：R,G,B を0〜1に正規化し、最大値max・最小値minから求めます。
明度 L＝(max+min)/2。
彩度 S：L≦0.5 のとき (max−min)/(max+min)、L＞0.5 のとき (max−min)/(2−max−min)。max=min のとき S=0（無彩色）。
色相 H：最大がRなら 60×((G−B)/(max−min) mod 6)、Gなら 60×((B−R)/(max−min)+2)、Bなら 60×((R−G)/(max−min)+4)。
HSL → RGB：C=(1−|2L−1|)×S、X=C×(1−|(H/60 mod 2)−1|)、m=L−C/2 を使い、Hの区間ごとに(R',G',B')を割り当て、各値に m を足して255倍します。
S・L はパーセント（%）、H は度（°）で表します。CSSでは rgb(124 58 237) や hsl(262 83% 58%) のように使えます。

📖 カラーコード変換(RGB⇔HEX⇔HSL)の使い方と解説

同じ色をRGB・HEX・HSLの3つの形式で相互に変換できるツールです。Webデザインのコード値を調べたり、色相や明るさを調整したいときに、形式をまたいで一目で対応関係を確認できます。

使い方

RGB:赤・緑・青の3成分を各0〜255で入力します(例 255, 99, 71)。
HEX:「#RRGGBB」の16進数で入力します(例 #FF6347)。先頭の#は省略してもかまいません。
HSL:色相H(0〜360°)、彩度S(0〜100%)、明度L(0〜100%)で入力します(例 9°, 100%, 64%)。
いずれか1つの形式を入力すると、残りの形式が自動で計算され、色見本も表示されます。

計算のしくみ・計算式

RGBとHEXは、同じ0〜255の値を10進数か16進数かで表記しているだけなので、表記変換のみで対応します。例えばR=255は16進数でFF、G=99は63、B=71は47となり、合わせて#FF6347です。逆にHEXを2桁ずつ区切って10進数に戻すとRGBになります。

HSLへの変換は、まず各成分を0〜1に正規化し(R=1, G=0.388, B=0.278)、最大値Max・最小値Minを求めます。明度はL=(Max+Min)/2。彩度SはMax=Minなら0、そうでなければL≦0.5のときS=(Max−Min)/(Max+Min)、L>0.5のときS=(Max−Min)/(2−Max−Min)で算出します。色相Hは最大値がどの成分かで式が分かれ、結果を6倍して60°を掛けると角度になります。先ほどのトマト色なら、おおよそH=9°, S=100%, L=64%です。

よくある質問

Q. HEXの3桁表記(#FFFや#F63)も使えますか?

A. 3桁表記は各桁を2回繰り返した6桁と同じ意味です。#F63は#FF6633を表します。入力時は6桁に展開して扱うと確実です。

Q. RGBとHSLを往復すると値が少しずれるのはなぜですか?

A. RGBは0〜255の整数、HSLは角度や百分率で表すため、変換時に小数の丸めが発生します。1〜2の差は丸め誤差で、見た目はほぼ変わりません。

Q. 透明度(アルファ)は変換できますか?

A. このツールは不透明な色(RGB/HEX/HSL)を対象としています。透明度を扱うRGBA・HSLAや#RRGGBBAAは、アルファ値を別途指定してください。

知っておくと役立つこと

HSLは「色味はそのままに明るさだけ下げる」といった調整が直感的です。Lだけ動かせば、同系色の濃淡バリエーションを手早く作れます。
HEXはWebやデザインツールで最も広く使われる表記で、CSSでは color:#FF6347 のように指定します。コピペでの受け渡しに向いています。
白は #FFFFFF(255,255,255)、黒は #000000(0,0,0)、グレーはR=G=Bが揃った色です。HSLでは彩度S=0がグレースケールを意味します。