HSL→RGB変換
三つのHSLの数を画面で使うチャンネルに変えます。色相210、彩度80%、明度45%は、ブラウザがhsl()に使うのと同じ方法でrgb(23, 115, 207)、十六進では#1773cfになります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- H
- 210
- S
- 80
- L
- 45
- 抵抗（Ω）
- 23
- G
- 115
- B
- 207
- 赤緑青
- rgb(23, 115, 207)
HSLは色を色相環上の色相、色の鮮やかさを示す彩度、黒や白への近さを示す明度で表します。0から360の閉区間外の色相は明確な検証エラーで拒否され、不正なトークンが黙ってラップされることはありません。
HSLが赤・緑・青へどう写像されるか
色相は色相環上の角度です。0度は純赤、120は純緑、240は純青、360で円が閉じて再び赤になります。彩度は選んだ明度の灰色を、その色相の完全に有彩な色へ引き伸ばします。
彩度0パーセントは常に無彩の灰色・黒・白で、明度だけに依存します。明度は0パーセントの黒から、およそ50パーセント付近の純中間調を経て、100パーセントの白まで進みます。ここで使う変換アルゴリズムはCSS Color ModuleおよびW3Cの定式に従います。
彩度と明度を単位区間にスケールし、明度と彩度から中間のクロマ境界pとqを計算し、古典的なhue2rgbヘルパーで単位円上の三つのずれた位置をサンプリングして赤・緑・青チャネルを得ます。彩度が0のときは三チャネルが明度由来の同じ灰色に潰れ、性能上の近道であると同時に数値安定性の利点にもなります。
単位区間の各チャネルに255を掛けて最も近い整数に丸め、8ビットフレームバッファとCSSのrgb()の期待に合わせます。彩度と明度はそれぞれ0から100パーセント（両端含む）でなければならず、デザイナーがスタイルシートに書くパーセントと一致します。
送信内容と返却内容
色相が合法帯の外にある場合、応答はhが0から360度の間でなければならないと説明し、クライアントが再試行前にトークンをクランプまたは修正できるようにします。
成功時には、整形済みのh、s、l、それぞれ0から255の整数チャネルr、g、b、rgb(R, G, B)形式の印刷可能なrgb文字列、#rrggbb形式の小文字hex文字列、CSSとW3C経路を名指す短い公式メモを返します。
古典的な確認例には、色相0・彩度100・明度50の純赤が255, 0, 0になること、任意の色相で彩度0・明度50の中間灰色が各チャネル128になること、色相120付近で高彩度・控えめな明度の深い緑などがあります。
パレット探索やデザインレビューには無料のブラウザフォームを使い、デザイントークンをRGB表や回帰フィクスチャへ一括変換するときはスクリプトから同一契約を呼び出してください。検証失敗はプリペイド残高を消費しません。
実務でHSLからRGB変換が現れる場面
デザインシステムはブランドランプとセマンティックトークンをHSLで保存し、製品チームがコントラストに優しい明度ステップを保ちつつテーマ用に色相を回せます。CSSカスタムプロパティ、モバイルネイティブカラー、キャンバスの塗りスタイルへの出荷には、依然として信頼できるRGBとhexが必要です。
データ可視化ライブラリは固定の彩度・明度で色相を刻んでカテゴリパレットを作り、各ステップをSVG、WebGL、チャートエンジン用のRGBへ変換します。メールテンプレートやPDF生成器はhexまたはrgb()だけを受け付けることが多く、マーケティング自動化パイプラインはブランドのHSL仕様を一度変換してチャネル三値をキャッシュします。
アクセシビリティのワークフローはRGBまたは相対輝度でコントラスト比を計算します。知覚的な明度調整のためにHSLから始めても、最終的にはこの変換器が提供するチャネル値に至ります。カリキュラムやブートキャンプの授業は色モデルを並べて教え、宿題の正解用にCSSレンダリングと一致する信頼できる単一の基準が必要です。
後でHEX・LAB・CMYKの多形式変換、RGBからHSLへの逆変換、WCAGコントラスト検査が必要なら、この専用のHSL→RGB変換ページを過負荷にせず、別の検索意図とランディングとして扱ってください。
活用例
デザイントークンをCSSとhexへ
HSLのブランドランプを整数RGBチャネルと#rrggbbコードへ変換し、ブラウザのhsl()レンダリングと一致すべきスタイルシート、デザイントークン、ドキュメント表に使います。
パレット生成とチャート
固定の彩度・明度で色相を刻んでカテゴリパレットを作り、SVG・キャンバス・データ可視化ライブラリ向けに安定した0–255のRGBを得ます。
よくある質問
色相・彩度・明度はどの範囲を受け付けますか？
色相hは0から360度（両端含む）でなければなりません。彩度sと明度lは0から100のパーセントです。
HSLをRGBに変換するアルゴリズムはどれですか？
CSS / W3C Color Moduleの経路です。単位区間の彩度と明度、中間値pとq、赤・緑・青へのhue2rgbサンプル、その後Math.roundで0–255の整数にします。
応答にはRGBに加えてhexも含まれますか？
はい。 成功応答には整数r、g、b、cssのrgb()文字列、スタイルシートやデザインツールに貼れる小文字の#rrggbb hexコードが含まれます。
hsl(210, 80%, 45%)はRGBでいくつですか？
赤23、緑115、青207で、rgb(23, 115, 207)と書きます。同じ色は小文字の十六進コード#1773cfとしても表示されます。
色相が0〜360の範囲外だとどうなりますか？
分かりやすいメッセージとともに受け付けません。入力の誤りが気づかないうちに別の色にならないよう、色相環を一周させて計算し直すことはしません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/hsl-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"h":210,"s":80,"l":45}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"h": 210,
"s": 80,
"l": 45
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"h": 210,
"s": 80,
"l": 45
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"h":210,"s":80,"l":45}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"h":210,"s":80,"l":45}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-rgb", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"h": 210,
"s": 80,
"l": 45
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_rgb",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
デザイナーやフロントエンドエンジニアは、色相を回しても彩度と明度が保たれるためHSLで色を選ぶことが多い一方、ブラウザ、キャンバス、画像バッファ、多くのグラフィックスAPIは最終的に0から255の赤・緑・青チャネルを必要とします。この変換器は、0から360度の色相、0から100パーセントの彩度と明度という三つの数値を受け取り、ブラウザがCSSのhsl()に使うのと同じ閉形式の経路で、整数RGBチャネル、CSSのrgb()文字列、小文字のhexコードを返します。無料のブラウザツールと有料APIは同一の純粋な同型関数を共有するため、デザイントークン、ドキュメント表、自動化パイプラインが同じHSL三値で食い違うことはありません。
HSLが赤・緑・青へどう写像されるか
パイプラインは純粋な浮動小数点演算で、乱数シードも壁時計のタイムスタンプもネットワーク呼び出しもなく、同一のHSL入力は常に同一のJSONを生成します。色相は0から360の閉区間になければならず、マイナス1や400のような値はモジュララップではなくinvalid_inputで失敗します。
送信内容と返却内容
フィールドh、s、lに有限な数値を三つ送ってください。フィールドhは度数の色相で必須であり、0から360（両端含む）になければなりません。フィールドsとlは0から100のパーセントとしての彩度と明度です。欠落フィールド、非数値文字列、NaN、Infinityはinvalid_inputで失敗し、課金されません。成功したAPI呼び出しの料金は公開されている基本額$0.002/件です。
実務でHSLからRGB変換が現れる場面
ゲームツールやレベルエディタはアーティストに色相ホイールを見せ、ブラウザ専用APIなしで整数RGBをマテリアル定義やテクスチャの色付けに書き出さねばなりません。この機能は純粋なパースエンジンであるため、API料金は成功1件あたり公開基本額$0.002で、検証失敗は残高を消費しません。
連携の活用例
トークン一括パイプライン
デザインシステムのHSL仕様を、決定論的な一つのAPIでモバイルテーマ、メールテンプレート、回帰テスト用のRGB・hexフィクスチャへスクリプト化します。
技術的な質問
色相が0–360の外だとどうなりますか？
リクエストはinvalid_inputで失敗します。この変換器は色相を360でモジュララップしません。再試行前に角度を修正またはクランプしてください。
料金はいくらですか？
ブラウザツールは無料でローカル実行です。APIリクエストは成功1件あたり$0.002のプリペイドKIT残高を使い、無効な入力は課金されません。