RGB から HSL への変換 — RGB カラーを HSL 値に変換
RGB カラー値を HSL に変換します。ライブスウォッチとスライダーで、色相、彩度、明度を確認。ブラウザ内で動作し、アップロードは不要です。
RGB to HSL
Convert RGB color values to HSL online. Enter RGB like 255,102,0 and get HSL. Works entirely in your browser.
HSL は、デザイナーが実際に考えるカラーモデルです。RGB は「59 赤、130 緑、246 青」と言い、何も想像できません。トリプレットは機械の命令であり、色の説明ではありません。HSL は「221 度色相（青）、83% 彩度（鮮やか）、48% 明度（バランス）」と言い、その色が彩度の高い中間の青であることをすぐに知ります。RGB から HSL への変換は数学的好奇心ではなく、画面のネイティブ言語からデザイナーのネイティブ言語への翻訳であり、変換は RGB トリプレットが行わない色推論を可能にします。
色相角度は、変換の最も有益な出力です。色の色相（221 度）を知っていれば、類似色（221 ± 30 度）、補色（221 + 180 = 41 度）、三色配色（221、341、101 度）がどれであるかがわかります。HSL 上に構築されたデザインシステムは、彩度と明度を一定に保ちながら色相を回すことによってカラーパレットを定義でき、手動の調整なしに視覚的に harmonious な色のセットを生成します。コンバーターは、そのパレット構築の開始点として色相を提供します。
彩度と明度の値が、変換を CSS で実用可能にします。CSS の hsl() 関数はすべてのブラウザとすべての CSS プリプロセッサでサポートされています。--primary: hsl(221, 83%, 48%) のような CSS カスタムプロパティは、--primary: #3B82F6 がそうではない方法で自己文書化されています。色相を読んで青であることがわかり、彩度を読んで鮮やかさがわかり、明度を読んで明るさがわかります。コンバレーターは、自己文書化 CSS を可能にする HSL 値を生成します。
使い方
RGB 値を入力する
赤、緑、青の値（0〜255）を入力するか、`rgb(59, 130, 246)` 文字列を貼り付けます。HSL 出力はリアルタイムで更新されます。カラースウォッチと HSL カラーホイールが色相を表示し、彩度と明度のスライダーが視覚的な参照を提供します。
HSL の内訳を読む
出力には色相（0〜360 度）、彩度（0〜100%）、明度（0〜100%）が表示されます。各コンポーネントは数値として、またカラーホイール（色相）と彩度／明度のグラデーション上の位置として表示されます。
HSL 値をコピーする
値を CSS でそのまま使える `hsl(221, 83%, 48%)` または `hsla(221, 83%, 48%, 1)` 宣言としてコピーします。スタイルシート、CSS-in-JS テンプレートリテラル、またはデザイントークン定義にそのまま貼り付けられます。
よくある質問
RGB の代わりに HSL を使うのはなぜですか？
HSL は人間が色について考える方法にマッピングされます。色相は基本色（赤、青、緑）、彩度は強度（鮮やか vs くすんだ）、明度は明るさ（明 vs 暗）です。RGB は画面が色を生成する方法にマッピングされます（赤、緑、青のサブピクセル）。デザイナーは HSL で考え、画面は RGB でレンダリングします。変換は 2 つのメンタルモデル間の橋渡しをします。
色相は RGB からどのように計算されますか？
色相は RGB チャネルの相対的な割合から計算されます。最大のチャネルがベース色相領域を決定し（赤優勢で 0〜60、緑優勢で 120〜180、青優勢で 240〜300）、他の 2 つのチャネル間の差がその領域内のオフセットを決定します。正確な式は、コンピュータグラフィックス教科書の標準的な RGB から HSL への変換です。
本ツールはカラーホイール上に色を表示しますか？
はい。HSL カラーホイールパネルは正確な色相角度を放射状インジケーターでマークします。彩度と明度は中心からの距離とマーカーの明るさとして表示されます。この視覚的表現は、生の数値だけでなく色関係を推論しやすくします。
HSL と HSV/HSB の違いは何ですか？
HSL（色相、彩度、明度）はダブルコーンモデルを使用し、純粋な白と純粋な黒はどちらも彩度ゼロを持ちます。HSV（色相、彩度、値、HSB とも呼ばれる）はシングルコーンモデルを使用し、白は先端に座ります。HSL は CSS 標準であり、HSV は GIMP や Photoshop などのカラーピッカーの標準です。本ツールは HSL を出力します。
スライダーで HSL 値を調整できますか？
いいえ。本ツールは RGB から HSL への単方向変換を行います。スライダーで色をインタラクティブに探索するには、すべてのカラーモデルのスライダーを提供する Color Converter ツールをご利用ください。RGB から HSL へのツールは変換速度のために最適化されており、色探索のためではありません。
制限事項
- sRGB 色空間のみ変換は sRGB プライマリを前提としています。Display P3、Adobe RGB、または他の色空間からの RGB 値は、sRGB でレンダリングされるように色を記述する HSL 値を生成し、これは元の色空間の意図と一致しない場合があります。
- 知覚的な一様性なしHSL は知覚的に一様ではありません。同じ彩度と明度を持ちながらも異なる色相を持つ 2 色は、人間の目に等しく彩度が高い、または明るく見えるとは限りません。知覚的に一様な色操作には、CIELAB または CIELUV 色空間をサポートするツールをご利用ください。
- グレーに対する色相は未定義R=G=B（灰色のシェード）の場合、色相は数学的に未定義です。本ツールは灰色の値に対して色相を 0 度として報告します。彩度は 0% で、CSS 使用では色相値が無関係になります。
プラットフォーム別の注意点
- macOS
- Digital Color Meter は RGB を表示しますが HSL は表示しません。デザイン仕様がテーマやカラースケールに HSL を使用する場合、ブラウザツールがそのギャップを埋めます。
- Web
- 完全にクライアントサイドで動作します。カラーホイールは外部アセットなしでローカルにレンダリングされます。