HSL→HWB変換
色を、色相と白・黒の量で表します。hsl(210, 80%, 45%)は同じ色相のまま白色度9%、黒色度19%になり、hwb(210 9% 19%)と書けます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- H
- 210
- S
- 80
- L
- 45
- W
- 9
- B
- 19
- Css
- hwb(210 9% 19%)
HSLは色を色相環上の色相、混色の鮮やかさを示す彩度、黒や白への近さを示す明度で表します。HWBは同じ色相を使い、その純色にどれだけ白と黒を混ぜるかを名前で示します。すでにHSLで色を選んでいる方は、CSS Color Moduleのhwb()関数を書くとき、白色度と黒色度のスライダーを出すイラストツールと話すとき、見本をティントとシェードとして記録するときにHWBが必要になることがよくあります。この変換器は0から360度の色相と0から100パーセントの彩度・明度を受け取り、対応するHWB三値とCSSのhwb()文字列を返します。
HSLが色相・白色度・黒色度へどう写像されるか
色相はHSLとHWBで共有されます。0度は純赤、120は純緑、240は純青、360で円が閉じて再び赤になります。HSLはそのうえで、選んだ明度の灰色をその色相の完全に有彩な色へどれだけ引き伸ばすかを彩度として蓄え、明度を0パーセントの黒、およそ50パーセントの中間調、100パーセントの白のあいだの混色として蓄えます。
HWBは同じ色を、純色に白の量と黒の量を混ぜたものとして名指します。単位区間での写像は閉形式であり、整数RGBを経由する必要はありません。クロマは、明度の2倍から1を引いた絶対値を1から引いたものに彩度を掛けた値です。
白色度は明度からクロマの半分を引いた値、黒色度は1から明度を引きさらにクロマの半分を引いた値です。これはRGBの最小チャネルを白、最大チャネルの1引きを黒とすることと同じで、CSS Color Module Level FourがHWBを定義する方法です。
彩度が0のときはクロマが消え、白色度と黒色度は合計100になる相補的なパーセントとなり、灰色・黒・白を表します。明度が50パーセントで彩度が100パーセントのとき、クロマは1になり白も黒も0に潰れて純色になります。色相は0から360の閉区間になければならず、彩度と明度はそれぞれ0から100パーセント（両端含む）でなければなりません。
送信内容と返却内容
彩度が0から100の外にある場合、応答はsがその閉帯のパーセントでなければならないと説明し、クライアントが再試行前にトークンをクランプまたは修正できるようにします。明度にも同じ規則が適用されます。
成功時には、整形済みのh、s、lをエコーし、白色度wと黒色度bをパーセントで報告し、入力のhslオブジェクトと結果のhwbオブジェクトを入れ子にし、hwb(H W% B%)形式の印刷可能なCSS文字列を出し、クロマの恒等式を言い直す短い公式メモを含めます。
古典的な確認例には、色相210・彩度80・明度45の中間調ブルーシアンが白9パーセント・黒19パーセントになること、色相0・彩度100・明度50の純赤が白0・黒0になること、彩度0の任意の色相が白と黒の合計100の無彩混色に潰れることなどがあります。
パレット探索やデザインレビューには無料のブラウザフォームを使い、HSLデザイントークンをHWB表や回帰フィクスチャへ一括変換するときはスクリプトから同一契約を呼び出してください。検証失敗はプリペイド残高を消費しません。
実務でHSLからHWB変換が現れる場面
デザインシステムはブランドランプをHSLで書くことが多く、製品チームは色相と彩度帯を安定させたまま、アクセシブルなコントラストのために明度を段階できます。一方、現代のスタイルシート、イラストアプリ、いくつかのネイティブピッカーは、純色に白と黒を混ぜることが画家のティントとシェードの話し方と一致するため、すでにHWBを露出しています。
トークンをhsl()カスタムプロパティからhwb()へ移すフロントエンド技術者には、特定ブラウザの計算スタイル直列化に依存しない決定的な基準が必要です。固定の彩度・明度で色相を刻んでカテゴリパレットを作るデータ可視化やジェネラティブアートの道具も、レンダラや印刷パイプラインが第三の明度軸ではなく白色度と黒色度を求めるときはHWBを書き出さねばなりません。
カリキュラムやブートキャンプの授業は円筒モデルを並べて教え、カラーピッカーのスクリーンショットではなくCSS Color Moduleの恒等式と一致する宿題用の信頼できる単一の鍵が必要です。
後でHSLからRGB、HSLからHSV、HEX・LAB・CMYKの多形式変換、WCAGコントラスト検査が必要なら、この専用のHSL→HWB変換ページを過負荷にせず、別の検索意図とランディングとして扱ってください。
活用例
HSLからCSS hwb()へのデザイントークン
HSLのブランドランプを、HWBを話す現代のスタイルシート、イラストのピッカー、ドキュメント表向けの色相・白色度・黒色度の三値へ変換します。
ティントとシェードの記録
HSL見本を純色に白と黒を混ぜたものとして表し、デザインレビューが第二の色モデルなしでティントとシェードを語れるようにします。
よくある質問
色相・彩度・明度はどの範囲を受け付けますか？
色相hは0から360度（両端含む）でなければなりません。彩度sと明度lは0から100のパーセントです。
HSLとHWBのあいだで色相は変わりますか？
変わりません。 色相は両モデルで共有され、そのままコピーされます。彩度と明度から計算されるのは白色度と黒色度だけです。
白色度と黒色度はどのように計算されますか？
単位区間ではクロマCは(1 − |2L − 1|) · Sです。白色度はL − C/2、黒色度は1 − L − C/2です。結果は0から100のパーセントで返されます。
hsl(210, 80%, 45%)はHWBでどうなりますか？
色相は210のまま、白色度9%、黒色度19%になります。CSSではhwb(210 9% 19%)と書き、スタイルシートにそのまま使えます。
彩度0のグレーはどうなりますか？
彩度が0だと純色の成分がなくなるため、白色度と黒色度は足して100パーセントになる組み合わせになります。色はその白と黒の割合だけで決まります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/hsl-hwb \
-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-hwb", {
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-hwb",
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-hwb", 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-hwb", 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_hwb",
"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は同一の純粋な同型関数を共有するため、デザイントークン、ドキュメント表、自動化パイプラインが同じ入力で食い違うことはありません。
HSLが色相・白色度・黒色度へどう写像されるか
パイプラインは純粋な浮動小数点演算で、乱数シードも壁時計のタイムスタンプもネットワーク呼び出しもなく、同一のHSL入力は常に同一のJSONを生成します。その帯の外の値は、黙ったラップや無断クランプではなくinvalid_inputで失敗します。
送信内容と返却内容
フィールドh、s、lに有限な数値を三つ送ってください。フィールドhは度数の色相で必須であり、HSLとHWBがその角を共有し、この変換器はラップを発明しないため、0から360（両端含む）になければなりません。フィールドsとlは0から100のパーセントとしての彩度と明度です。欠落フィールド、空文字、非数値トークン、NaN、Infinityはフィールド名を添えたinvalid_inputで失敗し、課金されません。成功したAPI呼び出しの料金は公開されている基本額$0.002/件です。
実務でHSLからHWB変換が現れる場面
知覚的な明度をHSLで調整してからHWBベースの編集器へ渡すアクセシビリティの流れでも、ブラウザ専用APIなしの正確なチャネル対応が必要です。この機能は純粋なパースエンジンであるため、API料金は成功1件あたり公開基本額$0.002で、検証失敗は残高を消費しません。
連携の活用例
一括トークンと教材フィクスチャ
回帰フィクスチャ、宿題の正解、パレット書き出し向けに、決定的なHSL→HWB変換を1件$0.002の単一APIでスクリプト化します。
技術的な質問
CSSのhwb()文字列はどのような形ですか。
cssフィールドはhwb(210 9% 19%)のようなColor Module文字列です。色相は共有角、二つのパーセントは白色度と黒色度です。
HSLからHWBへの変換の料金はいくらですか。
ブラウザツールは無料でローカル実行です。APIリクエストは成功1件あたり$0.002のKITプリペイド残高を使い、不正な入力は課金されません。