HSL→HEX変換ツール: 無料のオンライン色変換
HSLカラーを瞬時にHEXに変換できます。一方を編集すると他方がライブで更新されます。この変換ツールは#abc、rgb(1 2 3 / 50%)、名前付きカラーなどの例も受け付けます。カラースウォッチとコピーして使えるCSS行を確認し、色がsRGBの範囲外の場合は色域外警告に注意してください。
HSL→HEX変換ツールは、ブラウザ上でHSLカラーを16進数のカラー値に変換します。HEX値を直接編集するとHSL側がライブで更新されるため、2つの表現を簡単に比較できます。カラースウォッチとコピーして使えるCSS行が結果の確認に役立ちます。
色のパースは寛容です。HSL入力だけでなく、#abc、rgb(1 2 3 / 50%)、名前付きカラーなどの例もパースできます。色がsRGBの範囲外の場合は、変換ツールが色域外警告を表示します。変換の確認中に、色がその色空間の範囲外であることに気づく助けになります。
HSLは色相・彩度・明度で色を表し、HEXは16進表記で色値を表します。デザイン資料や色の値がHSLで示されている一方、作業中のコード、ドキュメント、システムがHEXを必要とする場合、この変換は便利です。双方向ライブ編集を使えば、2つの値が想定通りの色を表しているか確認するのにも役立ちます。
変換は完全にブラウザ上で実行されます。入力はお使いのデバイス上で処理され、サーバーにアップロード・保存・送信されることはありません。登録不要で、ページの読み込み後はオフラインでも動作します。作業を中断せずに色の値を確認・比較・コピーしたい開発者、デザイナー、DevOpsエンジニアに便利です。
手順1: HSLカラーを入力または貼り付けると、HEX値が瞬時に更新されます。
手順2: HSL値とHEX値のどちらかを編集すると、もう一方がライブで更新されます。両方の形式を比較・調整できます。
手順3: カラースウォッチとコピーして使えるCSS行を確認します。色がsRGBの範囲外の場合は色域外警告をチェックします。
手順4: 16進数の結果をコピーして、コード、ドキュメント、チケット、コミットメッセージに貼り付けます。
用途: HSLの色データを16進数値のみを受け付けるシステムに移せます。
用途: 両側を編集してライブ結果を比べることで、渡されたHSLカラーとHEX値が一致するか確認できます。
用途: ドキュメント、チケット、コミットメッセージ用に、HSLカラーとそれに相当するHEXを用意できます。
用途: HEX値をコードに貼り付ける前に、色変換の健全性を確認できます。
用途: HSLとHEXの値を扱いながら、スウォッチで色をプレビューできます。
用途: 表示されたHEX結果を使う前に、色がsRGBの範囲外かどうか確認できます。