Hex→HSL変換
十六進コードを目で調整しやすい値に変えます。#FF8040は色相20.1°、彩度100%、明度62.55%で、hsl(20.1 100% 62.55%)としてそのまま貼り付けられます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 16進
- #FF8040
- hex 桁
- FF8040
- 抵抗（Ω）
- 255
- G
- 128
- B
- 64
デザイナー、フロントエンド開発者、ブランドシステムは色を #FF8040 や短縮形 #f80 のような hex コードで保存することが多い一方、明るさをずらさずトーンを調整し、CSS 変数を組み立て、色を意識したデザイン トークンを供給するために色相・彩度・明度を必要とします。この hex→HSL 変換は、先頭のハッシュの有無を問わず三桁または六桁の十六進色コードを受け付け、CSS と同じく短縮形を展開し、決定的な sRGB 風の変換を実行し、度単位の色相とパーセントの彩度・明度、スタイルシートに貼れる現代形および旧形の CSS hsl 文字列を返します。
hex コードの入力と変換が計算する内容
先頭のハッシュは任意なので #FF8040 と FF8040 の両方、短縮形の #f80 と f80 も受け付けます。大文字小文字は無視され、小文字・大文字・混在の桁は同じ結果に正規化されます。三桁コードは各桁を倍にして展開し—f80 は FF8800 に—ブラウザの CSS 色短縮規則に一致します。
展開後エンジンはチャネルごとに二桁の hex を 0 から 255 の赤・緑・青整数に解析し、255 で割って単位区間に正規化します。三つの正規化成分の最大と最小、およびその差としてのクロマを求めます。明度は最大と最小の和の半分です。
クロマがゼロのとき色は無彩色で、色相はゼロ、彩度はゼロとなり、黒から中間グレーを経て白までのグレーは明度だけで表されます。クロマが正のとき、彩度はクロマを「1 から｜2×明度−1｜を引いた値」で割ったもので、CSS とグラフィックス スタックで使われる標準の HSL 彩度式です。
色相は最大チャネルが位置する色相環のセクター—赤優勢、緑優勢、青優勢—から構築され、0 から 360 未満の半開区間で度にスケールされます。
活用例
ブランド hex 色から CSS・デザイン トークン
デザイン ツールの hex スウォッチを HSL に変換し、ライト／ダーク モードで彩度方針を保ちつつテーマが色相や明度を調整できるようにします。
パレットとブランドのパイプライン
ブランド hex 色から始まる自動化が HSL 成分を導き、不正なコードを黙って受け付けずにティント・シェード・アクセント変種を生成します。
よくある質問
このツールで hex 色を HSL に変換するには？
応答には h・s・l、RGB チャネル、CSS 文字列、入れ子の hsl オブジェクトが含まれます。
hex コードが無効な場合はどうなりますか？
受け付けるのは 3 桁または 6 桁の十六進（先頭 # は任意）のみです。長さの誤りや非 hex 文字は拒否され課金されません。
色相・彩度・明度はパーセントですか、0–1 の分数ですか？
色相は 0 から 360 までの度です。彩度と明度は 0 から 100 のパーセントで、一般的な CSS の hsl() 利用に合わせています。
三桁の短い hex コードは使えますか？
はい。 #f80 のようなコードは各桁を倍にして #FF8800 に展開し（CSS 短縮規則に一致）、その後 HSL に変換します。
#808080のようなグレーはどうなりますか？
三つのチャンネルが等しいため、彩度は0、色相も0になります。その場合は明度だけで、黒から中間のグレー、白までの色を表します。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/hex-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#FF8040"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#FF8040"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#FF8040"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#FF8040"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#FF8040"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"hex": "#FF8040"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
無効な hex—長さの誤り、非 hex 文字、欠落フィールド—は明確な無効入力エラーで失敗し、悪いデータが黙ってクランプされることはありません。
hex コードの入力と変換が計算する内容
hex という名前の文字列フィールドに三桁または六桁の十六進色コードを指定してください。クライアントが別名を好む場合、alias の color、colour、value、hex_code は同じフィールドに対応します。経路はネットワーク・乱数シード・壁時計のない純粋な算術のため、同一入力は常に同一の JSON を生みます。
色相・彩度・明度、RGB エコー、CSS 文字列の読み方
続けて色相（度）、彩度（％）、明度（％）として h・s・l を公開します。純赤 #FF0000 は色相ゼロ・彩度最大・中間明度、純緑 #00FF00 と純青 #0000FF はそれぞれ約 120 度と 240 度付近、#808080 のような等しいチャネルは彩度ゼロのグレーになります。成功時は先頭ハッシュ付き六桁大文字の正規化 hex 文字列、ハッシュなしの hex_digits フィールド、解析確認や RGB 専用ツールへの連結用に展開された r・g・b チャネルを含みます。同じ三数は長い名前 hue・saturation・lightness の下にも、hsl オブジェクト内にも現れ、UI コード・SDK デモ・採点が余分な対応なしで合う形を選べます。貼り付け可能な二本の文字列があり、hsl_css は hsl(20.1 100% 62.55%) のような現代の空白区切り CSS Color Module 形、hsl_legacy は古いパーサがまだ期待する括弧付きカンマ形です。method フィールドは常に hex_to_hsl で、下流ルータが形を嗅がずに分岐できます。hex 欠落、空文字列、非 hex 文字、三桁・六桁以外の長さはすべて invalid_input で失敗し、エンジンが拒否した後は課金されません。
API の使い方、料金、デザイン ワークフロー、実務上の制限
パレット調整、講義デモ、色ライブラリを入れない素早い確認には無料のブラウザ内 hex→HSL 変換を使います。アクセシブルなテーマ構築時は HSL 出力をコントラスト検査と組み合わせ、ブランド hex スウォッチから派生したアクセントを明度固定で回転させるブランド トークン パイプラインに色相シフトを流し込めます。必須文字列 hex を三桁または六桁の色コードに設定した JSON 本体を送ってください。デザイン システム、テーマ生成、アクセシビリティ パイプライン、EC の色ツールが KIT 残高下の安定契約を要する場合は前払い API を使い、成功アイテムごとに $0.002；検証失敗はエンジン拒否後に残高を消費しません。検索意図と製品枠が厳密なコード検証付きの hex→HSL であるときに本エンドポイントを選び、RGB チャネル三組には専用の RGB→HSL 変換を、HEX・RGB・HSL・LAB・CMYK の一括多形式変換にはカタログ内のより広いカラー変換を使ってください。SDK を出荷する作者は、各言語で hex 解析と変換を再実装せずに h・s・l をフォーム制御や CSS カスタム プロパティへ直接対応付けられます。
連携の活用例
色の数学の教育と採点
講座やコーディング評価が学生の hex→HSL 解答を決定的な JSON と照合し、hex が不正なときは明確な invalid_input を返します。
技術的な質問
hex→HSL 変換は無料ですか？
ブラウザ ツールは端末上で無料実行です。API 呼び出しは成功アイテムごとに前払い KIT 残高から $0.002 を使用し、検証失敗は課金されません。