RGB と HSL 変換 の使い方：完全ガイド（2026年版）

RGB と HSL 変換とは？

RGB-HSLコンバーターは赤/緑/青チャンネル（0-255）をCSSのhsl()で使う色相・彩度・明度に変換し、逆変換もします。ToolsMinifyの無料双方向コンバーターはRGBまたはHSLを編集し、ライブスウォッチを見ながらrgb()、hsl()、HEXをコピーできます。ブラウザ内、登録・アップロード不要です。

RGB と HSL を即相互変換。ライブスウォッチとコピー可能な rgb()/hsl() CSS の無料オンラインカラー変換。

RGB と HSL 変換を使う理由

• 入力に合わせたRGB ↔ HSLとライブスウォッチ
• コピー可能なrgb()、hsl() CSSとHEX
• ネイティブカラーピッカーとプリセットスウォッチ
• 色相0-360、彩度・明度0-100%
• 100%クライアント側 - 色はブラウザ外に出ません

RGB と HSL 変換の使い方 - ステップバイステップ

1. ステップ1: R/G/B を 0-255 で入力 - またはネイティブピッカー。
2. ステップ2: 対応する H/S/L（色相 0-360、彩度/明度 0-100%）を確認。
3. ステップ3: H/S/L を編集して逆変換; RGB とスウォッチが即更新。
4. ステップ4: rgb() または hsl() CSS（または HEX）をスタイルシート用にコピー - 登録不要。

RGB と HSL 変換は変換ツールにあります。ツールページを開き、メインフィールドにインプットを入力すると、結果が即座に更新されます。コピーボタンを使用して、出力結果をドキュメント、コードエディタ、またはスプレッドシートに貼り付けてください。

一般的な使用例

デザインRGBからCSS hsl()

FigmaやスクリーンショットのR、G、Bを貼り、モダンなスタイルシート用hsl()をコピーします。

RGBを組み直さず色相を調整

彩度と明度を固定し色相を回し、パレットバリアント用の新しいrgb()をコピーします。

HEXとHSLツール間の引き渡し

HEX-RGBコンバーターで#rrggbbを得て、このコンバーターでHSL経路へ。

色モデルの説明

グレーが色相0になる理由、明度50%が純色になる理由、明度100%が白になる理由を示します。

例

• 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）。

プロのヒント

• 色相0 = 赤、120 = 緑、240 = 青。360は0に戻ります。
• 彩度0%はグレーで、Sを上げるまで色相は見えません。
• 明度0%は黒、100%は白、50%は最大彩度の「純」色相です。
• 範囲外RGBは0-255にクランプ、SとLは0-100。
• HEX、CMYK、コントラスト、ティント-シェードが必要ならHEX-RGBコンバーターを開いてください。

よくある質問

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 はブラウザ内のみ。値はアップロード/保存されません。

必要な関連ツール

ToolsMinifyで他の変換ツールを探索してください。関連ユーティリティはRGB と HSL 変換ページにリンクされており、サイトを離れることなくワークフローを完了するのに役立ちます。