HEX→HSL変換ツール – CSSカラー用 | My-DevTools
このHEX→HSL変換ツールを使えば、入力中に色のHSL値をリアルタイムで確認したり、どちらか一方を編集して他方がライブで更新される様子を見たりできます。#abcやrgb(1 2 3 / 50%)、色名など、柔軟な色入力にも対応しています。スウォッチを確認し、コピーして使えるCSSコードを取得し、sRGBの範囲外の色には色域外警告を表示します。
HEX→HSLは、16進数とHSLの値を行き来する必要がある開発者のための、ブラウザ上で動作するカラー変換ツールです。HEXの色を入力するとHSLの相当値が表示され、どちらか一方を編集すれば他方がライブで更新されます。また、#abcやrgb(1 2 3 / 50%)、色名といった柔軟な入力にも対応し、カラースウォッチ、コピーして使えるCSSコード、そして色がsRGBの範囲外の場合は色域外警告を表示します。
この変換では、同じ色を2つの異なる表記法で表示します。HEXは16進数成分で色を表し、HSLは色相・彩度・明度で色を記述します。双方向ライブ編集により、どちらかの表現を変更して、他方に反映された更新後の値を確認できます。スウォッチは色を視覚的にチェックするのに役立ち、CSSコードはそのままコードにコピーできます。
HEXとHSLの変換は、プロジェクト、システム、またはドキュメントが一方の形式を求める場合に便利です。たとえば、HSLを受け付けるワークフロー向けに16進数値をHSLに変換したり、HSL値とその16進数の対応値を比較したりできます。このツールは、ドキュメント、チケット、コードレビュー用の色の値を用意するのにも役立ちます。
HEX→HSLは完全にブラウザ上で動作します。入力はお使いのデバイス上で処理され、アップロード、保存、サーバーへの送信はされません。登録は不要で、ページの読み込み後はオフラインで変換が動作します。そのため、サーバー接続に頼らずに色を素早くプライベートに確認・変換したい開発者やDevOpsエンジニアに便利です。
手順1: 入力欄に色を入力または貼り付けます。期待される形式は16進数ですが、#abcやrgb(1 2 3 / 50%)、色名といった例も解析で認識されます。
手順2: HEXまたはHSLの値を編集します。他方の値がライブで更新されるため、作業しながら2つの表現を比較できます。
手順3: カラースウォッチを確認して、色を視覚的にチェックします。sRGBの範囲外の場合は、ツールが色域外警告を表示します。
手順4: 変換した色をコードで使う場合は、コピーして使えるCSSコードをコピーします。
手順5: 必要に応じて利用可能なオプションを調整し、コピーする前に表示された結果を確認します。
用途: 16進数の色をHSLのみを受け付けるシステムに移す場合。ライブ変換により、自分で計算することなくコピーできる値が得られます。
用途: 与えられた16進数の元の値とHSL値が一致するか確認します。どちらかを編集すると他方が更新されるため、比較が簡単です。
用途: ドキュメント、チケット、コミットメッセージ用に、16進数またはHSLのカラースニペットを用意します。コピーして使えるCSSコードにより、コード内でも値を使い続けられます。
用途: 結果をスタイルシートに貼り付ける前に、色変換を簡単に検証します。スウォッチは色の値とともに視覚的なチェックを提供します。
用途: 変換した値を使う前に、sRGBの範囲外かもしれない色を確認します。色域外警告がその状態に注意を促します。
用途: rgb()値や色名など、対応する別の形式でコピーした色入力を扱います。入力が16進数で書かれていない場合、柔軟な解析が時間の節約になります。