変換ツール
RGB と HSL 変換
ブラウザで RGB（0-255）と HSL（色相、彩度、明度）を双方向変換。任意チャンネル入力、カラーピッカー、プリセットクリック - ライブスウォッチ、rgb() CSS、hsl() CSS が連動更新。スタイルシート、デザイントークン、異なる色モデル間の引き渡しに。アップロードなし。
RGB と HSL 変換について
ブラウザで RGB（0-255）と HSL（色相、彩度、明度）を双方向変換。任意チャンネル入力、カラーピッカー、プリセットクリック - ライブスウォッチ、rgb() CSS、hsl() CSS が連動更新。スタイルシート、デザイントークン、異なる色モデル間の引き渡しに。アップロードなし。
RGB と HSL 変換の使い方
- R/G/B を 0-255 で入力 - またはネイティブピッカー。
- 対応する H/S/L（色相 0-360、彩度/明度 0-100%）を確認。
- H/S/L を編集して逆変換; RGB とスウォッチが即更新。
- rgb() または hsl() CSS（または HEX）をスタイルシート用にコピー - 登録不要。
RGB と HSL 変換の例
Pure red
rgb(255, 0, 0) → hsl(0, 100%, 50%)。
Tailwind blue-500
rgb(59, 130, 246) → hsl(217, 91%, 60%)。
Neutral gray
rgb(128, 128, 128) → hsl(0, 0%, 50%)。グレーは彩度 0 のため色相は 0。
HSL to RGB
hsl(120, 100%, 50%) → rgb(0, 255, 0)（pure green）。
完全なガイドを読む
RGB と HSL 変換 の使い方：完全ガイド（2026年版） - 5 分の読書
RGB と HSL 変換に関するよくある質問
- RGB を HSL に変換するには？
- R/G/B を 0-255 で入力。色相（0-360）、彩度（0-100%）、明度（0-100%）を計算しコピー可能な hsl() CSS を表示。例: rgb(255, 0, 0) は hsl(0, 100%, 50%)。
- HSL から RGB にも？
- はい。H/S/L 編集で RGB、rgb() CSS、HEX、スウォッチが同時更新。色相は 360 でラップ、彩度/明度は 0-100 にクランプ。
- H、S、L の意味は？
- Hue は色環上の角度（0 赤、120 緑、240 青）。Saturation は鮮やかさ（0% グレー、100% フルカラー）。Lightness は明るさ（0% 黒、50% 純色、100% 白）。
- グレーで色相が 0 なのはなぜ？
- グレーは彩度 0% のため色相は未定義で、このコンバーターは 0 を報告。グレーで色相を変えても彩度を上げるまで変化しません。
- HEX to RGB と同じですか？
- いいえ。HEX to RGB Converter は #rgb / #rrggbb と CMYK、コントラスト、トークンスニペット向け。このツールは RGB ↔ HSL 双方向。仕様が HEX と HSL 混在なら併用。
- 色データは端末外に出ますか？
- いいえ。RGB to HSL Converter はブラウザ内のみ。値はアップロード/保存されません。