知覚明度を計算
知覚明度計算ツールは、赤・緑・青の各チャンネル値を、実用的な 1 つの輝度スコアに変換します。一般的な RGB 加重式を使い、緑、赤、青の順に人の明るさの感じ方への影響を反映します。計算結果は、明示されたしきい値に基づいて明るい色または暗い色に分類され、黒または白の推奨文字色も返されます。テーマ、バッジ、グラフ、利用者が選んだ背景に対して、即座に再現可能な前景色を決めたい場合にご利用いただけます。
無料で実行
知覚明度で RGB チャンネルに重みを付ける理由
単純平均では、赤・緑・青に対する人の視覚の反応がすべて同じであるとみなしますが、実際には異なります。知覚される明るさには緑が最も大きく寄与し、次に赤、最後に青が寄与します。そのため、この計算では BT.601 系の標準的な輝度係数を使い、赤に 0.299、緑に 0.587、青に 0.114 を掛けます。各チャンネルには 0 から 255 までの整数を指定してください。加重値の合計は、おおむね 0 から 255 の範囲になり、黒はゼロ、白は 255 になります。結果は読みやすさと有用な精度を両立するため、小数第 3 位までに丸められます。この処理は決定論的であり、同じ RGB 入力からは常に同じ出力が得られます。カラープロファイルの参照、通信、乱数、端末固有の補正は行いません。素早く説明可能な画面設計の判断に適していますが、完全なカラーマネジメントやアクセシビリティ評価を置き換えるものではありません。
明るい色・暗い色の分類から文字色を選ぶ仕組み
知覚明度を計算した後、スコアをしきい値 128 と比較します。128 以上は明るい色、128 未満は暗い色に分類されます。明るい背景には黒い文字、暗い背景には白い文字が推奨されます。出力には元の各チャンネル、正確な明度スコア、分類、推奨文字色、しきい値、式が含まれます。そのため、根拠の不明な真偽値だけに依存せず、アプリケーションで判断を保存して監査できます。境界の扱いも明確で、ちょうど 128 の場合は明るい色です。これにより、しきい値付近でもクライアントごとの差を防げます。この推奨は、ラベル、チップ、自動生成アバター、テーマのプレビューなどで黒か白かを選ぶ際に便利です。ただし、あらゆるフォントサイズや表示方法で特定のアクセシビリティ基準を満たす保証ではありません。正式な適合確認にはコントラスト比の検査をご利用ください。
チャンネル値を検証して結果を安全に使う方法
RGB の各成分を r、g、b フィールドで送信してください。3 項目はすべて必須で、数値の整数として 0 から 255 までの範囲に収める必要があります。-1、256、小数、数値形式の文字列、NaN、未指定のフィールドは不正な入力として拒否され、自動的な範囲補正は行われません。厳密に拒否することで、前段の変換不具合が隠れ、保存したデザインとプレビューが異なる問題を防げます。有効な応答を受け取った後、明暗の分岐だけが必要なら classification を使い、画面が 16 進数の色を受け付けるなら recommended_text_color を直接お使いいただけます。色見本の並べ替えや計算値の表示には perceived_brightness が便利です。API は 1 リクエスト $0.002 で、ブラウザーでは同じ決定論的計算をローカルで実行できます。大きなパレットでは、色ごとに一度計算し、元の RGB 値と結果を一緒に保存してください。
活用例
自動生成バッジの文字色を選ぶ
利用者データや生成パレットから背景色を作る場合に、黒または白の文字を選択できます。
テーマの色見本を分類する
保存済みの色を明るい色・暗い色に分け、テーマ編集画面ですぐ適切な前景色を表示できます。
前景色の自動判断を監査する
スコア、しきい値、式をデザイン判断とともに保存し、後から同じ結果を再現できます。
よくある質問
どの計算式を使用しますか?
0.299 × 赤 + 0.587 × 緑 + 0.114 × 青を使います。各チャンネルは 0 から 255 までです。
色が明るいと分類される条件は何ですか?
知覚明度が 128 以上なら明るい色です。128 未満は暗い色になります。
WCAG のコントラスト適合を保証しますか?
いいえ。知覚明度に基づく簡易的な二択です。正式な WCAG 評価にはコントラスト比検査をご利用ください。
チャンネル値が有効範囲外の場合はどうなりますか?
不正な入力としてリクエストが失敗します。値を自動的に有効範囲へ補正することはありません。
API での計算料金はいくらですか?
API は 1 リクエスト $0.002 です。ブラウザー版では同じ決定論的計算をローカルで行えます。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/luminance-perceived \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"r":52,"g":152,"b":219}'const res = await fetch("https://api.kit.forhosting.com/color/luminance-perceived", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"r": 52,
"g": 152,
"b": 219
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/luminance-perceived",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"r": 52,
"g": 152,
"b": 219
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/luminance-perceived", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"r":52,"g":152,"b":219}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"r":52,"g":152,"b":219}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/luminance-perceived", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"r": 52,
"g": 152,
"b": 219
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.luminance_perceived",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |