HEX から HSL への変換ツール
入力するだけで HEX から HSL へリアルタイムに変換します。無料かつ瞬時に計算され、具体的な変換例や代表的なカラーチャートも掲載しています。
HEX の値を入力すると、その下に HSL の値が表示されます。カラーピッカーから色を選択することも可能です。
変換の具体例
HEX #ff5733 = HSL 11, 100%, 60%
変換の仕組み
- HEXコードは、RGBの3つのチャンネルを16進数で表現したものです。各チャンネルが2桁で表され、00（0）からff（255）までの値をとります。
- HSLは、色相（色相環上の0〜360°）、彩度、輝度によって色を表現します。特定の成分だけを変更して、色を暗くしたり鮮やかさを抑えたりする調整が簡単に行えます。
代表的な色の HEX と HSL の対応表
| 色 | HEX | HSL |
|---|---|---|
| 赤（レッド） | #ff0000 | 0, 100%, 50% |
| オレンジ | #ffa500 | 39, 100%, 50% |
| 黄色（イエロー） | #ffff00 | 60, 100%, 50% |
| 緑（グリーン） | #008000 | 120, 100%, 25% |
| シアン | #00ffff | 180, 100%, 50% |
| 青（ブルー） | #0000ff | 240, 100%, 50% |
| 紫（パープル） | #800080 | 300, 100%, 25% |
| ピンク | #ffc0cb | 350, 100%, 88% |
| 茶色（ブラウン） | #a52a2a | 0, 59%, 41% |
| 白（ホワイト） | #ffffff | 0, 0%, 100% |
| 灰色（グレー） | #808080 | 0, 0%, 50% |
| 黒（ブラック） | #000000 | 0, 0%, 0% |
すべての変換処理はお使いのブラウザ上で行われます。入力したデータがBroBroGoにアップロードされることはありません。
よくある質問
HEX から HSL への変換方法を教えてください。
上の入力欄に HEX の値を入力または貼り付けると、入力に合わせて HSL の値がリアルタイムに更新されます。また、カラーピッカーを使って視覚的に色を選択することもできます。
変換は正確ですか？
値は、CSSやデザインツールで一般的に使用される整数に丸められます。その差は非常にわずかであり、人間の目で識別できるレベルではありません。