RGB → HSL カラー変換ツール
このツールとは RGB → HSL カラー変換ツール
このツールはRGB値（赤0〜255・緑0〜255・青0〜255）をHSL（色相・彩度・明度）に変換します。HSLは色の操作に直感的な形式で、RGB個別チャンネルを調整するよりも明度を変えるだけで明るい色や暗い色のバリエーションを簡単に作れます。既存のRGBベースのコードをHSLのデザインシステムに移行する際に役立ちます。
使い方
- RGBフィールドに赤・緑・青の値（0〜255）をそれぞれ入力します。
- HSL値とHEXコードがリアルタイムで更新されます。
- HSL横のコピーボタンでhsl(h, s%, l%)形式をコピーできます。
- 上部のリンクから6種類のカラー変換モードに切り替えられます。
こんなときに便利
古いCSSでrgb(59, 130, 246)と定義したブランドカラーを、HSLベースのデザインシステムに移したいときに便利です。この値を入力するとhsl(217, 91%, 60%)が返ってきます。あとは明度を55%にすればホバー状態、45%にすればアクティブ状態と、色相をそのままに体系的なバリエーションを作れます。
よくある質問
rgb(255, 0, 0)はHSLで何になりますか？
rgb(255, 0, 0)はhsl(0, 100%, 50%)（純粋な赤）です。色相0°が赤、彩度100%・明度50%で最も純粋な赤を表します。
rgb(0, 0, 0)はHSLで何になりますか？
rgb(0, 0, 0)はhsl(0, 0%, 0%)（黒）です。明度0%は常に黒になります。
RGBをHSLに変換すると何が分かりますか？
HSLに変換すると色の特性が一目で分かります。rgb(59, 130, 246)からは色の傾向が分かりにくいですが、hsl(217, 91%, 60%)なら青系（217°）・高彩度（91%）・やや明るい（60%）と直感的に理解できます。