HSL → HEX 変換ツール
このツールとは HSL → HEX 変換ツール
このツールはHSL（色相・彩度・明度）カラー値をHEXカラーコードに変換します。HSLは色を直感的に調整しやすい形式で、Figma・Sketch・Adobe XDなどのデザインツールで広く使われています。このツールでhsl()の値を入力するだけで、CSSやWebデザインで必要な#RRGGBBコードを即座に取得できます。
使い方
- 色相（0〜360）、彩度（0〜100）、明度（0〜100）をそれぞれ入力します。
- HEXコードとRGB値がリアルタイムで表示されます。
- HEXコードの横のコピーボタンをクリックして#RRGGBBコードをコピーします。
- 上部のリンクから他の6種類のカラー変換ツールに切り替えられます。
こんなときに便利
Figmaでhsl(217, 91%, 60%)のブランドカラーを決めたけれど、Reactコンポーネントのstyles.tsにはHEXで書きたい。そんなときは値を入力するだけで#3B82F6が得られ、そのまま貼り付けられます。色の微調整はHSLで行い、コードには正確なHEXを渡せるので、変換を目分量で済ませずに済みます。
よくある質問
hsl(0, 100%, 50%)をHEXに変換すると？
#ff0000（純粋な赤）になります。色相0°、彩度100%、明度50%は最も鮮やかな赤を表します。
なぜ他のツールと結果が1桁違うことがあるの？
中間計算の丸め処理によって±1の差が生じる場合があります。視覚的にはほぼ無差別な誤差で、実用上の問題はありません。
HSLとRGBはどちらが使いやすい？
色の調整にはHSLが直感的です。色相・彩度・明度を個別に変えるだけで意図した色を作りやすい。CSSでの指定にはHEXかRGBが一般的です。