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