ForHosting KIT · 画像の編集・解析

RGB→HSL変換

どのRGBカラーも色相・彩度・輝度で確認できます。255, 128, 64は20.1°、100 %、62.55 %になります。色味の調整やライト・ダークテーマ作りを勘に頼らず進められます。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

計算例

入力した場合

抵抗（Ω）: 255
G: 128
B: 64

結果

H: 20.1047
S: 100
L: 62.549
色相: 20.1047

デザイナー、フロントエンド開発者、パイプラインの作成者は、色を赤・緑・青の整数（ゼロから二百五十五）として扱うことが多く、一方で明度をずらさずにトーンを調整したり、CSS変数を組み立てたり、色を扱うツールに渡したりするために、色相・彩度・明度が必要になります。このRGBからHSLへの変換ツールは、その標準バイト範囲の三チャンネルを受け取り、決定的なsRGB風の変換を実行し、度数の色相とパーセントの彩度・明度、およびスタイルシートに貼れる現行形式と旧形式のCSS hsl文字列を返します。ゼロから二百五十五の外にあるチャンネルは、明確な無効入力エラーで失敗するため、不正データが黙ってクランプされることはありません。

RGBチャンネルの入力と変換が計算すること

赤・緑・青に対応する r、g、b という三つの数値を指定してください。各チャンネルはゼロから二百五十五までの有限数でなければならず、"128" のような整数文字列も受け付けます。エンジンはまず各チャンネルを二百五十五で割り、単位区間上の値に正規化します。

次に正規化後の三成分の最大・最小を求め、その差をクロマとします。明度は最大と最小の和の半分です。クロマがゼロのとき色は無彩色で、色相と彩度はゼロとなり、黒から中間グレーを経て白までのグレーを記述するのは明度だけです。

クロマが正のとき、彩度はクロマを「1 から、明度の2倍マイナス1の絶対値を引いた値」で割ったもので、CSSやグラフィックス系で使われる標準のHSL彩度式です。色相は最大チャンネルが属する色相環の区画（赤優勢・緑優勢・青優勢）から組み立てられ、ゼロ以上三百六十未満の度数にスケールされます。

色相・彩度・明度とCSS文字列の読み方

成功時、応答は入力チャンネル r、g、b をエコーし、続けて度数の色相、パーセントの彩度、パーセントの明度として h、s、l を公開します。値は安定したフィクスチャのために小数第四位まで丸められ、デザイン作業に十分な精度を保ちます。貼り付け可能な文字列が二つ含まれます。

純赤の二百五十五・ゼロ・ゼロは色相ゼロ・彩度最大・中間明度を、純緑と純青はそれぞれ約百二十度と二百四十度付近を、等しいチャンネルは彩度ゼロのグレーを生みます。

デザイン作業での使い方と注意点

パレット調整、授業デモ、色ライブラリを入れない手早い確認には、ブラウザ上の無料RGB→HSL変換を使います。検証失敗はエンジン拒否後に残高を消費しません。アクセシブルなテーマを作るときはHSL出力をコントラストチェッカーと組み合わせ、明度を固定したままアクセントを回すブランドトークンパイプラインには色相シフトを渡せます。

元入力は他のKIT parse項目と同じ保持規則に従い、アルゴリズムは完全に決定的なので結果を継続的インテグレーションのフィクスチャに固定しても安全です。

活用例

CSSとデザイントークン

デザインツールのRGBスウォッチをHSLへ変換し、ライト／ダークモードで彩度方針を保ちつつ色相や明度をテーマ側で調整できるようにします。

パレットとブランドのパイプライン

RGBのブランド色から始まる自動化がHSL成分を導き、範囲外チャンネルを黙ってクランプせずにティント・シェード・アクセント変種を生成します。

よくある質問

このツールでRGBをHSLに変換するには？

応答には h、s、l、CSS文字列、入れ子のhslオブジェクトが含まれます。

チャンネルが0–255の外だとどうなりますか？

r、g、b はいずれも0以上255以下である必要があり、範囲外は拒否され課金されません。

色相・彩度・明度はパーセントですか、0–1の小数ですか？

色相は0から360までの度数です。彩度と明度は0から100のパーセントで、一般的なCSSの hsl() の使い方に合わせています。

HSLの輝度はどう計算しますか？

各チャンネルを255で割り、最大値と最小値の和の半分が輝度になります。255, 128, 64の場合は62.55 %です。

グレーの色相はなぜ0になりますか？

赤・緑・青が等しいと色みがないため、色相も彩度も0になります。黒から中間グレー、白までの違いは輝度だけで表されます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/color/rgb-hsl

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/color/rgb-hsl \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"r":255,"g":128,"b":64}'

const res = await fetch("https://api.kit.forhosting.com/color/rgb-hsl", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "r": 255,
    "g": 128,
    "b": 64
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/rgb-hsl",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "r": 255,
    "g": 128,
    "b": 64
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/rgb-hsl", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"r":255,"g":128,"b":64}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"r":255,"g":128,"b":64}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/rgb-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "r": 255,
  "g": 128,
  "b": 64
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.rgb_hsl",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

RGBチャンネルの入力と変換が計算すること

長い名前を好む場合は alias の red、green、blue が同じフィールドに対応します。経路はネットワークも乱数シードも壁時計もなく純粋な算術なので、同一入力は常に同一のJSONを返します。

色相・彩度・明度とCSS文字列の読み方

同じ三つの数値は長い名前 hue、saturation、lightness の下にも、hsl オブジェクト内にも現れ、UIコードやSDKデモ、採点器が追加の対応付けなしに都合のよい形を選べます。hsl_css は hsl(30 100% 50%) のようなスペース区切りの現行CSS Color Module形式、hsl_legacy は古いパーサがまだ期待するカンマ区切りのクラシック形式です。method フィールドは常に rgb_to_hsl なので、下流のルータは形を嗅ぎ分けることなく分岐できます。必須チャンネルの欠落、非数値、ゼロから二百五十五の外のチャンネルはすべて invalid_input で失敗し、エンジンが拒否した後は課金されません。

APIの使い方、料金、デザイン業務と実用上の制限

公開された範囲の必須数値 r、g、b を含むJSONボディを送ってください。デザインシステム、テーマ生成、アクセシビリティパイプライン、ECの色ツールがKIT残高のもとで安定した契約を必要とするときは前払いAPIを使い、成功1件あたり$0.002です。検索意図と製品の枠組みが厳密なチャンネル範囲付きのRGBからHSLに特化している場合はこのエンドポイントを優先し、HEX・RGB・HSL・LAB・CMYK間の一括変換にはカタログ内のより広い色変換を使います。SDKを配布する作者は、各言語で変換を再実装せずに h、s、l をフォーム控件やCSSカスタムプロパティへ直接対応付けできます。

連携の活用例

色の計算の授業と採点

講義やコーディング課題は受講者のRGB→HSL解答を決定的なJSONと照合し、チャンネルが0–255の外なら明確な invalid_input を返します。

技術的な質問

RGBからHSLへの変換は無料ですか？

ブラウザツールはお使いの端末上で無料です。API呼び出しは前払いKIT残高を成功1件あたり$0.002で使い、検証失敗は課金されません。

alias の red、green、blue は使えますか？

はい。フィールド red、green、blue は r、g、b の別名として受け付けられ、クライアントは短い名前でも長い名前でも使えます。

KITの完全なドキュメントを見る →

RGB→HSL変換

無料で実行

計算例

RGBチャンネルの入力と変換が計算すること

色相・彩度・明度とCSS文字列の読み方

デザイン作業での使い方と注意点

活用例

CSSとデザイントークン

パレットとブランドのパイプライン

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

エラー

技術的な注記

RGBチャンネルの入力と変換が計算すること

色相・彩度・明度とCSS文字列の読み方

APIの使い方、料金、デザイン業務と実用上の制限

連携の活用例

色の計算の授業と採点

技術的な質問

ありがとう