HSLからHEXへの変換ページについて
このページは、HSL（色相・彩度・明度）で指定された色を、即座に16進数（HEX）カラーコードへ変換します。入力は色相0～360度、彩度0～100%、明度0～100%の3つの値です。例として243, 75%, 59%を入力すると、出力として#4f46e5という6桁のHEXコードが得られます。すべての処理はブラウザ内で完結し、入力したデータが外部に送信されることはありません。
このページの独自性
HSLは人間の色認識に合わせて設計されたカラーモデルです。明度だけを変えても色相が保たれるため、パレット生成やテーマ制作に広く使われます。一方HEXはRGBを16進数で表した表記法で、6桁（または3桁略記）が標準です。この変換はsRGB色域内で完全にロスレスであり、LABやCMYKへの変換のように色域外調整が発生しません。そのため、HSLで意図した色がそのままHEXで再現される点が、このツールの核心的な価値です。
入力と出力の詳細
- 入力: 色相は0～360の整数、彩度と明度はパーセント記号付きの数値（例：
75%）。各値はカンマ区切りで入力します。編集中のすべての値は即座に他の全カラーフィールド（RGB、HSV、CMYK、LAB）を更新します。 - 出力: メイン出力は6桁のHEXコード（例：
#1e90ff）。各RGBチャンネルが2桁の16進数で表せる場合（#aabbccなど）、自動的に3桁略記（#abc）も表示されます。 - エッジケース: 値が範囲外または不正な形式の場合、ツールは次のエラーメッセージを表示します：
「色相0～360と2つのパーセンテージでHSLを入力してください。例：243, 75%, 59%」
変換の仕組み：HSLからRGB、そしてHEXへ
HSLからHEXへの変換は、まずHSLからRGBを計算し、そのRGB値を16進数に変換することで行われます。具体的な手順は次の通りです。
- HSLをRGBに変換: 色相H（度）を0～1の範囲に正規化し、彩度Sと明度Lを0～1に変換。標準的なアルゴリズム（例：CSS Color Module Level 4準拠）を用いてR, G, B各値を0～255の整数にします。
- RGBを16進数に変換: 各チャンネルを16進数2桁に変換（
255→FF、0→00）、結合して#RRGGBBの形に。各値が16の倍数（0x00、0x11、0x22…0xFF）でかつチャンネル間で同じ場合に3桁略記が可能です。
このアルゴリズムはsRGB色域内で完全に可逆であり、どの値でも色域外調整は不要です。
実用的な使用例
- デザイナー: FigmaやSketchでHSLパレットを作成し、CSSや開発ツールにHEXコードで渡す際に利用します。
- フロントエンド開発者: デザインファイルからHSL値を受け取り、CSSプロパティ
color: #4f46e5;として実装する変換に使います。 - アクセシビリティ調整: WCAGのコントラスト比を満たすため、HSLの明度だけを調整し、その結果をHEXに変換してコードに反映。色相を変えずにコントラストを確保できます。
よくある間違いと注意点
- パーセント記号
%を省略するとエラーになります。常に75%のように記述してください。 - 色相に360を超える値（例：400度）を入力するとエラーメッセージが表示されます。通常の色相は0～360（360度は0度と同じ）です。
- HEXの6桁形式にはアルファ値が含まれません。透過が必要な場合は8桁形式（
#RRGGBBAA）を別途使用する必要があります。このツールは8桁を出力しません。 - CMYKの表示値はあくまで画面用の推定値であり、印刷時のプロセスカラーとは異なる場合があります。
HSLの限界とHEXの役割
HSLは人間の直感に合った調整ができる一方、色の明るさを独立して操作できる利点があります。しかしHEXはその構造上、明度や彩度を直接表現する次元を持ちません。HEXはRGBの単なる表記法であり、色をそのまま保存するのに適しています。HSLでテーマ全体の明度を変えるといった作業にはHSLが優れ、実装段階ではHEXに変換することでCSSで直接使用できます。このページはその橋渡しとして、シンプルかつ正確な変換を提供します。
よくある質問（FAQ）
Q: 3桁のHEXコードはいつ使われますか？
A: 各RGBチャンネルが16の倍数（0x00, 0x11,..., 0xFF）でかつチャンネル間で値が重なる場合（例：#aabbcc → #abc）、3桁略記が使用可能です。ただし古いブラウザでは対応していない場合があるため、最新の仕様では6桁が推奨されます。
Q: HSL値が不正な場合、ツールは何を表示しますか？
A: 上記のエラーメッセージを表示します。具体的には「色相0～360と2つのパーセンテージでHSLを入力してください。例：243, 75%, 59%」と表示されます。
Q: 変換結果のHEXコードに大文字と小文字の違いはありますか？
A: 大文字小文字はどちらでも有効ですが、このツールは小文字（例：#4f46e5）で出力します。CSSでは大文字小文字は区別されません。
Q: HSLからHEXへの変換で色域外になることはありますか？
A: ありません。HSLの範囲内（色相0～360、彩度0～100%、明度0～100%）の値はすべてsRGB色域内に収まるため、変換は常に可能です。
Q: このツールはアルファ値（透明度）を扱えますか？
A: いいえ。HSLにはアルファが含まれないため、6桁HEXのみの出力です。8桁HEX（#RRGGBBAA）が必要な場合は、他のツールを使用する必要があります。
Q: 表示されるCMYK値は印刷に使えますか？
A: あくまで画面上の概算であり、実際の印刷用CMYKプロファイルとは異なることがあります。正確なCMYKはプロフェッショナルな変換ソフトを使用してください。