ForHosting KIT · 画像の編集・解析

HWBからHSLへの変換

Q: 灰色の結果でも色相は保持されますか？

はい。 入力色相を0以上360未満へ調整し、彩度が0でも返すため、メタデータを決定論的に保持できます。

色相210、白色度20%、黒色度10%はhsl(210 77.78% 55%)になり、色相は入力したまま保たれます。HWBで決めたデザインの色を、迷わずHSLに移せます。ブラウザで無料で使えます。

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

無料で実行 API仕様を見る

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

計算例

入力した場合

Hue: 210
白色度: 20
黒色度: 10

結果

H: 210
S: 77.7778
L: 55
彩度: 77.7778

HWBからHSLへの変換ツールは、色相角と白色度・黒色度の割合を、色相・彩度・明度へ変換します。ブラウザーのカラーパーサーや外部サービスには依存しません。正規化した色相角を保持し、各成分を検証し、白色度と黒色度の合計が100パーセントを超える場合は標準のHWB正規化規則を適用します。

完全なHWBカラーを入力し、検証内容を確認します

色相は度で表し、有限であれば正負どちらの角度でも指定できます。変換ツールはその値を0以上360未満の一般的な範囲に折り返すため、-30は330に、420は60になります。白色度と黒色度はパーセントで、それぞれ0以上100以下でなければなりません。

コンパクトなHWBレコードを保存しているクライアント向けに、短い別名h、w、bも使用できます。有効な10進表記または指数表記だけを含む数値文字列は受け付けるため、検証の厳密さを保ちながらフォーム型クライアントにも対応できます。この厳格な境界により、上流の不正データがもっともらしいパレット値として流れる前に変換工程で停止できます。

白色度と黒色度をHSLへ写像する仕組み

HWBは、純粋な色相に白と黒を混ぜたものとして色を表します。2つの割合を小数へ変換した後、その合計を確認します。合計が1以下なら、残りの比率がクロマ、つまり1から白色度と黒色度を引いた値です。

HSLの明度は、1に白色度を加えて黒色度を引き、2で割って求めます。彩度はクロマを、1から「明度の2倍から1を引いた値」の絶対値を引いた数で割ります。ただし黒、白、無彩色の境界では0です。

白色度と黒色度の合計が100パーセントを超える場合、CSSの色規則に従い、両方をその合計で割って正規化します。彩度が0でも、返される色相には範囲調整後の入力角を保持します。そのため、見た目の灰色に知覚可能な色相がなくても、往復変換、パレットのメタデータ、決定論的比較が安定します。

数値結果はすべて小数第4位に丸め、スナップショットへの浮動小数点ノイズを防ぎます。

CSS、デザインシステム、自動テストで結果を利用します

成功時の応答にはh、s、lがあり、色相は度、彩度と明度はパーセントです。単発のパレット作業、ドキュメント例、授業での確認には無料のブラウザー実行機能をご利用ください。実装は範囲の定まった算術だけで構成されるため、同じ入力は常に同じ出力になります。

ネットワーク、乱数、システム時計、ロケール依存パーサー、隠れたカラープロファイルは使用しません。このツールはHWBからHSLへの変換だけを扱います。

活用例

CSSカラートークンを移行します

HWBデザイントークンを数値のHSL成分とCSS文字列へ変換し、確認用に元の色相と混合比も保持します。

生成したパレットを正規化します

白色度と黒色度の合計が100パーセントを超える生成値を、明示的な有効値で処理し、ブラウザー依存の差を防ぎます。

よくある質問

どの単位を指定できますか？

色相は度単位の角度です。白色度と黒色度は0以上100以下のパーセントで、0から1の小数ではありません。

白色度と黒色度の合計が100パーセントを超えるとどうなりますか？

HWB規則に従い、両方の値を合計で割って比例正規化します。出力は無彩色になり、normalizedはtrueとなり、有効な割合も返します。

灰色の結果でも色相は保持されますか？

はい。入力色相を0以上360未満へ調整し、彩度が0でも返すため、メタデータを決定論的に保持できます。

色相210、白色度20%、黒色度10%はHSLでいくつですか？

hsl(210 77.78% 55%)です。白色度と黒色度を除いた残りが純色で、明度は「1＋白色度−黒色度」を2で割った値、つまり55%になります。

どんな場面で役立ちますか？

HWBで作ったデザインの色をHSLに移すときや、白色度と黒色度の合計が100%を超えるパレットを整えるときに、元の色相を残したまま同じ結果を得られます。

開発者向け — APIアクセス

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

エンドポイント

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

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

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

curl -X POST https://api.kit.forhosting.com/color/hwb-hsl \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hue":210,"whiteness":20,"blackness":10}'

const res = await fetch("https://api.kit.forhosting.com/color/hwb-hsl", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "hue": 210,
    "whiteness": 20,
    "blackness": 10
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/hwb-hsl",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "hue": 210,
    "whiteness": 20,
    "blackness": 10
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hwb-hsl", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"hue":210,"whiteness":20,"blackness":10}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"hue":210,"whiteness":20,"blackness":10}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hwb-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "hue": 210,
  "whiteness": 20,
  "blackness": 10
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hwb_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`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

結果には数値のHSLフィールド、入れ子オブジェクト、すぐ使えるCSS文字列が含まれます。ブラウザーツールは無料で、APIによる自動変換は成功した項目ごとに$0.002です。

完全なHWBカラーを入力し、検証内容を確認します

hue、whiteness、blacknessには有限の数値を指定してください。値の欠落、数値でない文字列、無限大、範囲外の割合は、推測や無言の切り詰めを行わずinvalid_inputとして返します。

白色度と黒色度をHSLへ写像する仕組み

色成分は残らないため結果は灰色になり、effective_whitenessとeffective_blacknessが正規化後の混合比を示し、normalizedはtrueになります。

CSS、デザインシステム、自動テストで結果を利用します

長い名前のhue、saturation、lightness、入れ子のhslオブジェクト、スタイルシートやカスタムプロパティへ直接使えるhsl_cssも返します。元の白色度と黒色度は保持され、effective_whitenessとeffective_blacknessにより、正規化が必要だった過剰なHWB混合を判別できます。トークンコンパイラー、テーマ生成器、移行スクリプト、継続的インテグレーション処理で同じ安定したJSON契約が必要な場合は、成功した項目ごとに$0.002のAPIをご利用ください。任意のHEX、RGB、LAB、CMYK入力を判別する用途には多形式変換ツールが適しますが、この専用エンドポイントはHWB処理に厳密な検証と明確な正規化規則を提供します。

連携の活用例

安定したカラーfixtureを作成します

丸めた決定論的なHSL出力を、単体テスト、教材、言語間の適合性検査に利用します。

技術的な質問

h、w、bのフィールド名を使用できますか？

はい。hue、whiteness、blacknessの別名として使用できます。両方を指定した場合は長い標準名が優先されます。

API変換の料金はいくらですか？

APIで成功した項目ごとに$0.002です。ブラウザー実行機能は無料で、検証エラーはinvalid_inputとして返します。

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

HWBからHSLへの変換

無料で実行

計算例

完全なHWBカラーを入力し、検証内容を確認します

白色度と黒色度をHSLへ写像する仕組み

CSS、デザインシステム、自動テストで結果を利用します

活用例

CSSカラートークンを移行します

生成したパレットを正規化します

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

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

リクエスト例

レスポンス例

料金

エラー

技術的な注記

完全なHWBカラーを入力し、検証内容を確認します

白色度と黒色度をHSLへ写像する仕組み

CSS、デザインシステム、自動テストで結果を利用します

連携の活用例

安定したカラーfixtureを作成します

技術的な質問

ありがとう