RGBからHSLへ変換

このRGB→HSL変換ツールは、RGB（赤、緑、青）の値をHSL（色相、彩度、明度）とHEXにすぐ変換します。デザイナーや開発者をはじめ、色の仕組みを扱うすべての方に向けたツールです。

最終更新日: 2026 年 9 月 23 日

主な特長

• 値を調整するときのリアルタイム変換

• デュアル入力方法: 数値フィールドとスムーズ スライダー

• ライブ カラー プレビューでは、色がすぐに表示されます

• 3 つの形式で出力: RGB、HSL、16 進数

• キーボードの Enter または Space を使用した、任意の形式のクリックしてコピー

• すぐに開始できる 10 色のプリセットカラー

• インスピレーションのためのランダムカラージェネレーター

• 入力検証はすべてのチャンネルを 0 ～ 255 にクランプします

なぜ使用するのか?

CSS は RGB と HSL の両方をサポートします。 RGB は絶対値 (チャネルごとに 0 ～ 255) で機能します。 HSL は人間の言葉で考えます。色相を選択し、明るさを調整し、彩度を調整します。

それらの間で手動で変換するのは面倒です。このツールはそれを即座に実行します。

次のような方に最適です:

• CSSの色変換

• デザインシステム開発

• カラーパレットの作成

• 素早い色の実験

• 色彩理論を学ぶ

完全に応答性が高いため、モバイル、タブレット、デスクトップで動作します。

RGB から HSL へのコンバーターとは何ですか?

RGB から HSL へのコンバーターは、3 つの RGB チャネル値を受け取り、それらに相当する色相、彩度、明度を出力する色変換ツールです。

これにより、デザイナーがコードとデザイン ソフトウェアの間を移動する際に常に行う、RGB カラー値と対応する HSL カラー値の間の切り替えに伴う手動計算が不要になります。

コア機能:

• RGB 入力を 0 ～ 255 の 3 つの整数として受け入れます (16 進数コードから開始しますか? まず、HEX から RGB コンバータを通して実行します)。
• RGB から HSL への変換式をバックグラウンドで自動的に実行します
• 値の変更に応じて更新されるライブカラー見本を表示します

Chrome DevTools では、外部コンバータを必要とせずに、要素パネルで色見本をクリックした瞬間に、これと同じ HSL の内訳が表示されます。

最新のブラウザはすでに hsl() 構文をネイティブにサポートしています。古典的なカンマ区切り形式は 10 年以上にわたって機能しており、CSS カラー モジュール レベル 4 (EN) の新しいスペース区切り構文は ベースラインは 2022 年 7 月に広く利用可能 (EN)になります。

コンバーターは、デザインの受け渡し、スクリプト、RGB または 16 進数のみを扱うツールなど、他の場所で今でもその地位を獲得しています。

RGB、HSL、HSV、CMYKの違いは何ですか?

RGB、HSL、HSV、CMYK はすべて、異なる数値セットで同じ色を表します。

このうち、RGB と HSL の 2 つだけが、単一の固定式を通じて相互に変換されます。

HSV は HSB と呼ばれることもありますが、どちらも 0 ～ 360 度の色相ホイールとパーセンテージベースの彩度を使用するため、常に HSL と間違われます。

3 番目の値は、分割される場所です。 HSL の明度は黒から純粋な色相を経て白まで続きますが、HSV の値は黒から純粋な色相までのみであり、白の終点はありません。

CMYK の区別: CMYK は、画面上の光ではなく紙上のインク用に構築された減算モデルであるため、RGB から HSL へのコンバーターは CMYK カラー (EN) ワークフローにおいて直接的な役割を持ちません。

Adobe Photoshop では、RGB、HSB、CMYK の 3 つすべてが同じカラーピッカーに置かれています。これは、印刷チームとスクリーンチームが異なるカラーピッカーを必要としているためです。

色相、彩度、明度の値は何を意味しますか?

色相、彩度、明度は RGB から HSL へのコンバーターが出力する 3 つの数値であり、それぞれが個別の視覚プロパティを制御します。

主要な数値:

• 色相: 0 ～ 360 度
• 彩度: 0 ～ 100 パーセント
• 明度: 0 ～ 100%
• ソース RGB チャネル: 各 0 ～ 255

色相

色相は 360 度のホイール上の色の位置であり、0 と 360 は両方とも赤に位置します。

画期的な学位:

• 0°と360°: 赤
• 120°: 緑
• 240°: 青

色相値自体は、色がどの程度鮮やかで明るいかを表しません。ホイール上の色が位置する場所のみをマークします。

彩度

彩度は明るさではなく強度を制御します。

• 彩度 0% ではすべての色が削除され、純粋なグレーが残ります。
• 50% の彩度では、落ち着いたほこりっぽい色合いが生成されます。
• 100% の彩度では、その明度で可能な限り最も鮮やかなバージョンが生成されます。

2 つの色はまったく同じ色相と明度を共有していても、彩度が変化すると完全に異なって見えることがあります。

明度

明度は 0% の黒から 100% の白まで変化し、純粋な色相は 50% になります。

これが重要な理由: 明度の値を上下に移動すると、色相や強度に影響を与えることなく、色の見え方の明るさや暗さが変わります。

Figma のカラー ピッカーには、この正確なスライダーが 16 進入力フィールドのすぐ隣にある HSL モードが含まれています。

RGB から HSL への変換式はどのように機能しますか?

RGB から HSL への公式は、5 つの連続したステップを通じて 3 つのチャネル値を色相、彩度、明度に変換します。

ブラウザー開発ツールからスタンドアロン Web アプリに至るまで、RGB から HSL へのすべてのコンバーターは、これと同じ計算の何らかのバージョンを実行します。

1. 各 RGB チャネルを 255 で割って 0 ～ 1 の範囲に正規化します。
2. 3 つの正規化された値の最大値と最小値を見つけます。
3. 明度を最大値と最小値の平均として計算します。
4. 明度を基準にして最大と最小の差から彩度を計算します
5. 赤、緑、青のどのチャンネルが最大値を保持するかに基づいて色相を計算します

HSL モデル自体は、コンピューター グラフィックスの色空間に関する Joblove と Greenberg の 1978 年の SIGGRAPH 論文に遡ります。

ツールのデフォルト カラーを次の手順で実行すると、rgb(255, 100, 150) は最大値 1.0 (赤)、最小値 0.39 に正規化され、明度 70%、彩度 100%、色相 341° となるため、hsl(341, 100%, 70%) となります。

丸めは最終ステップで行われます。 ほとんどのコンバーターは、色相を最も近い整数に丸め、彩度と明度を最も近い整数パーセントに丸めます。そのため、同じ色が、あるツールでは 210° として表示され、別のツールでは 209° として表示されることがあります。

HSL を RGB に戻すことはできますか?

はい、HSL は再び RGB に変換しますが、逆の式の動作は元の変換とは異なります。

直接の代数逆関数の代わりに、逆パスは彩度と明度から彩度の値を計算し、色が色相ホイールの 60 度のセグメントに該当するかどうかに基づいて RGB チャネルを検索します。

ラウンドトリップ ドリフト: RGB を HSL に変換し、RGB に戻すと、各ステップが整数に丸められるため、色が 1 ～ 2 階調シフトする可能性があります。

Chroma.js は、スクリプトが HSL カラー オブジェクトで RGB 出力メソッドを呼び出すたびに、このまったく逆の式を内部で実行します。

逆変換はハンドオフ時に最も重要です。明度を簡単に編集するために HSL で作業しているデザイナーは、多くの場合、開発者がスタイルシートに最終値をドロップする前に、別の 16 進数変換ステップを介して最終値をプッシュする必要があります。

スタンドアロンの HSL から RGB コンバータは、ルックアップ テーブルの手動計算を必要とせずに、この逆パスを処理します。

RGB の代わりに HSL を使用する必要があるのはどのような場合ですか?

色の明度または強度を手動で調整する必要がある場合は、HSL を使用します。ブランド ガイドまたはデザイン ファイルからの正確な値を照合する場合は、RGB を使用します。

RGB の利点:

• 画面が赤、緑、青の光を物理的に混合する方法と一致します
• 正確な値は画像編集ソフトウェアから直接転送されます
• ほとんどの既存の 16 進数ベースの設計システムでは変換は必要ありません

RGB の欠点: カラーを明るくしたり暗くしたりするには、3 つのチャンネルすべてを手動で再計算する必要があります。これは、どのチャンネルも明るさに直接マッピングしていないためです。

HSL の利点:

• 1 つの数値である明度は、色の見え方の明るさまたは暗さを制御します。
• 強度を試している間、色相は固定されたままになります
• 1 つのベースカラーから一貫した色合いのセットを生成するのが簡単になります

HSL の欠点: 明度の値の等しいステップは、特に黄色と青色の色合いの場合、目には常に等しいステップのように見えるわけではありません。

shadcn/ui のようなコンポーネント ライブラリは長い間、カラー パレット全体を RGB ではなく HSL 値として出荷していました。これは、特にテーマの色を 1 つの変数を通じて明るくしたり暗くしたりできるようにするためです。その後、Tailwind v4 テーマは OKLCH に移行され、HSL の不均一な明るさが修正されました。

HSL はアクセシビリティとコントラスト チェックにどのように役立ちますか?

WebAIM の 2025 年の上位 100 万ホームページの監査 (EN)では、そのうちの 79.1% で低コントラストのテキストが検出され、最も一般的なアクセシビリティ障害が検出されました。

ウェブ コンテンツ アクセシビリティ ガイドライン (EN)では、最小のカラー コントラスト (EN)比を、通常のテキストの場合は 4.5:1、大きなテキストの場合は 3:1 に設定しています。これは、相対輝度ではなく相対輝度に基づいています。生の色の値。

HSL はその比率を直接計算しません。色相をそのままにしたまま明度を調整することで、特定の修正が簡単になります。

ここで軽さが重要な理由:

• 明度の値を下げると、色のアイデンティティを変えることなくテキストが暗くなります。
• 背景の明度の値を上げると、同じように明るくなります。
• どちらの調整でも 3 つの個別の RGB チャネルを再計算する必要はありません

これは、ほとんどのダーク モード システムの背後にあるものと同じレバーであり、単一の明度パスでアクセス可能なテキストと背景のペアの完全なセットが生成されます。

アクセシブルなカラー パレット ジェネレーターは、この正確な明度バランスのプロセスを手動の試行錯誤に任せるのではなく自動化し、カラー コントラスト チェッカー (EN)が最終的な比率を確認します。

Chrome の Lighthouse アクセシビリティ監査は、4.5:1 のしきい値に該当するテキストと背景のペアに自動的にフラグを立てます。

HSL をネイティブにサポートする設計ツールとプラットフォームはどれですか?

ネイティブ HSL サポートは、かなり明確な境界線に沿って分割されます。 Web 対応ツールはこれを直接公開しますが、従来の画像エディターではデフォルトで HSB が使用されます。

Illustrator のカラーピッカーは Photoshop の構造のすぐ隣にあり、H、S、L ではなくH、S、B フィールドを提供します。

区別が重要な理由: デザイナーが Illustrator から「明るさ」の値をコピーして CSS の hsl() 関数に貼り付けると、実際には明るさの値が貼り付けられるため、結果は一致しません。

Tailwind CSS は異なるアプローチを採用しています。 HSL ピッカー モードはまったく提供されていませんが、その任意の値の構文を使用すると、開発者は構成ファイルに触れることなく、HSL カラーをユーティリティ クラスに直接書き込むことができます。

Tailwind CSS フレームワーク (EN) は、全面的にこの方法で色を扱い、ビジュアル ピッカーよりもコード レベルの柔軟性を優先します。

CSS で RGB を HSL に変換するにはどうすればよいですか?

HSL をスタイルシートに直接記述するということは、同等の rgb() 関数の代わりに 3 つの値を hsl() 関数に渡すことを意味します。

構文は、色相を度単位で取り、次に彩度のパーセンテージ、次に明度のパーセンテージをその固定順序で取ります。

基本構造:

• 色相が最初にあり、単純な度数として記述されます
• 彩度は 2 番目にあり、パーセンテージで表されます
• 軽さは 3 番目にあり、パーセンテージで表されます
• オプションの 4 番目の値は、アルファ チャネルを通じて透明度を追加します。

CSS カスタム プロパティは、2017 年以降、すべての主要なブラウザーで機能するようになりました。そのため、HSL 値を再利用可能な変数として保存すると、現在のブラウザー全体で確実に機能します。

この方法で構築されたテーマは、基本的な色相と明度のペアを 1 つ保存し、明度のパーセンテージのみをシフトすることでホバー状態と境界線を導出します。

Sass はこれまで、同じ明度変更のショートカットとして lighten() と darken() を提供していました。 Sass チームは、Dart Sass 1.79.0 から両方の関数を非推奨にし、代わりに color.scale() と color.adjust() を開発者に向けました。

このアップデートがないと壊れる点: まだ lighten() を呼び出している Sass ファイルは今のところ動作し続けますが、非推奨の警告が出力され、将来の Dart Sass のメジャー リリースでこの関数が削除されると完全に失敗します。

JavaScript と Python で RGB を HSL に変換するにはどうすればよいですか?

JavaScript

JavaScript には、この変換のための組み込みメソッドがありません。すべての実装は手書きか、ライブラリから取得されます。

手書きバージョンは、手動の数式と同じ 5 つの手順に従います。 JavaScript (EN) で RGB 値を正規化し、最大値と最小値を見つけて、明度、彩度、色相をこの順序で導き出します。

• よくあるバグ: 残りの数式を実行する前に、各 RGB チャネルを 255 で割るのを忘れる
• よくあるバグ: グレートーンには報告すべき意味のある色相がないため、彩度がゼロの場合、色相が未定義のままになります。

D3.js は、interpolateHsl モジュール内で同等の変換を実行し、色相、彩度、明度を段階的に変化させて滑らかな色の遷移をアニメーション化します。

Python

Python の公式ドキュメント (EN)によると、Python の標準ライブラリには、rgb_to_hls() 関数が組み込まれた colorsys モジュールが同梱されています。

名前の詳細の 1 つが人々をつまずかせます。この関数は値を H、S、L ではなく、H、L、S の順序で返します。また、すべての値は度やパーセンテージではなく、0 ～ 1 の間の浮動小数点数です。

Python の出力を CSS 対応の値に変換するということは、色相を 360 倍し、他の 2 つの数値を 100 倍してからスタイルシートに書き込むことを意味します。

RGB から HSL への変換が適用されないのはどのような場合ですか?

RGB から HSL へのコンバーターには明確な制限があり、そうでないふりをすると実際の色の間違いにつながります。

役に立たない 5 つの状況:

• 印刷物制作。色は CMYK で指定され、RGB 番号も HSL 番号もインクに直接転送されません。
• Pantone の見本帳とのスポット カラー マッチング。RGB 計算から導き出すのではなく、目と数式によってマッチングします。
• HSB スライダーを中心に構築された写真編集ワークフロー。明度調整は HSL の明度軸に 1 対 1 でマッピングされません。
• 変換された色相値が数学的に不安定になる、白に近い色、黒に近い色、または完全に彩度が低い色
• 8 ビット 16 進コードのみを受け入れるレガシー システムでは、HSL 出力にはさらに変換ステップが 1 つ必要です

RGB 対 CMYK (EN) の内訳で説明されているように、CMYK カラー値は光ベースの RGB または HSL 数値ではなくインクの適用範囲に応じて決まるため、印刷はこの変換の範囲外に完全に収まります。

極端な不安定性にも耐える価値があります。彩度が 0% になると、ホイール上に配置する色がなくなるため、 式自体によって色相が定義されなくなります。

多くの変換ツールは、色相が未定義の場合に欄を空白にせず、初期値として0°を表示します。その数字に意味があると思って読むと、誤解を招くことがあります。

RGB と HSL も同じ外側境界を共有します。どちらも、1999 年に IEC 61966-2-1 として IEC によって標準化された sRGB 色空間内で動作するため、数値がどのように変換されても、どちらのモデルもその色域外の色を表現することはできません。

一般的な企業向けブルー製品である Pantone 286 C に対応する印刷ベンダーは、RGB から HSL から CMYK への変換チェーンよりも物理的な見本帳からより正確な結果を取得します。

よくある質問：RGBからHSLへ変換

ツール間で RGB と HSL の丸め方が異なるのはなぜですか?

丸めの違いは、別の式ではなく、 ツールが小数点以下を切り捨てるところから発生します。一部のコンバーターは色相を最も近い程度に丸めます。他のものは小数点第 1 位を維持します。同じ RGB 入力が、あるツールでは 209° として表示され、別のツールでは 210° として表示されることがあります。

HSLとHSLAの違いは何ですか?

HSLA は、同じ色相、彩度、明度の数値に 4 番目の値アルファを追加します。アルファの範囲は 0 ～ 1 で、色ではなく透明度を制御します。最新の CSS は hsla() をエイリアスとして扱います。 hsl() 自体もオプションのアルファ チャネルを受け入れるようになりました。

色相値は 360 度を超えることができますか?

カラーホイールは円形であるため、 技術的には色相値は360° を超えてラップされます。 400° と 40° は同じ色を指します。ほとんどのコンバータは出力を 0 ～ 360° の範囲に自動的に正規化するため、実際には 360 を超える値が現れることはほとんどありません。

すべてのブラウザは CSS hsl() 関数をサポートしていますか?

現在の主要ブラウザはすべて、カンマ区切りの従来の構文と、 スペース区切りの新しいCSS カラー モジュール レベル 4 構文を含む hsl() をサポートしています。 Internet Explorer 9 以降では、カンマ構文は理解できましたが、スペース区切り形式は理解できませんでした。そのため、従来の互換性を維持するには、カンマベースまたは 16 進数のフォールバックが依然として重要です。

オンラインRGBからHSLへのコンバーターはどのくらい正確ですか?

DevTools または CSS 自体を介したブラウザネイティブの変換は、信頼性が高く正確です。サードパーティの Web コンバータは同じ計算式を実行し、通常は小数点以下 2 桁または 3 桁まで一致します。丸めによる目に見える色の違いは事実上知覚できないため、精度が実際上問題になることはほとんどありません。

RGB から HSL へのコンバーターを使用して最初に何をすべきでしょうか?

RGB から HSL へのコンバーターは、基本色が選択された瞬間に最初に機能し、その単一の RGB 値または 16 進値を色相、彩度、明度に変換してから、そこから陰影、色合い、またはテーマのバリエーションを構築します。

• RGB または 16 進数でベースカラーを選択します
• コントラストが目的の場合は、色相の前に明度を調整します
• 完成した値を本番用に 16 進数または RGB に変換し直す

WebAIM の 2025 年の監査では、 ホームページの79.1%で低コントラストのテキストが検出され、WCAG の通常のテキストのしきい値は相対輝度に基づいて構築された比率である4.5:1に設定されています。 HSL 明度は同じ測定値ではありませんが、明度を上げたり下げたりすることが輝度を移動する最も簡単な方法であるため、色相や彩度に影響を与える前に、まず明度を調整することで、ほとんどの失敗したペアが修正されます。

このショートカットにより、フル コントラスト監査と引き換えにスピードを犠牲にして、すべてのケースではありませんが、一般的なケースをクリアできます。このステップの後の制作の引き継ぎは、通常、元のスウォッチがブランド ガイドからのものである場合、16 進数から RGB への変換から始まります。