HEX から HSL へ—変換の仕組みとツールの使い方
HEX カラーコードは、赤・緑・青の各成分を 16 進法で 00 から FF（0 から 255）の範囲で表記した形式です。例えば #4f46e5 は、R=4f（79）、G=46（70）、B=e5（229）という値を持ちます。3 桁の短縮形 #abc は各桁が 2 桁分に展開されます（#abc → #aabbcc）。HEX は CSS やデザインツールで広く使われますが、人間が「この色をもう少し明るくしたい」と直感的に調整するには向いていません。数字の並びから明るさや鮮やかさを読み取るのが難しいためです。
HSL（Hue, Saturation, Lightness）は、色相を角度（0°–360°）、彩度と明度をパーセンテージ（0%–100%）で表します。例えば #4f46e5 の HSL 値は hsl(244°, 77%, 58%) です。明度だけを変えると色相は変わらず、同じ色味のまま明るいバリエーションを生成できます。この特性により、テーマカラーやパレットの作成で HSL は非常に実用的です。
本ページは、6 桁または 3 桁の HEX コードを入力すると、即座に HSL 値を返し、同時に RGB、HSV、CMYK、LAB の各形式も表示します。変換はすべてブラウザ内で行われ、入力データは外部に送信されません。
入力と出力—受け付ける形式と変換結果
入力
- 6 桁の HEX コード（先頭
#の有無は問わない）：例#1E90FFまたは1e90ff - 3 桁の短縮形：例
#abcまたはabc - 大文字・小文字は区別しません。
出力
- HSL：色相 0°–360°、彩度 0%–100%、明度 0%–100%
- 同時に表示される値：HEX（正規化された 6 桁）、RGB、HSV、CMYK、LAB
無効な値（例：#GGG、#1234、空文字）を入力すると、エラーメッセージ「Enter a hex color like #4f46e5 or #abc.」が表示されます。入力フィールドを編集するたびに、すべての出力がリアルタイムで更新されます。
変換の裏側—RGB と HSL の関係
HSL は RGB から以下のステップで計算されます。
- RGB 各成分を 0–255 から 0–1 の範囲に正規化。
- 最大値(R, G, B)と最小値を求め、その差 Δ を計算。
- 明度 L：
(最大値 + 最小値) / 2 - 彩度 S：Δ が 0 のとき 0。それ以外は L に応じて
Δ / (1 - |2L - 1|) - 色相 H：最大値がどの成分かで角度計算。0°–360° にスケーリング。
HSL と HSV はどちらも色相を使いますが、明度 (Lightness) と 明るさ (Value) の定義が異なります。HSL の明度は白と黒の中間を 50% とし、HSV の明るさは最も強い成分の値を 100% とします。そのため、同じ RGB 値から算出される HSL と HSV は一致しません。本ページでは HSL を標準の CSS 準拠で出力します。
注意すべきルールとエッジケース
- アルファチャンネルは扱わない：標準の HEX（6 桁・3 桁）に透明度情報は含まれず、HSL もアルファを持ちません。変換は常に完全な不透明色として扱われます。
- 色域外の自動調整：CMYK や LAB で色域外の値を入力すると、表示可能な色に近似されます。その色を再び HEX に変換すると、元の値と微妙に異なる場合があります。
- CMYK 値は推定値：スクリーン上の近似であり、印刷用の最終的な色合わせには使えません。
- ブラウザごとのガマット差：sRGB の色域内でも、表示デバイスによって見え方が異なる可能性があります。
このツールが役立つ場面
- CSS カスタムプロパティとテーマ：HEX で指定されたブランドカラーを HSL に変換し、
--color-primary: hsl(244°, 77%, 58%);のように定義。:hoverで明度を 10% 下げるなど、数値操作が直感的になります。 - コントラストチェック：WCAG 2.1 に準拠するには、テキストと背景の相対輝度差が 4.5:1（通常テキスト）以上必要です。HSL で明度を調整しながらコントラスト比を検証する際、色相が変わらないため作業が効率的です。
- パレット生成：HSL の色相を 30° ずつずらすだけで同一彩度・明度の補色スキームが作れます。HEX で同様の操作は事実上不可能です。
- アクセシビリティ監査：HSL は「色相を保ったまま明度だけ上げる」操作が容易なため、色覚多様性に対応した配色を素早く試せます。
よくある質問（FAQ）
Q: 3 桁の HEX コードはどのように展開されますか？
A: 各桁が 2 桁ずつに複製されます。例えば #abc は #aabbcc 、#f80 は #ff8800 として解釈されます。
Q: HSL の各数値の範囲と意味は？ A: 色相は 0°（赤）から 360°（再び赤）の色相環上で、0°=赤、120°=緑、240°=青。彩度は 0%（グレースケール）から 100%（純色）。明度は 0%（黒）から 100%（白）です。
Q: CMYK の値をそのまま印刷に使えますか？ A: いいえ。画面上の推定値であり、実際の印刷機・用紙・インクの組み合わせに合わせるには専用のプロファイルとキャリブレーションが必要です。
Q: なぜ LAB や CMYK に変換した値が HEX と完全一致しないことがあるのですか？ A: LAB や CMYK の色空間は sRGB（HEX の元）より広い色域を持ちます。色域外の色は表示可能な範囲にクリップされるため、変換を往復すると誤差が生じます。
Q: アルファチャンネル付き HEX（#RRGGBBAA）は扱えますか？ A: いいえ。本ページは標準の 6 桁および 3 桁の HEX のみ対応し、8 桁形式は受け付けません。
Q: 大量の HEX コードを一括変換できますか？ A: いいえ。このページは一回に一つの色だけを変換する設計です。まとめて処理が必要な場合は、プログラムによる変換（JavaScript の HSL 変換関数など）をご検討ください。