HSL文字列をRGBへ解析
貼り付けたCSSの色を数値として読み取ります。hsl(210, 80%, 45%)は赤23、緑115、青207、つまり#1773cfになります。カンマでも空白でも、degやturnといった単位付きでも使えます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- Hsl
- hsl(210, 80%, 45%)
- H
- 210
- S
- 80
- L
- 45
- 抵抗（Ω）
- 23
デザイナーやエンジニアは、スタイルシート、Figmaのトークン、ブラウザのDevToolsからCSSのhsl()およびhsla()リテラルを貼り付けたあと、キャンバス、ネイティブアプリ、画像バッファ向けに安定した赤緑青の三値が必要になります。この解析器はCSSの色文字列を一つ受け取り、余分な空白、deg・turn・rad・gradなどの任意の色相単位、彩度と明度の任意のパーセント記号を許容したうえで、解析した色相・彩度・明度を、ブラウザがhsl()を描画するときと同じCSS Color Moduleの経路で変換します。色相はCSSが角度をラップするのと同じように回り、0から100パーセントの外にある彩度と明度は拒否され、打ち間違いが黙って白になることはありません。
CSSのhsl()文字列がRGB三値になる仕組み
CSSのhsl()色は円柱座標上の点を指します。色相は色相環を回る角度、彩度は灰色からの距離、明度は黒または白への近さです。歴史的なカンマ形式hsl(h, s, l)と、空白区切りの現代形式hsl(h s l)を受け付け、hslaのaの有無、および4つ目のカンマまたはスラッシュのあとの任意アルファにも対応します。
色相は裸の度数でも、deg・turn・rad・gradの明示単位でも構いません。彩度と明度はパーセント記号を付けても省略してもよく、どちらも0から100のパーセントとして読みます。トークンが分かったあと、変換はCSS Color ModuleとW3Cのhue2rgb経路に従います。
彩度と明度を単位区間にスケールし、中間境界pとqを計算し、単位円上のずれた三位置をサンプリングし、255を掛けて整数に丸めます。彩度が0のときは三チャネルが同じ灰色に潰れます。経路は時計もネットワークもない純粋な算術なので、同じ文字列は常に同じ三値になります。
入力契約、単位、空白、エラーの扱い
値は括弧を含むCSSのhsl()またはhsla()関数でなければならず、裸の三数値は拒否されます。契約を数値HSLの二番目の形ではなく文字列解析器のままにするためです。括弧内の余分な空白は無視されます。
0から100パーセントの外にある彩度と明度もクランプせず失敗するため、500パーセントのような打ち間違いが黙って白になることはありません。色相は単位変換のあと360で剰余ラップし、CSSと同じなので480度と120度は同じ緑を描きます。
成功時は、整形した入力文字列、解析済みの数値h・s・l（ラップ後の度数の色相、パーセントの彩度と明度）、整数チャネルr・g・b、rgb配列の三値、印刷可能なrgb()文字列、小文字hex、短い公式メモを返します。元の文字列にアルファ成分があった場合は単位区間のaとrgba()文字列も含め、アルファが無いときはそれらのキーをnullにせず省略します。
例として、hsl(210, 80%, 45%)は、色相210・彩度80・明度45を数値HSL変換器に渡したときと同じ深い青のチャネルになります。
hsl()文字列の解析が実務で効く場面
フロントエンドのチームはテーマファイルからhsl()リテラルを貼り付け、キャンバスの塗り、ネイティブカラー、スクリーンショット用フィクスチャのためのRGBを必要とします。
デザイントークンのパイプラインはブランドランプをCSS関数として保存してスタイルシートの横でも読めるようにし、その後iOSのUIColor、Android Color、メール用hex向けに整数チャネルを出します。視覚回帰ツールは描画ピクセルを比較します。
CSSで使う同じhsl()文字列を決定的に解析することだけが、ブラウザを開かずに期待される8ビット三値を知る方法です。ドキュメント生成器はリポジトリのトークンから見本表を印刷し、サイトが出す緑と違う緑を発明してはなりません。CSSの色関数をRGBやhexの横に示す教材は、欠けたパーセント記号を推測で補うのではなく、壊れた構文を報告する基準が必要です。
品質保証スクリプトはスタイルシートを歩き、すべてのhsl()トークンを抜き出し、RGBフィクスチャが先週のスナップショットとまだ一致することを断言できます。検証失敗はプリペイド残高を消費しません。すでにCSS文字列ではなく三つの数値をお持ちなら、数値のHSL→RGB変換器をご利用ください。
このページはhsl()文字列をRGB三値へ解析する検索意図を担います。
活用例
スタイルシートのトークンをキャンバスとネイティブRGBへ
テーマファイルやDevToolsからhsl()リテラルを貼り付け、キャンバス塗り、UIColor、Android Color向けの整数r・g・bとhexを得ます。
デザイントークンとドキュメントのパイプライン
デザインシステムのリポジトリにあるCSS関数トークンをたどり、ブラウザのhsl()描画と一致する安定したRGB三値表を出力します。
視覚回帰用フィクスチャ
CSSが配布する同じhsl()文字列を8ビットRGBフィクスチャにし、スクリーンショット試験がブラウザが実際に塗る色と比較できるようにします。
よくある質問
解析器はどのCSSのhsl()形式を受け付けますか？
カンマ形式hsl(h, s, l)と空白の現代形式hsl(h s l)、さらにhsla()と任意アルファ（4つ目のカンマまたはスラッシュ）です。余分な空白は無視されます。色相にはdeg、turn、rad、gradを使えます。
hsl()はどうやってRGB三値へ変換されますか？
文字列を解析したあと、変換は単位円上のCSS Color Moduleのhue2rgb経路に従います。チャネルは整数0–255に丸められます。同じ文字列は常に同じr・g・bになります。
hsl()文字列が壊れているとどうなりますか？
誤った関数名、欠けた括弧、誤った成分数、カンマとスラッシュの混在、非数値トークンは拒否され、課金されません。
色相の単位はラップしますか。彩度と明度はクランプされますか？
色相は単位変換のあと360で剰余ラップし、CSSと一致します。彩度と明度は0から100パーセントの間でなければならず、範囲外は白や黒へクランプせず失敗します。
スタイルシートや開発者ツールの色をそのまま貼り付けられますか？
はい。hsl(210, 80%, 45%)のように、かっこを含めたhsl()またはhsla()の全体を貼り付けてください。余分な空白は無視されますが、hsl()のない三つの数だけでは受け付けません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/hsl-string-to-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hsl":"hsl(210, 80%, 45%)"}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-string-to-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hsl": "hsl(210, 80%, 45%)"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-string-to-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hsl": "hsl(210, 80%, 45%)"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-string-to-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hsl":"hsl(210, 80%, 45%)"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hsl":"hsl(210, 80%, 45%)"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-string-to-rgb", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"hsl": "hsl(210, 80%, 45%)"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_string_to_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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
括弧の欠落、誤った関数名、成分不足、非数値トークンといった壊れた構文は、近い色を推測せずinvalid_inputで失敗します。
CSSのhsl()文字列がRGB三値になる仕組み
著者はその点を三つの別フォーム欄ではなく関数トークンとして書くため、数値のh・s・lだけを受け付ける変換器は、真実の源がスタイルシート、デザイントークンのJSON、DevToolsのコピーであるときに隙間を残します。この機能はまず関数トークンを解析します。
入力契約、単位、空白、エラーの扱い
必須の文字列フィールドhslを一つ持つJSON本体をPOSTしてください。別名のtext、value、color、inputも同じ意味で受け付けます。hslの欠落、空文字、256文字を超える文字列、hslでもhslaでもない関数名、釣り合わない括弧、誤った成分数、カンマとスラッシュの混在、有限数でないトークンはすべてinvalid_inputで失敗し、課金されません。
hsl()文字列の解析が実務で効く場面
この機能は純粋なパースエンジンなので、ブラウザツールは無料で、成功したAPI呼び出しは公開料金$0.002/件です。
技術的な質問
hsl()文字列をRGBへ解析する料金はいくらですか。
ブラウザツールは無料です。API要求は成功1件あたり$0.002のプリペイドKIT残高を使います。無効な入力は課金されません。