HexをHSL明度でグレースケールへ
HSLの考え方で十六進カラーをグレーにします。#e74c3cでは最大のチャンネルが231、最小が60なので、明度は(231 + 60) / 2 = 145.5となり、結果は#929292です。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 色
- #e74c3c
- 値
- 146
- 入力HEX
- #e74c3c
- 入力 RGB
- 231, 76, 60
- 抵抗（Ω）
- 231
HSL明度によるHexグレースケール変換器は、不透明なHex色を、HSL明度の古典的な定義—赤・緑・青チャネルの最大値と最小値の平均—に従って単一の中立グレーへ写像します。#e74c3c、#3498db、または#f0aのような3桁の短縮形を貼り付けると、ツールはHexを展開し、各チャネルを0から255までの整数として読み取り、Lをmaxとminの和を2で割った値として計算し、最も近いグレーバイトへ丸め、グレーHexの3連、数値、CSSのrgb()文字列、maxとminのチャネル、および手順付きの算術を返します。
HSL明度が輝度ベースのグレースケールと異なる理由
色をグレーに潰す標準的な方法は一つではなく、誤った式を選ぶとコントラスト、印刷モック、モノクロテーマが静かに変わります。HSL明度は最も明るいチャネルと最も暗いチャネルだけを入力として扱います。Lは赤・緑・青のうちの最大チャネルと最小チャネルの平均です。
純赤#ff0000、純緑#00ff00、純青#0000ffはいずれもmaxが255・minが0を共有するため、見た目が大きく違っても明度の下では同じ中間グレーに写像されます。一方、輝度重み付けは緑を強調し青を弱める固定のBT.601係数でチャネルを掛け合わせるため、純緑は純青より明るいグレーになります。
どちらの方法も誤りではなく、異なる検索意図に答えます。hexを明度でグレースケールへ、HSL脱彩でグレーへ、max min平均グレー変換と入力する人は、テレビ用ルーマ式ではなくHSL定義を求めています。本ページは明度経路のみを実装し、成功応答のたびに式を文書化し、重み付き係数を使う兄弟の色からグレーへの変換器に輝度変換を任せます。
教室演習やコーディング面接では、明度を明示的にmaxとminの和を2で割ると指定することが多く、決定論的な参照があれば、チャネルを先に0から1へ正規化したか、半整数をどう丸めるか、3桁Hexをmax/minの前に展開したかの曖昧さが消えます。
実務上のヒント、制限、関連検索
単体テストを書くときは、鮮やかな赤、緑優位のティール、明度下で純赤と一致すべき純青、自己へラウンドトリップすべき既にグレーの入力、3桁短縮形、意図的に無効なHexを少なくとも1件ずつカバーし、検証の退行がすり抜けないようにしてください。明度は純原色を等しく明るいと扱う点を忘れないでください。
製品が緑を重み付けした知覚輝度を必要とする場合は、本ページではなく輝度グレースケール変換器を使います。#RRGGBBAAのようなアルファ形式は渡さないでください。本ページは不透明Hexのみを変換し、予期しない長さは拒否します。
名前付きCSS色とrgb()文字列は先にHexへ解決してからここへ渡し、検証面を仕様明確な単一の色文字列に保ちます。本ページはhexを明度でグレースケールへ、HSL明度グレー変換、Hexからmax min平均グレー、オンラインで無料にHexを明度で脱彩といった検索に応えます。
フル画像の脱彩器でも、LABやCMYK向けの多空間変換器でも、パレット生成器でもありません。すでに1つのHexトークンがあり、そのHSL明度グレーHexと整数値だけが必要なときにこの能力を選び、パイプラインがなおHSL成分・色相・彩度を出す必要がある場合はそれらの欄にHexからHSLへの変換器を使い、モノクロ段階に本ツールを使います。
活用例
HSL軸に沿ったモノクロトークン
デザイナーがブランドHexコードを貼り付けると、輝度重みではなくCSSの明度への脱彩挙動に合わせるべきモノクロテーマ向けに、HSL明度グレーのHex値が得られます。
明度グレーと輝度グレーの比較
同じHexを本ツールと輝度変換器で変換し、純原色の分岐を文書化してから、デザインシステムが文書化する方式を選んでください。
よくある質問
Hexを明度でグレースケールにする式は何ですか？
8ビットチャネル上のHSL明度: L = (max(R,G,B) + min(R,G,B)) / 2 を0から255の最も近い整数へ丸めます。グレーHexはそのバイトを3回繰り返して#YYとします。
輝度ベースのグレースケールとどう違いますか？
明度は最も明るいチャネルと最も暗いチャネルだけを平均します。輝度はR・G・Bを重み付けします（古典的には0.299、0.587、0.114）。純赤・純緑・純青は同じ明度グレーを共有しますが、同じ輝度グレーにはなりません。
どの色形式が受け付けられますか？
先頭#が任意のHex #RGBまたは#RRGGBBで、大文字小文字は問いません。アルファ付きHex、名前付きCSS色、rgb()文字列は本ページでは受け付けません。
#e74c3cをHSL明度でグレーにするとどうなりますか？
#929292になります。チャンネルは231、76、60で、最大と最小を平均した(231 + 60) / 2 = 145.5を四捨五入し、グレー値は146です。
純粋な赤・緑・青が同じグレーになるのはなぜですか？
#ff0000、#00ff00、#0000ffはどれも最大のチャンネルが255、最小が0だからです。HSLの明度はこの二つの値しか見ないため、三色とも同じ中間のグレーになります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/grayscale-lightness \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#e74c3c"}'const res = await fetch("https://api.kit.forhosting.com/color/grayscale-lightness", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#e74c3c"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/grayscale-lightness",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#e74c3c"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/grayscale-lightness", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#e74c3c"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#e74c3c"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/grayscale-lightness", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#e74c3c"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.grayscale_lightness",
"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長、非16進文字、プログラミング用の0x接頭辞、または欠落フィールド—はサンプルを捏造せず、明確なinvalid_inputエラーで失敗します。経路は純粋に決定論的な解析と算術であり—ネットワークなし、乱数シードなし、壁時計依存なし—無料のブラウザ実行器と前払いAPIは呼び出すたびに同じJSONを返します。
APIの呼び出し方と戻り値
前後の空白は取り除かれ、Hex文字の大文字小文字はどちらでもよく、先頭のハッシュは任意です。デザインツールが書き出した正確なトークンを、ハッシュがある場合は含めて送ることを推奨します。必須のcolor文字列を含むJSONボディを送信してください。colorフィールドは別名hex、value、text、input、codeを受け付け、有効な例は#e74c3c、e74c3c、#abc、ABCです。受け入れられるのは3桁または6桁の16進本体のみで、アルファ付きの8桁形式、rebeccapurpleのような名前付きCSS色、rgb()関数文字列、および個別の数値チャネルフィールドは、この文字列中心の契約の範囲外であり、アルファを黙って捨てたり解析を捏造したりせず気づけるよう拒否されます。成功時、応答は解決済みソースのinput_hexとinput_rgb、整数grayおよび別名gray_valueとvalue、6桁の中立コードとしてのgray_hexとhex、3要素配列のgray_rgb、rgb(g, g, g)形式のcss、max_channelとmin_channel、固定表示精度の丸め前平均であるlightness、Lがmaxとminの和を2で割ったことを再述するformula、hsl_lightnessと等しいmethod、短い英語要約のmessage、教育やデバッグ用の置換行の順序付き配列stepsを返します。検証失敗—color欠落、空文字、誤ったHex長、非Hex文字、プログラミング用0x接頭辞—はinvalid_inputを返し、課金されません。料金は成功リクエストごとに定額$0.002、単位はitemです。応答は常にソースを小文字6桁のinput_hexへ正規化し、クリップボード形式をまたいだ下流の差分が安定します。
実務上のヒント、制限、関連検索
invalid_inputを返す失敗タスクは前払い残高を消費しないため、不完全なクリップボード値を貼りながら探索スクリプトやフォーム検証を安価に保てます。丸めたグレーとgray_hexを自動テストに固定し、将来の丸め方針変更が静かに通らないようにし、他システムの輝度ベースグレーと並べて結果を保存するときはmethodがhsl_lightnessであることを記録してください。
連携の活用例
明度脱彩の単体テスト
Hex fixtureから既知のグレー値を生成し、テーマエンジンが安定した(max+min)/2数学を断言し、輝度式からの切替時の退行を検出できるようにします。
技術的な質問
無効な色文字列ではどうなりますか？
APIは問題を説明するメッセージ付きのinvalid_inputを返します（空入力、誤ったHex長、非Hex文字、0x接頭辞など）。検証失敗は課金されません。
Hexの明度グレースケール変換は無料ですか？
ブラウザツールは無料でローカル実行されます。API呼び出しは成功リクエストごとに$0.002の前払いKIT残高を使い、失敗タスクは課金されません。