カラー変換

このツールについて

HEX・RGB・HSL は、同じ色を別の書き方で表したものです。このツールはブラウザ内で相互変換し、プレビューで実際の色を確かめられます。入力した色は外部へ送信しません。それぞれの記法の関係と使い分けを押さえておくと、配色作業がスムーズになります。

HEX と RGB は中身が同じ

#RRGGBB は赤・緑・青の強さを 16 進数（00〜FF＝0〜255）で並べたもので、rgb(0〜255, …) と表しているものと同一です。たとえば #FF0000 と rgb(255, 0, 0) は同じ赤です。HEX は Web の指定、RGB は計算やツールで扱いやすい、という違いだけです。

HSL は人の感覚に近い軸

HSL は、色相（0〜360 度の色の輪）・彩度（鮮やかさ %）・明度（明るさ %）で色を指定します。「色味はそのままで少しだけ明るく」「少しくすませたい」といった微調整は、RGB を直接いじるより HSL の方が直感的に行えます。

往復すると末尾がわずかにずれる

RGB は整数、HSL は角度と百分率で表すため、RGB → HSL → RGB と往復すると丸めで 1 の位が変わることがあります。見た目に影響はありませんが、厳密な値が必要なときは元の記法を基準にしてください。

3 桁短縮と透明度

#RGB のような 3 桁表記は #RRGGBB に展開して解釈します。透明度が必要なときは rgba() や 8 桁 HEX を使いますが、本ツールは不透明色の変換が中心なので、アルファ成分は変換後の値に付け足してください。