カラーコード変換ツール
色を HEX・RGB・HSL の間で相互変換し、相対輝度から濃い文字と薄い文字のどちらが読みやすいかを示します。#RGB、#RRGGBB、rgb(12, 34, 56) の形式に対応し、スタイル調整中の色値確認に使えます。
使い方
- #RRGGBB、#RGB、rgb(12, 34, 56) のいずれかの形式で色を入力します。
- HEX・RGB・HSL と相対輝度、濃い文字か薄い文字かの目安が同時に表示されます。
- 1つのチャンネルだけ変えて再入力すると、近い色との差を比べられます。
よくある質問
透明度や HSL の入力に対応していますか？
一部のみです。rgba() は最初の3チャンネルだけを使い、透明度は無視されます。8桁の16進数は形式エラーになります。HSL は出力のみで、入力には対応していません。
相対輝度はどう使いますか？
WCAG の係数（0.2126R＋0.7152G＋0.0722B）で計算し、255で割った値です。0.5を超えると濃い文字を勧めます。アクセシビリティの適合判定は WCAG のコントラスト比で確認してください。
3桁の表記でも正しく変換されるのはなぜですか？
#abc を #aabbcc に展開してから計算するためで、デザインツールと同じ挙動です。