HSLからRGBへ変換

このHSL→RGB変換ツールは、HSLの色を複数の形式にすぐ変換します。精密なスライダーまたは数値入力で、色相、彩度、明度、アルファ値を調整してください。表示された結果をクリックするとコピーできます。

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

主な特長

• RGB、RGBA、HEX、HSL、HSLA、CSS 変数へのリアルタイム変換

• 値を調整するとビジュアル カラー プレビューが更新されます

• キーボードの Enter または Space を使用して、任意の出力値をクリックしてコピーします。

• 簡単なテスト用のプリセット カラー (赤、緑、青、黄、シアン、マゼンタ、黒、白)

• 同期入力 - スライダーと数値フィールドは同期を保ちます

• 透明度制御のためのアルファ チャネルのサポート

得られるもの

6 つのカラー形式。ここではデフォルトの hsl(200、70%、50%) を示しています。

• RGB: rgb(38, 157, 217)

• RGBA: rgba(38, 157, 217, 1.00)

• HEX: #269DD9

• HSL: hsl(200, 70%, 50%)

• HSLA: hsla(200, 70%, 50%, 1.00)

• CSS 変数: --color: #269DD9;

追加の手順なしで正確な色変換を必要とするデザイナーや開発者向けに構築されています。

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

HSL から RGB へのコンバーターは、色相、彩度、明度の値を対応する赤、緑、青の数値に変換する小さなユーティリティです。

推測ではなく決まった計算式が実行されます。同じ 3 つの数値を 2 回入力すると、毎回まったく同じ結果が返されます。

これは、数学的に計算するのではなく、目で色合いを選択またはサンプリングできるカラー ピッカーとは異なります。

• カラーピッカーは、多くの場合、色見本をクリックすることにより、視覚的に色合いを選択します。
• コンバーターは異なるカラーモデルで同等の値を計算します。
• 2 人はデザイン ソフトウェアで隣り合って座ることが多いですが、仕事は異なります。

ほとんどのスタイルシートは依然として 16 進数またはプレーン RGB 値に依存しています。 hsl() の直接使用は、Web 全体のカラー宣言の 1% 未満に見られます (HTTP Archive Web Almanac、2022)。

デザインツールでは、色に対する人の直感に合っているため、HSLスライダーが標準的に使われています。変換ツールは、そこからコードで実際に必要な形式へ戻す橋渡しをします。

このツールは、サイトのフロントエンド (EN)、スタイルシート内、またはレンダリング前に色の値を準備するビルド スクリプト内に表示されます。

また、テンプレートが適用される前に値を生成する画像処理スクリプトやカラー パイプラインのバックエンド (EN)でも発生します。

HSL から RGB への変換の入力値と出力値の範囲は何ですか?

色相は 0 ～ 360 度、彩度と明度は 0 ～ 100 パーセントで、コンバータは 0 ～ 255 の赤、緑、青の値を出力します。

これらの境界外に送信された値は、実装に応じて、拒否されるのではなく、クランプまたはラップされます。

主要な数値 (CSS カラー モジュール レベル 4、W3C):

• 色相: 0 ～ 360 度、または同等の角度単位
• 彩度: 0% ～ 100%
• 明度: 0% ～ 100%
• RGB 出力: チャネルごとに 0 ～ 255 (8 ビット)、または正規化された 0 ～ 1

この 0 ～ 255 のスケールは、16 進コードからキャンバスのピクセル データまで、RGB カラーが表示される他の場所で使用されるものと同じです。

8 ビット 出力がデフォルトのターゲットとなっているのは、ブラウザ、画像形式、およびほとんどのデザイン ソフトウェアが既にそれを想定しているからです。

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

この数式は、最初に彩度値を計算し、入力が色相環のどの 60 度スライスに該当するかを特定し、次に明度によってすべてをシフトします。

赤、緑、青の 6 つの異なる組み合わせが、その円の 60 度の 6 つのセグメントにマッピングされます。

6 段階のパス:

1. 彩度と明度から彩度を計算
2. 色相を 60 で割って、どのセグメントに該当するかを調べます。
3. そのセグメントの中間値 (多くの場合 X というラベル) を導出します。
4. セグメントに基づいて、彩度、X、0 を赤、緑、青に割り当てます。
5. 各チャンネルに明度の一致値を追加して、所定の位置に移動します。
6. 255 を乗算して丸め、最終的な整数 RGB を取得します。

実際には、数学的には 2 つのカラー モデルが入れ替わっているだけで、実際には、ほとんどの HSL と RGB の比較よりも近いものになります。

これらの手順でデフォルトの入力を実行すると、hsl(200, 70%, 50%) は彩度 0.7 を与え、180 ～ 240 度のセグメントに到達し、rgb(38, 157, 217) または #269DD9 として出力されます。

プログラミング言語に基づいて数学は何も変わりません。その周りの構文のみが機能します。

HSL から RGB への変換で丸めと精度はどのように処理されますか?

2 つのカラー ライブラリはまったく同じ HSL 入力を実行し、1 つの整数を離れたチャネル値に配置することができ、どちらも依然として正しいでしょう。

このギャップはバグによるものではなく、丸めによるものです。

変動の原因:

• 生の数式は 0 から 1 までの浮動小数点数を出力します。
• 255 を掛けても整数になることはほとんどありません
• 一部の実装は丸められ、他の実装はフロア (切り捨て) になり、中間点付近で 2 つの実装が一致しません。

コンバージョンを連鎖させると事態はさらに悪化します。 RGB から HSL に移行し、RGB に戻ると、蓄積された浮動小数点誤差だけでチャネルが 1 ～ 2 ポイント変動する可能性があります。

この小さなドリフトは、値が 16 進カラー コードになる直前に最も重要になります。これは、16 進数には小数チャネルが入る余地がないためです。

変換では無彩色と色相の回り込みはどのように処理されますか?

2 つの条件が通常の数式パスを破ります。それは、彩度がゼロであることと、色相値が 360 を超えていることです。

どちらもエラーとして扱われず、明示的に処理されます。

無彩色（彩度ゼロ）

彩度ゼロ: この色には色相で説明できるものが何もありません。

彩度が 0% に達すると、ホイール上に指す影がなくなるため、色相は意味を持たなくなります。

• 赤、緑、青はすべて同じ値に設定されます
• その共有値は、0 ～ 255 の範囲にスケールされた明度に相当します。
• 色相は、仕様で「効果を持たない成分（powerless component）」と呼ばれる状態になります。

明度が 50%、彩度が 0% の場合、入力にどのような色相の値が含まれているかに関係なく、中間グレーの rgb(128, 128, 128) が生成されます。

360 度の色相ラップアラウンド

色相は円形であるため、値は境界で停止するのではなくループします。

480 度の色相は 120 度とまったく同様に動作し、マイナス 120 度の色相は 240 度とまったく同様に動作します (W3C、CSS カラー モジュール)。

ほとんどの実装では、 数式を実行する前にモジュロ演算を使用してこれを処理し、範囲外の色相を 0 ～ 360 のウィンドウに折り込みます。

このステップをスキップすると、色相 400 は単に 40 ではなく壊れた入力として扱われます。

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

色を hsl() として記述すると、ブラウザは内部で色を RGB に変換します。別の手順は必要ありません。

レンダリング エンジンは、スタイルシートがロードされた瞬間に、ターゲット カラー スペースとして sRGB を使用して計算を実行します。

古典的なカンマ区切りの hsl() は、10 年以上にわたってすべての主要なブラウザで動作してきました。

新しい CSS (EN) 構文ではカンマが完全に削除され、古い hsl(200, 80%, 50%) の代わりに hsl(200 80% 50%) のように記述され、スラッシュの後にオプションのアルファ値を受け入れます (CSS カラー モジュール レベル 4 (EN)、W3C)。この最新の形式は、2022 年 7 月にベースラインとして広く利用可能 (EN)のステータスに達しました。

手動変換が依然として必要な場合:

• 未加工の RGB または正規化された浮動小数点を期待する Canvas および WebGL コンテキスト
• ブラウザ外で使用するために静的な 16 進値をエクスポートする
• ネイティブ モバイル レイアウトなど、CSS レンダリング エンジンがまったくない環境

逆方向に進むことも同様に一般的です。 RGB 値から開始し、HSL と同等の値が必要な場合は、手作業で計算を逆に行う代わりに、RGB から HSL コンバータを通じてその値を実行できます。

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

同じ公式はどの言語でも機能します。構文とデフォルト値の範囲のみが変更されます。

JavaScriptの実装

ネイティブ関数なし: 数式はスクリプトに直接書き込まれます。

• 色相、彩度、明度を単純な数値、度、パーセンテージとして取得します。
• 計算を実行する前に、彩度と明度を 0 ～ 1 の範囲に正規化します。
• 最終結果を 255 で乗算し、標準 8 ビット出力に丸めます。

数十行のコードで関数全体をカバーします。依存関係は必要ありません。

Pythonの実装

Python の標準ライブラリには、colorsys モジュールを通じて、すでに構築された変換が同梱されています。

colorsys.hls_to_rgb() は、h、s、l ではなく、h、l、s の順序で 3 つの引数を受け取ります (Python ドキュメント (EN))。このため、標準の HSL 順序に従う言語からコードを移植する人はつまずきます。

もう 1 つの違い: colorsys は、色相、明度、彩度を度数やパーセンテージではなく、0 ～ 1 の間の分数として期待します。

色相に360を、残りの2つの値に100を掛けると、通常のHSLの数値に戻せます。入力時は、逆にそれぞれを同じ数で割ります。

HSL を RGB に手動で変換するべきですか、それともライブラリまたはツールを使用するべきですか?

ランタイムに利用可能な依存関係がなく、丸め動作を完全に制御したい場合には、数式を自分で記述するのが合理的です。

既存のライブラリを利用することは、他のどこでも、特にアルファ、他のカラー モデル、または文字列解析が入ってくると理にかなっています。

手動で記述する:

• 後でインストール、監査、または更新するための依存関係はありません
• 丸めと出力形式を完全に制御
• 要件の拡大に応じてテストおよび保守するコードが増加

ライブラリの使用:

• すぐに使えるエッジケース、アルファ、および複数のカラーフォーマットを処理します
• 1 回の変換以外の開発時間を短縮します
• Adds a dependency and some bundle weight to the project

バンドル サイズは、このジョブ用に構築されたライブラリ間で大きく異なります。 color2k 自身が公開しているサイズ比較 (color2k、npm パッケージのドキュメント) によると、tinycolor2 はおよそgzip 圧縮された 5KB で出荷され、chroma-js は 13.7KB、color2k は 2.8KB で出荷されます。

その利便性の大きさは、導入数に現れています。 color-convert だけでも、npm レジストリにおよそ毎週 2 億件のダウンロードが記録されています (Snyk パッケージ データ、2025 年)。これは、単一のプロジェクトのカラー計算でゼロから作成することを正当化するトラフィックよりもはるかに多いトラフィックです。

HSL から RGB への変換は実際にどこで使用されますか?

変換は、ユーザーが視覚的に色を選択し、その色をコードとして送信できるようにするほとんどすべての背後に静かに存在します。

その交通量のほとんどは 4 か所で占められています。

デザイン ソフトウェア:

• Figma、Photoshop、および Sketch は、色相ベースのモデルが人々が直感的に色を調整する方法と一致するため、HSL または HSB スライダーを公開します。
• すべてのスライダーのドラッグは、レンダリングまたはエクスポートが必要になった瞬間に RGB に変換されます。

スタイルシートとデザイン トークン:

shadcn/ui のテーマ システムは長い間、すべての色を生の HSL コンポーネント番号 (原色の場合は 222.2 47.4% 11.2% など) として保存し、使用時にその値を hsl() でラップしていました。その後、Tailwind v4 テーマは OKLCH に移動されました (shadcn/ui ドキュメント)。

いずれにせよ、このパターンを使用すると、単一の変数を編集するだけで、デザイン システム全体で数十のコンポーネント間で陰影や彩度を変更できます。

画像処理:

• Pillow と GIMP はプログラムで色相または明度を調整し、ファイルを保存する前に RGB に変換し直します。
• 製品写真の色を一括して変更するバッチ スクリプトは、通常、この正確なパスを実行します。

グラフ作成ライブラリもこれに依存します。固定の彩度と明度でさまざまな色相を生成し、実際に画面に到達するピクセルのそれぞれを RGB に変換します。

HSL から RGB への変換が適用されない、または間違った結果が生成されるのはどのような場合ですか?

式自体が破綻するわけではありません。誤っているのは、その結果で画面に表示できるすべての色を表せるという前提です。

不十分な点:

• 広色域カラー: HSL は sRGB に基づいて構築されており、Display P3 は sRGB よりも約 50% 多い色空間をカバーします (WebKit、2020)。その余分な範囲にあるものには、正確な HSL から RGB パスがありません。
• HSL が HSV または HSB と混同される: 文字は似ていますが、式が異なり、HSL 式で HSV 値を実行すると、まったく間違った色が生成されます。
• 正規化されていない入力: 0 ～ 1 のスケールを期待する関数に彩度として 0.5 の代わりに 50 を渡すと、使用可能な範囲を大きく超える値が返されます。
• アルファがサイレント ドロップされました: アルファ チャネルを前方に転送せずに HSLA を RGB に変換すると、透明が期待される場所で不透明な色が生成されます。

明度チャネルには、それ自体の既知の弱点があります。 CSS カラー モジュール レベル 4 仕様では、独自の例と同じ 50% の明度で青と黄色が使用されており、この 2 つの色合いは人間の目にはまったく同じ明るさには見えません (W3C、CSS カラー モジュール レベル 4)。

数値的な明度と知覚される明度との間のギャップが、Oklch のような新しい色空間が存在する理由です。これは、特定のコンバータに固有の欠陥ではありません。

これによって変換の信頼性が低下することはありません。これは、この変換によって、考えられるすべての画面で色がどのように見えるかよりも狭い質問に答えることができることを意味します。

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

HSL と RGB という文字は何を表していますか?

HSL は色相、彩度、明度を表し、ホイール上の色の位置、その強度、明るさを表すチャネルです。 RGB は赤、緑、青の略で、 その色を表示するために画面が点灯する加算チャネルです。

HSL は HSV または HSB と同じですか?

いいえ、HSV と HSB は同じモデルに名前を付けており、明るさの代わりに値または明るさを 3 番目のチャンネルとして使用しています。 100% の彩度値はモデルごとに異なる色合いを意味するため、HSL 式で HSV 値を実行すると間違った色が返されます。

HSLA は同じ方法で RGBA に変換できますか?

はい。色相、彩度、明度の各チャネルは標準の HSL とまったく同じように変換され、アルファ チャネルは変更されずにそのまま引き継がれます。これは、どちらの形式でも透明度が 0 から 1 までの小数または一致するパーセンテージとして同じように表現されるためです。

HSL を 16 進コードに直接変換できますか?

はい、ただし、これは 2 つのステップで行われます。この式では、最初に RGB が生成され、0 ～ 255 の 3 つの値がそれぞれ2 桁の 16 進数のペアになり、CSS とデザイン ツール全体で使用される 6 文字の 16 進コードが得られます。

HSL から RGB へのコンバーターの計算が十分ではなくなるのはどこでしょうか?

アルゴリズムは色相、彩度、明度を sRGB が表現できる 1,670 万色にマッピングするため、HSL から RGB へのコンバーターの公式は、sRGB 色空間の端では十分ではなくなります。

hsl() はブラウザーを完全にサポートしていますが、2022 年のカラー宣言の割合はまだ 1% 未満でした (HTTP Archive Web Almanac、2022)。完全なネイティブ サポートと無視できる直接使用の組み合わせにより、実際に変換が行われる場所、つまりスタイルシートの上流のデザイン ツールとライブラリ内で行われることがわかります。

標準の 8 ビット出力は、同じ 1,670 万色をカバーします。広色域ワークフローは、より大きな色空間全体で滑らかなグラデーションを維持するためにチャンネルあたり 16 ビットに移行します (Apple Developer、WWDC 2017)。そのため、8 ビット演算を受け入れると、ユニバーサルな互換性が確保され、画面で表示できる追加の精度が放棄されます。

プリンタは異なる原色を使用するため、RGB 出力を印刷に送信するには、RGB から CMYK へのコンバータによって処理される、さらなる変換が必要です。