色が明るいか暗いか
白の#ffffffは輝度255で、閾値128を上回るため明るい色と判定され、黒い文字（#000000）が推奨されます。ボタンやバッジ、チップの文字色選びに使えます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 色
- #ffffff
- 入力HEX
- #ffffff
- 入力 RGB
- 255, 255, 255
- 抵抗（Ω）
- 255
- G
- 255
色付きボタン上でラベル文字を黒にするか白にするかは、アクセシビリティとブランドの定番課題です。薄い黄の上の純白はコントラストに失敗し、ほぼ黒に近い塗りではネイビー上の純黒も違和感が出ます。本ツールは不透明な hex 色を一つ受け取り、緑を赤・青より重くする ITU-R BT.601 係数で決定論的な知覚輝度を計算し、設定可能な閾値（既定は 0 から 255 の尺度で 128）と比較し、その見本が明るいか暗いかと推奨の重ね文字色を返します。#3b82f6 や #f8fafc、3 桁の #abc などのブランドトークンを貼り付けてください。テーマトークンを結線するデザイナー、動的バッジのアイコン色を選ぶ開発者、明暗判定を固定する自動テストは、毎回同じ算術が必要です。
なぜ単純なチャンネル平均ではなく知覚輝度なのか
赤・緑・青を平均する素朴な中間グレー規則は、純青と純黄を同じ明るさとして扱い、人間の視覚や多くの UI ライブラリが明暗を決める方法とずれます。本ページの知覚輝度は、映像と Web ツールで長く使われる BT.601 系ルーマ係数に従います。
輝度は赤に 0.299、緑に 0.587、青に 0.114 を掛けた和であり、各チャンネルは 0 から 255 の整数です。目が最も敏感な緑が和を支配し、青の寄与は最小です。輝度を求めたあと、ツールは閾値と比較します。
既定の閾値は 8 ビット尺度の中点である 128 で、その値以上を明るいとみなす多くのオープンソース isLight ヘルパーと一致します。デザインシステムで暗い色をより多くしたい場合は閾値を上げ、明るい色をより多くしたい場合は下げてください。分類は明るい側が包括的で、輝度が閾値以上なら light、厳密に下なら dark です。
バッジやチップ向けの実用的な既定ですが、WCAG のコントラスト比が必要な本番では、中間グレー上の黒が輝度分類を通っても小さな文字で AA に落ちることがあるため、最終ペアをコントラスト検査で測ってください。本ページは意図的に「色が明るいか暗いか」「hex 明暗分類」という検索意図に答え、二色間の完全なコントラスト比計算は扱いません。
実践的な注意、制限、関連検索
単体テストでは、必ず明るいはずのほぼ白の背景、必ず暗いはずのほぼ黒の塗り、既定閾値付近の飽和した中間トーンのブランド色、3 桁ショート、境界色を反転させる独自閾値、検証回帰を防ぐ意図的な無効 hex を少なくとも一つずつカバーしてください。
本分類器は単一スウォッチの明暗に答え、前景と背景の WCAG コントラストは計算せず、主スコアとして 0〜1 の線形化 sRGB 相対輝度も返しません（BT.601 チャンネル輝度を報告します）。アルファや文字サイズも調整しません。#RRGGBBAA のようなアルファ形式は渡さないでください。
本ページは不透明 hex のみを分類します。CSS 色名と rgb() 文字列は先に hex へ解決してから渡すと、検証面が一つの明確な色文字列のままです。対象検索は「色が明るいか暗いか」「hex 明暗チェッカー」「知覚輝度の重ね文字」「hex を無料で明暗分類」などであり、完全なパレット生成、暗く／明るくするミキサー、多色空間変換ではありません。
すでに一つの hex トークンがあり、決定論的な明暗ラベルと既定の黒／白重ね推奨だけが必要なときに本機能を選び、二色間のコントラスト比や AA フラグが必要なら候補選定後に専用のコントラスト検査を使ってください。
活用例
動的バッジとチップのラベル
ユーザーが選んだバッジ色に黒または白のラベル文字を選び、ブランド hex を手調整しなくてもプロダクト UI の可読性を保ちます。
テーマトークンの自動化
デザインシステムのサーフェストークンを明暗に分類し、アイコンセットと細いボーダーが CI で自動切替されるようにします。
重ね文字判定の単体テスト
hex フィクスチャから既知の明暗分類を固定し、輝度計算が変わったときの回帰をテーマエンジンが検出できるようにします。
よくある質問
明暗はどのように決まりますか？
8 ビットチャンネルで BT.601 知覚輝度 = 0.299×R + 0.587×G + 0.114×B を計算し、閾値（既定 128）と比較します。brightness ≥ threshold → light、それ以外は dark です。
推奨する重ね文字色は何ですか？
明るい背景では暗い文字（#000000）、暗い背景では明るい文字（#ffffff）です。本番の小さな文字では WCAG コントラストを必ず確認してください。
どの色形式が受け付けられますか？
任意の先頭 # 付き #RGB または #RRGGBB（大文字小文字不問）です。アルファ hex、CSS 色名、rgb() 文字列は本ページでは受け付けません。
輝度の閾値は変更できますか？
はい。 threshold に 0 から 255 の有限数を渡してください。値を上げると暗い分類が増え、下げると明るい分類が増えます。既定は 128 です。
どちらも純色なのに、黄色は明るく青は暗いと判定されるのはなぜですか？
知覚輝度は緑を最も重く、青を最も軽く扱うためです。赤×0.299、緑×0.587、青×0.114の合計で計算するので、緑を最大に含む黄色は高く、純粋な青は低くなります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/is-light-or-dark \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3b82f6"}'const res = await fetch("https://api.kit.forhosting.com/color/is-light-or-dark", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3b82f6"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/is-light-or-dark",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3b82f6"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/is-light-or-dark", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3b82f6"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3b82f6"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/is-light-or-dark", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#3b82f6"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.is_light_or_dark",
"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 はラベルを捏造せず invalid_input で失敗します。経路は純粋な決定論的解析であり、ネットワークも乱数シードも壁時計も使わないため、無料のブラウザ実行とプリペイド API は毎回同じ JSON を返します。
なぜ単純なチャンネル平均ではなく知覚輝度なのか
応答は常に数値の輝度、使用した閾値、is_light と is_dark の真偽値、分類文字列、および明るい背景では #000000 の暗い重ね文字・暗い背景では #ffffff の明るい重ね文字の推奨をエコーします。
入力契約、応答形、エラー動作
有効な例は #3b82f6、3b82f6、#abc、ABC です。前後の空白は除去され、英字の大文字小文字は問わず、先頭の # は任意です。任意の threshold は 0 から 255 の有限数で、省略時は 128 を使います。デザインツールが書き出した正確なトークンを送ることを推奨します。必須の color 文字列を含む JSON 本体を送ってください。color フィールドは alias の hex、value、text、input、code を受け付けます。受け付けるのは 3 桁または 6 桁の十六進本体のみで、8 桁アルファ hex、rebeccapurple のような CSS 色名、rgb() 関数文字列、別フィールドの数値チャンネルは対象外として拒否し、アルファを黙って落とさないようにします。成功時の応答は、解決したソースの input_hex と input_rgb、整数チャンネル r g b（alias red green blue）、hex3 または hex6 の source、表示精度を固定した 0〜255 の brightness、255 で割った brightness_0_1、threshold、light または dark の classification、is_light と is_dark、dark または light の recommended_text、#000000 または #ffffff の recommended_text_hex、BT.601 加重和を再掲する formula、perceived_brightness_bt601 の method、短い英語要約の message、教育・デバッグ用の順序付き steps を返します。color 欠落、空文字、誤った hex 長、非 hex 文字、プログラミングの 0x 接頭辞、範囲外の閾値などの検証失敗は invalid_input を返し、課金されません。料金は成功したリクエストごとに定額の $0.002（単位 item）です。応答は常にソースを小文字 6 桁の input_hex に正規化し、下流の diff を安定させます。
実践的な注意、制限、関連検索
invalid_input を返す失敗タスクはプリペイド残高を消費しないため、不完全なクリップボード値を貼る探索スクリプトやフォーム検証を安く保てます。閾値既定や丸めの将来変更が静かに通らないよう、自動テストで classification、brightness、recommended_text_hex を固定し、他の輝度系と並べて保存するときは method が perceived_brightness_bt601 であることを文書化してください。
技術的な質問
色の明暗分類は無料ですか？
ブラウザツールは無料でローカル実行です。API 呼び出しは成功したリクエストごとにプリペイド KIT 残高から $0.002 を使い、失敗は課金されません。