ForHosting KIT · 画像の編集・解析

リストのもっとも明るい色

#000000、#808080、#ffffffのうち最も明るいのは、0から数えて2番目の#ffffffで、輝度は1です。ブランド色や背景色、アクセント色を目の感じ方どおりに並べられます。ブラウザで無料で使えます。

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

無料で実行 API仕様を見る

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

計算例

入力した場合

色: #000000, #808080, #ffffff

結果

数量: 3
添字: 2
色: #ffffff
Hex: #ffffff

デザインシステム、テーマ生成、アクセシビリティ確認では、候補のhexがいくつかあり「どのスウォッチがもっとも明るいか」という一点が必要になることがよくあります。中間調を目分量で比べるのは信頼できず、生のRGB平均は人の目が青より緑を強く重み付ける事実を無視します。本機能はCSS hex色のリストを受け取り、適切なsRGB線形化のあと各要素のWCAG 2.x相対輝度を計算し、もっとも明るい色と元リスト上のゼロ始まり索引を返します。同点は最初の出現を残すことで決定論的に解決し、実行環境によって等しい白が入れ替わることを防ぎます。

相対輝度がもっとも明るいスウォッチを選ぶ仕組み

相対輝度は、標準視条件で色がどれほど明るく見えるかを表すWCAGの指標です。変換後に赤・緑・青を対称に扱うHSLの明度と異なり、相対輝度は8ビットsRGBチャネルから始まり、各チャネルを単位分数へ変換し、区分的なsRGB伝達関数でガンマ符号化値を線形化し、固定係数で合成します。赤は0.2126、緑は0.7152、青は0.0722です。

これらの重みは標準観測者に対応するため、両チャネルが255でも純緑は純青よりはるかに明るいと順位付けされます。2件がまったく同じ輝度のときは、言語や実行環境をまたいでも結果が安定するよう、より小さい索引を残します。3桁の短いhexは解析前に6桁へ展開され、先頭のハッシュは任意です。

不透明RGBのみの契約のため、4桁・8桁のアルファ形式は拒否されます。経路に乱数シード、壁時計の時刻、ネットワーク呼び出しはなく、同じリストは常に同じ勝者・索引・丸め済み輝度配列を返します。

入力契約・応答形状・検証ルール

1件から64件までのhex色文字列の配列です。各要素は hash-RGB または hash-RRGGBB で、先頭ハッシュの有無と大文字小文字は問いません。例: 黒・中灰・白は索引2の白、輝度1を返します。

例: 純赤・純緑・純青は緑の係数が支配するため索引1の緑を返します。パレットを手作業で確認するときは無料のブラウザフォームを使い、トークン階段やテーマ候補を一括順位付けするときはスクリプトから同一契約を呼び出してください。

もっとも明るい色の特定が役立つ場面

ブランド・サーフェス・アクセントのトークンを並べるプロダクトデザイナーは、本文テキストとのコントラストを調べる前に、もっとも明るい背景候補を素早く印付けする手段が必要です。デザイントークンのパイプラインは複数の基準hexからティントを生成し、フル画像エディタを開かずに紙白サーフェス用のもっとも明るい段を選ばねばなりません。

アクセシビリティ担当は暗いクローム上のアイコン候補色を比較し、二次ラベル用にもっとも明るい選択肢を求めたうえで、その組をコントラスト検査へ渡します。マーケティングはロゴ抽出からキャンペーンパレットを組み、ほぼ白がプロジェクタ上で同じに見えるときにも再現可能な順位付けが必要です。

後で単一hexを暗くする、コントラスト比を計算する、HSLへ変換する、補色スキームを作る必要があれば、本ページを過負荷にせず別の検索意図とランディングとして扱ってください。

活用例

もっとも明るいサーフェストークンを選ぶ

ブランドとテーマのhex候補をWCAG相対輝度で並べ、紙白やカード背景トークンとして最明スウォッチを残します。

アクセシビリティ向けパレット仕分け

アイコンやラベル色の短い一覧から、暗いクローム用にもっとも明るい候補を選び、その後で本格的なコントラスト検査を行います。

よくある質問

どのhex形式が受け付けられますか？

3桁および6桁のCSS hexで、先頭ハッシュの有無と大文字小文字は問いません。

何色まで送れますか？

1から64まで（両端含む）です。空配列や64件超は検証に失敗し、課金されません。

2色の輝度が同じ場合はどうなりますか？

最初の出現（ゼロ始まりで最小の索引）を返すため、実行環境をまたいでも結果は決定論的です。

純粋な緑が純粋な青よりずっと明るいとされるのはなぜですか？

相対輝度では緑に0.7152、青に0.0722の重みを掛けるためです。目は緑に最も敏感なので、どちらも最大値でも緑のほうが明るくなります。

HSLの明度と同じですか？

違います。HSLは赤・緑・青を同じに扱いますが、相対輝度は画面のガンマを取り除いてから見え方に応じて重み付けするので、順位が変わることがあります。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/color/lightest-in-list

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

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

curl -X POST https://api.kit.forhosting.com/color/lightest-in-list \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"colors":["#000000","#808080","#ffffff"]}'

const res = await fetch("https://api.kit.forhosting.com/color/lightest-in-list", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "colors": [
      "#000000",
      "#808080",
      "#ffffff"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/lightest-in-list",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "colors": [
        "#000000",
        "#808080",
        "#ffffff"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/lightest-in-list", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"colors":["#000000","#808080","#ffffff"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"colors":["#000000","#808080","#ffffff"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/lightest-in-list", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "colors": [
    "#000000",
    "#808080",
    "#ffffff"
  ]
}

レスポンス例

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

技術的な注記

無効なhex、空リスト、過大な配列は勝者を捏造せず invalid_input で失敗します。無料のブラウザ経路と有料APIは同一の純粋な同型関数を共有するため、デザインレビューと継続的インテグレーションの検査が同じパレットで食い違うことはありません。

相対輝度がもっとも明るいスウォッチを選ぶ仕組み

本エンドポイントはその式をリスト内の全色に適用し、最大輝度を選びます。

入力契約・応答形状・検証ルール

必須の colors フィールドを持つJSONオブジェクトをPOSTしてください。同じフィールドに list、swatches、palette の別名も受け付けます。colors の欠落、非配列、空配列、64件超、非hex文字、不正な長さ、アルファ形式は、問題のフィールドまたは索引を示して invalid_input となり、失敗した検証は課金されません。成功時の応答には、リスト長の count、もっとも明るい色のゼロ始まり位置 index、先頭ハッシュ付き小文字6桁に正規化した color と hex、整数の r g b、印刷可能な rgb 文字列、0から1のクリーンな浮動小数としての勝者 relative_luminance、入力順の各輝度 luminances、WCAGパイプラインを示す短い formula 文字列が含まれます。成功したAPI呼び出しの料金は公開ベース $0.002 を1件あたりとします。

もっとも明るい色の特定が役立つ場面

本能力は純粋なparseエンジンのため、成功呼び出しはモデルトークンも外向きネットワークもなく公開ベース $0.002 で、失敗した検証は前払い残高を消費しません。

連携の活用例

テーマ階段のCIゴールデン

生成ティント階段のもっとも明るい段が、パレット変更後も期待する索引とhexに留まることを継続的インテグレーションで検証します。

技術的な質問

もっとも明るい色はどのように選ばれますか？

各hexをsRGBへ変換し、WCAG伝達関数で線形化し、相対輝度 L = 0.2126 R + 0.7152 G + 0.0722 B で採点します。最大のLが勝ち、完全同点では最小索引を残します。

最明色ファインダーの料金は？

ブラウザツールは無料でローカル実行です。API要求は成功1件あたり $0.002 のKIT前払い残高を使い、無効入力は課金されません。

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

リストのもっとも明るい色

無料で実行

計算例

相対輝度がもっとも明るいスウォッチを選ぶ仕組み

入力契約・応答形状・検証ルール

もっとも明るい色の特定が役立つ場面

活用例

もっとも明るいサーフェストークンを選ぶ

アクセシビリティ向けパレット仕分け

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

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

リクエスト例

レスポンス例

料金

エラー

技術的な注記

相対輝度がもっとも明るいスウォッチを選ぶ仕組み

入力契約・応答形状・検証ルール

もっとも明るい色の特定が役立つ場面

連携の活用例

テーマ階段のCIゴールデン

技術的な質問

ありがとう