MISC

HSL から RGB への変換 — HSL カラーを RGB 値に変換

HSL カラー値を RGB に変換します。リアルタイムのカラースウォッチプレビュー付きで、完全にブラウザ内で動作します。アップロードもアカウント登録も制限もありません。

● ローカル動作 · ブラウザ内のみページ読み込み以降のツールによる通信：0件

HSL to RGB

Convert HSL color values to RGB online. Enter HSL like 30,100,50 and get RGB. Works entirely in your browser.

Enter HSL values (e.g. 30, 100, 50)

こんなツールも

行をソート MD5 ハッシュ UUID ジェネレーター JSON → CSV Base64 エンコード PDF 分割 HAR → cURL TOML ツール .env ヘルパー MsgPack インスペクター PDF 圧縮 PDF → EPUB

コンバーターを開く

HSL は、デザイナーが真っ先に手が届くカラーモデルです。人が色を説明する方法に合っているからです。色相を選び、鮮やかさを決め、明るくまたは暗くする。RGB はソフトウェアが使うカラーモデルです。あらゆる画面のあらゆるピクセルは、赤、緑、青のサブピクセルの強度で記述され、すべての描画 API（HTML canvas、WebGL、サーバーサイドの画像ライブラリ）は RGB トリプレットを受け取ります。この 2 つの間の変換はフロントエンド作業での日常的な雑務であり、方向によって変換の形が 2 種類あります。

計算は単純です。色相は色相環上の位置になり、ベースカラーを選びます。彩度はその色を中立的なグレーから完全な強度までスケールします。明度は色を黒（L=0）または白（L=100）に近づけます。L=50%、S=100% のとき、その色はその色相の完全に彩度の高いバージョンになります。RGB への変換は、各色相を 3 つのチャネルを生成する区分関数を実行し、その後、明度と彩度の係数を適用して 0〜255 の整数値に到達させます。ここでの出力は、ブラウザがレンダリングする CSS 互換の RGB 文字列そのものになります。

最後に受け渡しについてまとめます。出力先が CSS ファイルなら、rgb() 出力は元の hsl() 値と置き換え可能であり、どちらでもすべてのブラウザで動作します。出力先が描画 API や画像処理ライブラリなら、RGB トリプレットが唯一の受け入れられる形式です。知覚的な一様性（同じ明るさに見える色を合わせたり、アクセシブルなコントラストペアを選んだりする）が必要なら、HSL は不適切な出発点です。OKLCH や CIELAB が適切なモデルであり、Color Converter は両方に対応しています。

使い方

H、S、L の値を入力する
色相（0〜360）、彩度（0〜100%）、明度（0〜100%）を入力します。入力に応じて出力が更新され、スウォッチパネルが計算された RGB カラーをリアルタイムに反映します。
RGB の内訳を確認する
出力には赤、緑、青のチャネル（それぞれ 0〜255）が表示されます。フッターには前提となる sRGB 色空間と、アルファが存在する場合はアルファチャンネルが示されます。
RGB 文字列をコピーする
CSS でそのまま使える `rgb(59, 130, 246)` または `rgba(59, 130, 246, 1)` 宣言としてコピーします。スタイルシート、デザインツール、CSS-in-JS のテンプレートリテラルに貼り付けられます。

よくある質問

HSL の各チャネルは何を表しますか？

色相（0〜360）は色相環上の位置を選びます。0 が赤、120 が緑、240 が青です。彩度（0〜100%）は強度で、0 で純粋なグレー、100 で完全に彩度の高い色になります。明度（0〜100%）は白や黒への近さで、最も彩度が高くなるのは 50% のときです。

Photoshop のカラーピッカーの表示と一致しますか？

はい。Photoshop の HSB（色相、彩度、明度）ピッカーは概念的には似ていますが、lightness の代わりに brightness を使います。CSS の HSL は lightness を使い、L=50% が最も彩度の高い色です。HSB は brightness を使い、100% B が最も彩度の高い色となります。

手動で選んだ HSL が RGB 形式で違って見えるのはなぜですか？

HSL は知覚モデルであり、知覚一致ではありません。同じ L 値を持つ 2 つの HSL 色は、見た目の重みがまったく異なることがあります。たとえば HSL(240, 100%, 50%) の鮮やかな青は、HSL(60, 100%, 50%) の鮮やかな黄色よりも暗く見えます。RGB トリプレットは数学を保持するのであって、知覚される明るさを保持するわけではありません。

値を HSL に戻すラウンドトリップはできますか？

はい。8 ビット精度の範囲では変換はロスレスです。rgb-to-hsl ツールが RGB 出力を読み取って色相、彩度、明度を再計算し、整数の RGB への丸めにより各チャネル ±1 以内で戻ります。

0〜360 の範囲外の H 値はどうなりますか？

入力は 360 で法を法として正規化されます。HSL(720, 50%, 50%) は HSL(0, 50%, 50%) と同じ色です。負の色相値は前方に折り返されます。HSL(-120, 50%, 50%) は HSL(240, 50%, 50%) と同じです。ラップされた値と元の値で RGB 出力は同一です。

制限事項

sRGB のみ対応本ツールはウェブ CSS のデフォルトである sRGB 色空間を前提としています。Display P3 や Rec.2020 を対象とする HSL 値は sRGB として解釈され、 gamut 外のチャネルは最も近い範囲内の色にクリッピングされます。
8 ビット精度RGB 出力はチャネルあたり 0〜255 の整数に丸められます。チャネルあたり 16 ビット精度が必要なワイド gamut や印刷ワークフローでは、浮動小数点の RGB トリプレットを出力するツールをご利用ください。
知覚的な明度ではありませんHSL の明度軸は知覚的に一様ではありません。L=20% の色は L=40% の色の半分の暗さに見えません。知覚的に正確な明度には OKLCH や CIELAB をご利用ください。

プラットフォーム別の注意点

macOS: Digital Color Meter はカーソル下の色を RGB または汎用的な HSL として読み取ります。ブラウザツールは、デザインファイルから取り出した HSL 値を canvas、WebGL、レガシー CSS で必要となる RGB トリプレットに変換するのに適しています。
Windows: PowerToys の Color Picker は任意の色を HEX、RGB、HSL のいずれかでコピーできます。ブラウザツールは、CSS ファイルや Figma エクスポート、デザインシステムから取り出した HSL 値を、レガシースタイルシートの RGB 宣言に変換するのに適しています。
Linux: GIMP のカラーピッカーは HSL と RGB を表示します。コマンドラインで作業する場合は、ImageMagick が `convert -colorspace HSL` で HSL を出力できます。ブラウザツールは、デザインエクスポートから取り出した HSL 値を一括変換するのに適しています。
Web: 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。出力は有効な CSS `rgb()` 値であり、任意のスタイルシート、CSS-in-JS テンプレート、canvas API 呼び出しにそのまま貼り付けられます。