色を最も近いパレット色に量子化
#42A5F5を#000、#369、#ffffff、#3fa7f2と比べると、3番目の#3fa7f2に合わせられ、距離の2乗は22です。ブランドや機器、ファイル形式が許す色の範囲に収められます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 色
- #42A5F5
- パレット
- #000, #369, #ffffff, #3fa7f2
- 色
- #42a5f5
- 量子化した色
- #3fa7f2
- パレットのインデックス
- 3
- 距離の二乗
- 22
インデックス画像、ターミナルテーマ、LED制御、デザイントークン、制限付きの書き出し形式など、使用できる色が決まっている場面で、元の色を固定パレットへ量子化できます。16進数の元色と順序付きパレットをご指定ください。すべての値を検証し、正確なRGB距離を比較して、最も近い正規化済みカラー、0始まりのインデックス、距離の二乗を返します。同距離の場合は常に先頭の候補を選ぶため、同じ入力からは毎回同じ結果が得られます。
用途に合う固定パレットをご用意ください
色の量子化では、まず出力先が実際に保存または表示できる色を決めます。パレットの配列には、#RGBまたは#RRGGBB形式で、意図した安定した順序に色を並べてください。短い表記は比較前に6桁へ展開され、英字の大文字と小文字は結果に影響しません。
元の色にも同じ表記を使用します。パレットには1個から256個まで登録できるため、小規模なブランドカラー、ターミナルの配色、従来型のインデックス画像テーブル、刺しゅう糸の候補、機器固有のカラーマップなどに対応できます。順序が意味を持つのは、元色から等距離の候補が複数ある場合だけです。
その際は先に置かれた色が選ばれます。この明示的な規則により、色の値を変更せずに優先順位を表せます。まとまったデータで一貫したインデックス出力が必要な場合は、処理全体で同じパレットを維持してください。
並び順が変わると、選択色が同じでも返されるインデックスは変わることがあります。空や上限超過の配列、ハッシュ記号の欠落、アルファチャンネル、不正な桁、文字列以外の項目は推測せずに拒否されます。
決定的な距離計算の仕組みをご確認ください
受け付けた各色は6桁の16進数へ展開され、赤、緑、青の各チャンネルを0から255までの値に変換します。アルゴリズムは、元色の各チャンネルからパレット候補の対応する値を引き、3個の差をそれぞれ二乗して合計します。その合計が最小の候補を採用します。
非負の距離の大小関係は平方根を取っても変わらないため、平方根の計算は必要ありません。これは符号化されたRGB空間上の通常のユークリッド距離であり、人間の知覚を再現するためではなく、明快で再現可能なインデックス変換のために採用しています。候補の更新は距離が厳密に小さい場合に限られるため、同じ距離の後続項目が先の項目を置き換えることはありません。
対称的なパレットや重複色でも、この仕様により結果が安定します。
インデックス処理で結果を安全にお使いください
配列や画像処理で一般的な規則に合わせ、番号は0から始まります。保存したインデックスとパレットは必ず一緒に管理してください。パレットを並べ替えたり交換したりすると、インデックス単体では色を特定できません。
0なら元色がすでにパレットに存在し、大きい値ほどチャンネルの変更量が増えたことを示します。用途に応じた許容上限をアプリケーション側で設け、離れすぎた変換を拒否することも可能です。ただし、この機能自体は任意の品質基準を追加せず、数学的に最も近い有効な項目を常に返します。
複数の元色には、同じ順序のパレットを用いて、この純粋な処理を各項目へ適用してください。
活用例
インデックス画像データの作成
サンプリングした画素を固定カラーテーブルの位置へ割り当ててから、インデックス表現を書き出せます。
ブランドカラーの適用
自由に選ばれた色を、デザインシステムで承認済みのパレット内にある最も近い色へ揃えられます。
色数の限られた機器への対応
LED、ディスプレイ、ターミナルなど、使用色に制約がある機器向けに最も近い対応RGB値を選べます。
よくある質問
対応している色の形式は何ですか?
元色とパレットの全項目には、16進数の#RGBまたは#RRGGBB形式をご使用ください。アルファチャンネルや接頭記号のない値は受け付けません。
最も近い色はどのように選ばれますか?
符号化されたRGB空間で、赤、緑、青の各チャンネル差を二乗した合計が最小になる色を選びます。
人間の知覚に基づく色照合ですか?
いいえ。 知覚モデルではなく、単純で正確かつ再現可能なインデックス出力を目的として、RGBのユークリッド距離を直接使用します。
パレットには何色まで入れられますか?
1色から256色までです。小さなブランドカラーのセットや端末の配色、インデックスカラー画像の色表、刺しゅう糸の選択などに対応できます。
同じ距離の色が2つあるとどうなりますか?
パレットで先に並んでいる色が選ばれます。順番がそのまま優先度になるため、毎回同じ結果になります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/quantize-to-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#42a5f5","palette":["#000000","#336699","#ffffff"]}'const res = await fetch("https://api.kit.forhosting.com/color/quantize-to-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#42a5f5",
"palette": [
"#000000",
"#336699",
"#ffffff"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/quantize-to-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#42a5f5",
"palette": [
"#000000",
"#336699",
"#ffffff"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/quantize-to-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#42a5f5","palette":["#000000","#336699","#ffffff"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#42a5f5","palette":["#000000","#336699","#ffffff"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/quantize-to-palette", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#42a5f5",
"palette": [
"#000000",
"#336699",
"#ffffff"
]
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.quantize_to_palette",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_items | 256 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
決定的な距離計算の仕組みをご確認ください
返されるdistance_squaredは、この計算で得た整数そのものです。環境への依存がなく高速で、ブラウザーとAPIのどちらでも同一の答えになります。出力には正規化した元色と0始まりのpalette_indexも含まれるため、インデックスを書き込みながら、選択された16進数値をログ、プレビュー、後続検証にも残せます。
インデックス処理で結果を安全にお使いください
1色だけを照合する場合は、出力先が選択済みの16進数値を求める箇所でquantized_colorをお使いください。インデックス形式で保存する場合は、リクエストに渡したそのままのパレットに対する安定した位置としてpalette_indexを使用します。distance_squaredは品質管理に利用できます。ネットワーク、乱数、日時、隠れた状態、適応型モデルは使わないため、同じ入力は同じJSONになります。APIによる自動処理は1回$0.002で、ブラウザー版も同じ同型ソルバーを使い、対話的な確認と本番連携の食い違いを防ぎます。
技術的な質問
2色が同じ距離の場合はどうなりますか。
パレット内で先に現れる項目を選ぶため、結果は常に決定的です。
パレットのインデックスは0から始まりますか。
はい。最初の項目が0、次が1となり、以後も同様に続きます。
APIリクエストの料金はいくらですか。
APIリクエストは1回$0.002です。ブラウザー版では、同じ決定的なロジックを端末内で実行します。