HSL → RGB カラー変換ツール
このツールとは HSL → RGB カラー変換ツール
このツールはHSL値（色相0〜360°・彩度0〜100%・明度0〜100%）をRGB値（赤・緑・青、各0〜255）に変換します。CSSやデザインシステムでHSL形式の色をJavaScript・画像処理・数値チャンネルを必要とするAPIに渡す際に使います。Canvas ImageDataやWebGLへの入力値として特に便利です。
使い方
- HSLフィールドに色相（0〜360）・彩度（0〜100）・明度（0〜100）を入力します。
- RGB値とHEXコードがリアルタイムで更新されます。
- RGB横のコピーボタンでrgb(r, g, b)形式をコピーできます。
- 上部のリンクから6種類のカラー変換モードに切り替えられます。
こんなときに便利
JavaScriptで色相を0〜360°でループさせて虹色エフェクトを作っていて、Canvas ImageDataオブジェクトのピクセルに書き込む段階で困っていませんか。ここではhsl()文字列ではなく、R・G・Bを別々のバイト値で渡す必要があります。各hsl()の出力をこのツールでrgb()に変換すれば、そのまま配列に入れられる個別のチャンネル値がすぐ手に入ります。
よくある質問
hsl(120, 100%, 50%)はRGBで何になりますか？
hsl(120, 100%, 50%)はrgb(0, 255, 0)（純粋な緑）です。色相120°がカラーホイール上の緑に対応します。
hsl(240, 100%, 50%)はRGBで何になりますか？
hsl(240, 100%, 50%)はrgb(0, 0, 255)（純粋な青）です。色相240°が青に対応します。
HSL→RGBとHSL→HEXはどう使い分けますか？
Canvas ImageData・WebGL・Three.jsなど数値チャンネル値が必要なAPIにはHSL→RGBを使います。CSS文字列やHEXコードが必要な場合はHSL→HEXを使いましょう。