HEXカラーコードをRGB・HSL形式に変換する方法

16進数カラーコード（HEX）を入力し、CSS開発やデザインで必要となるRGBやHSLの形式、補色コード、明暗判定をすばやく取得する方法を解説します。

概要：HEXコードを各種色空間へ変換

Web制作やUI設計では、仕様書のHEXカラーコードをCSSのRGB値やHSL値に置き換える作業が度々発生します。カラーピッカーを使用すると、3桁または6桁のHEXコードを入力するだけで、各色空間の値や補色、背景色との視認性判断に役立つ明暗判定を一度に算出できます。先頭の「#」記号は付いていても省略されていても正常に処理されます。

ステップごとの変換手順

1. カラー入力欄に、変換したい3桁または6桁のHEXコード（例: #3498db または f00）を入力します。
2. 出力形式メニューから表示したい形式（すべて、HEX、RGB、HSL）を選択します。
3. 「変換」を実行すると、正規化された6桁HEX値、RGB表記、整数で丸められたHSL表記、補色コード、明暗判定結果が表示されます。

デザイン画像や写真から直接色コードを取り出したい場合は、画像カラーピッカーをあわせて活用すると便利です。

出力結果の確認と仕様

出力されるHEX値は小文字の6桁表記に統一されます。RGB値は赤・緑・青の各要素が0から255の整数で表示され、HSL値の色相、彩度、明度は扱いやすい整数値に丸められます。また、色の各成分の加重平均に基づき、背景に適した明るい色か暗い色かの判定（is_light）も行われます。

実践例：代表的なコードの変換

入力欄に #3498db を入力し、出力形式を「すべて」にして実行します。結果としてHEX値 #3498db、RGB値 rgb(52, 152, 219)、HSL値 hsl(204, 70%, 53%)、補色 #cb6724 が出力され、明暗判定は明るい色として判定されます。

利用上の制限事項

• 入力可能な形式は3桁または6桁の16進数カラーコードのみです。
• アルファチャンネルを含む8桁のHEX値や、RGBA関数の直接入力には対応していません。
• 明暗判定は内部計算による目安であり、WCAGのコントラスト比基準そのものを保証するものではありません。

よくある間違いと対策

• 透明度を含む8桁コードを入力してしまう：末尾2桁のアルファ値を取り除き、6桁または3桁に整えて入力してください。
• rgb(...) やカラー名を入力してしまう：カラーコードを16進数表記（例: #ff0000）に直してから入力してください。

よくある質問

3桁の短縮表記は利用できますか？

はい。3桁のコード（例: #fff）を入力すると、各桁が2回繰り返された6桁表記に自動展開されて処理されます。

補色はどのように算出されますか？

RGBの各チャンネル値（255から元のRGB各値を差し引いた値）をもとに、反転した16進数カラーコードが算出されます。

明暗判定は何を基準にしていますか？

赤に0.299、緑に0.587、青に0.114を掛け合わせた重み付け合計が中央値（128）を超えるかどうかに基づいて判定されています。