カラーコード変換：HEX・RGB・HSL を相互に変換する

#2F6FEB や rgb(47, 111, 235) を入力すると、3つの表記と明るさの値が同時に得られます。スタイル調整中にデザインツールへ切り替えずに、ボタンの文字を白にするか黒にするかを判断できます。

色の形式を変換したい場面

デザインでは HEX が渡されるのに、CSS では透明度やグラデーションのために rgb() を使いたいことがあります。古いプロジェクトの HSL 値を、HEX しか受け付けない設定に貼りたい場合もあります。形式が揃っていないと、1色変えるだけで複数のツールを行き来することになります。

もう一つよくあるのがコントラストの判断です。ブランドカラーが決まっているとき、ボタンの文字を白と黒のどちらにすべきか。本ツールは相対輝度と提案を返すので、粗い判断ですが、明らかに読みにくい組み合わせは除外できます。

#RGB、#RRGGBB、rgb(12, 34, 56) の3形式に対応し、#abc は先に #aabbcc へ展開されます。rgba() は最初の3チャンネルだけを使い、透明度は無視されます。8桁の16進数（#RRGGBBAA）は形式エラーになるため、先に後ろ2桁を外してください。

HSL は出力のみで、入力には対応していません。相対輝度は WCAG の係数（0.2126R＋0.7152G＋0.0722B）で計算し255で割った値で、0.5を超えると濃い文字を勧め、それ以下なら薄い文字を勧めます。sRGB の線形化は行わないため、目安であってコントラスト比ではありません。

WCAG のコントラスト比は計算せず、4.5:1 のような基準を満たすかどうかの判定もしません。正式なアクセシビリティ確認は、ブラウザの開発者ツールや専用のコントラストチェッカーで、実際の前景色と背景色の組み合わせを使って行ってください。

CMYK、HSV、Lab、P3 などの色空間には対応せず、色域のマッピングやガンマ処理も行いません。印刷やブランドカラーの管理にはデザインソフトやカラーマネジメントツールが必要で、Web の配色確認ならこの変換で十分です。

透明度や HSL の入力に対応していますか？

一部のみです。rgba() は最初の3チャンネルだけを使い、透明度は無視されます。8桁の16進数は形式エラーになります。HSL は出力のみで、入力には対応していません。

相対輝度はどう使いますか？

WCAG の係数（0.2126R＋0.7152G＋0.0722B）で計算し、255で割った値です。0.5を超えると濃い文字を勧めます。アクセシビリティの適合判定は WCAG のコントラスト比で確認してください。

3桁の表記でも正しく変換されるのはなぜですか？

#abc を #aabbcc に展開してから計算するためで、デザインツールと同じ挙動です。つまり #f00 と #ff0000 はまったく同じ結果になります。