HSVからHSL変換
HSVからHSLへ、推測なしで色を移します。色相210、彩度70%、バリュー80%は、同じ色相のまま明度52%になり、彩度はHSL用に計算し直されます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- H
- 210
- S
- 70
- 電圧（V）
- 80
- S in
- 70
- S
- 58.3333333333
- L
- 52
HSVとHSLは、色相角度を共有する二つの円筒色モデルですが、明るさと鮮やかさを別の軸で保持します。ゲームエンジンや映像ツール、多くのネイティブピッカーはチャンネル最大輝度としてのValueを持つHSVを使い、CSSカスタムプロパティやデザインシステム、アクセシビリティ用ランプは黒と白へ対称に進むLightnessを持つHSLを好むことが多いです。このHSVからHSLへの変換器は、0から360度までの色相、パーセントの彩度、0から100パーセントまでのValueを受け取り、色相はそのままコピーして彩度とValueをHSLの彩度と明度へ再写像します。
同じ色相上でHSVがHSLへ写像される仕組み
色相は両モデルで共有されます。0度は純赤、120度は純緑、240度は純青、360度で円が閉じ再び赤になります。鮮やかさと明るさの保存方法でモデルは分岐します。
HSVではValueは単位スケール上のRGBチャンネル最大値であり、100パーセントのValueはその色相と彩度で最も明るい色、0パーセントのValueは彩度に関係なく常に黒です。HSVの彩度は、そのValueの灰色を選んだ色相の完全な有彩色へ伸ばします。
HSLでは明度は0パーセントの黒から約50パーセントの純中間色を経て100パーセントの白へ進み、HSLの彩度はその明度の灰色をフルクロマへ伸ばします。幾何が異なるため、知覚色が変換後に一致しても、多くの色ではHSVの数値彩度はHSLの数値彩度と同じではありません。ここで用いる閉形式は単位区間で動作します。
明度はValueに（1−HSV彩度/2）を掛けたもの、HSL彩度は黒または白では0、それ以外は（Value−明度）をmin(明度, 1−明度)で割ったものです。色相は変更なくコピーされます。色相は0から360の閉区間、彩度とValueはそれぞれ0から100パーセント（含む）である必要があります。
送信する内容と返却される内容
有限な数値を三つ送ってください。色相hは0から360度、HSV彩度sは0から100パーセント、Value vは同じ帯域のパーセントです。古典的な確認例として、HSVで色相0・彩度100・Value100の純中赤はHSL明度50・彩度100へ写像され、Value0の黒は明度0の無彩色黒へ、彩度0の灰色はHSL彩度0で明度が元のValueの半分になります。
パレット探索とデザインレビューには無料のブラウザフォームを使い、エンジン素材やモバイルテーマのトークンをCSSのHSLへ一括変換するときはスクリプトから同一契約を呼び出してください。
実務でHSV→HSL変換が必要になる場面
ネイティブのモバイルテーマ、UnityやUnrealのマテリアルピッカー、多くのグラフィックライブラリはValueベースの明るさ操作を提供しますが、デザインシステムはブランドランプをHSLで文書化し、プロダクトチームが色相と知覚的な彩度帯を保ちつつコントラスト用に明度を段階調整できるようにすることが多いです。
アーティストのスウォッチをHSVで保存するデータ可視化や生成アートのツールは、ウェブ向けHSLカスタムプロパティとしてトークンを書き出すときに信頼できる経路を必要とします。カメラグレーディング用にHSVで色を文書化する映像・放送パイプラインも、CSSとデザイン文書へ渡す際にはHSLが必要です。
カリキュラムやブートキャンプは円筒モデルを並べて教え、教科書の恒等式と一致する宿題キーのための単一の信頼できるオラクルを求めます。逆方向のHSL→HSV、HSV→RGB、HEX・LAB・CMYKの多形式変換、WCAGコントラスト確認が必要な場合は、このHSV→HSL変換専用ページを過負荷にせず、別の検索意図とランディングとして扱ってください。
活用例
エンジンスウォッチをCSSのHSLトークンへ
ゲームエンジンやネイティブピッカーのアーティスト向けHSV三重項を、デザインシステム・CSSカスタムプロパティ・ドキュメント表用のHSLへ変換します。
モバイルテーマとデザイン引き渡し
モバイルテーマ編集ソフトのValueベースのブランド色を、プロダクトチームがアクセシブルなコントラスト用に明るくできるHSLランプへ写像します。
よくある質問
色相・彩度・Valueの許容範囲は？
色相hは0から360度（含む）です。彩度sとValue vは0から100のパーセントです。
HSVからHSLへ変換すると色相は変わりますか？
いいえ。 色相は両モデルで共有され、変更なくコピーされます。再計算されるのは彩度とValue→明度の軸だけです。
HSVの彩度はHSLの彩度と同じ数値ですか？
いいえ。 モデルごとに彩度の定義が異なります。この変換器は閉形式の恒等式を適用し、結果色は一致しますが数値Sは一般に異なります。
黒や純白ではどうなりますか？
Valueが0のとき明度は0、HSL彩度も0（黒）です。純白や純黒に近い明度の端では、単位区間の式によりHSL彩度は0に潰されます。
HSVの210、70%、80%はHSLでどうなりますか？
色相は210のまま、明度は52%になります。HSLは鮮やかさを明度との関係で測るため、彩度は元の70%より低くなります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/hsv-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"h":210,"s":70,"v":80}'const res = await fetch("https://api.kit.forhosting.com/color/hsv-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"h": 210,
"s": 70,
"v": 80
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsv-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"h": 210,
"s": 70,
"v": 80
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsv-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"h":210,"s":70,"v":80}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"h":210,"s":70,"v":80}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsv-hsl", 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": 70,
"v": 80
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsv_hsl",
"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で失敗し、不正なトークンが黙って折り返しやクランプされることはありません。無料のブラウザツールと有料APIは同一の純正イソモルフィック関数を共有するため、デザイントークン、ドキュメント表、自動化パイプラインが同じ入力で食い違うことはありません。
同じ色相上でHSVがHSLへ写像される仕組み
パイプラインは乱数シードも壁時計もネットワーク呼び出しもない純粋な浮動小数演算であり、同一入力は常に同一のJSONを生成します。
送信する内容と返却される内容
各フィールドはJSON数値でも数値文字列でもよく、便宜上の別名hue、saturation、value、brightnessも受け付けます。欠落フィールド、非数値文字列、NaN、Infinity、範囲外チャンネルはinvalid_inputで失敗し課金されません。成功時の応答は、整形済みh、入力彩度s_in、入力Value v、出力のHSL彩度sと明度l、完全な三重項を含む入れ子のhsvとhslオブジェクト、単位区間の恒等式を述べる短い式注記を返します。成功したAPI呼び出しの料金は公開ベースの$0.002（1件あたり）であり、検証失敗はプリペイド残高を消費しません。
実務でHSV→HSL変換が必要になる場面
画像編集ソフトからHSVを受け取りHSLで知覚明度を調整するアクセシビリティ作業でも、ブラウザ専用APIに頼らない正確なチャンネル対応が必要です。本機能は純粋なparseエンジンであるため、API料金は成功1件あたり公開ベースの$0.002であり、検証失敗は残高を消費しません。
連携の活用例
一括フィクスチャと教材キー
回帰フィクスチャ、宿題オラクル、パレット書き出し向けに、決定的なHSV→HSL変換を$0.002/件でスクリプト化します。
技術的な質問
HSV→HSL変換の料金は？
ブラウザツールは無料でローカル実行です。APIは成功1件あたり$0.002のプリペイドKIT残高を使い、無効入力は課金されません。