画像のサンプルから主要カラーパレットを抽出
赤と青の4つの色合いをサンプルにして2色を求めると、#F24538と#1E89E6の2色になり、それぞれ100ピクセル中50ピクセルを占めます。近い色はまとめるので、ほぼ同じ色が並ばない短いパレットになります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- N
- 2
- 要求数
- 2
- 返却数
- 2
- 総ピクセル数
- 100
画像を代表する画素の一覧から、扱いやすい簡潔なカラーパレットを作成します。この機能は近いRGB値をまとめ、重み付きの出現量でクラスターを順位付けし、各主要色を16進カラースウォッチとRGBチャンネルで示します。さらに、画素数と入力サンプルに占める割合も返します。すでに画素を抽出または集計しており、元画像のアップロードやデコードを行わずに、再現可能な要約が必要な処理に適しています。
画像を代表する画素サンプルをご用意ください
一つの隅だけではなく、画像全体から取得した画素をご用意ください。各レコードには、0から255までの赤、緑、青のチャンネル値を指定します。前処理で同一色をすでに数えている場合は、レコードにcountを追加してください。
数えていない場合はcountを省略し、各レコードを1画素として扱います。重み付きレコードは、広い単色領域を含む画像で特に有効です。同じRGBオブジェクトを何千回も繰り返さず、実際の頻度を保持できます。
サンプリング位置は画像内で均等に分散させることをお勧めします。単純な格子、一定の間隔、または縮小したプレビューから採取すると、ファイル順の先頭画素だけを使うより適切に画像を表現できます。透明画素は、閲覧者に見える背景へすでに合成している場合を除き、含めないでください。
見えないRGB値が可視パレットへ影響することを防げます。アルゴリズムはクラスタリング前に完全一致の重複を統合するため、同じレコードの反復とcount付きの同等レコードは同じ結果になります。
再現可能な色クラスタリングをご確認ください
必要な主要色の最大数をnで指定してください。nは1以上の整数である必要があり、サンプル内の異なるRGB値が少なければ、返される色数も少なくなります。中心は、頻度が高く互いに離れたサンプルから決定論的に初期化され、その後、RGB空間で回数制限付きの重み付きクラスタリングにより調整されます。
乱数シード、時計、ネットワークサービス、モデルは一切使用しないため、同一入力からは同一出力が得られます。近い色調は同じクラスターにまとまります。代表RGB値はクラスターの重み付き平均を有効な整数チャンネルへ丸めたもので、16進値も同じチャンネルから生成されます。
クラスターは画素数で並べ、同数の場合は16進値で安定して順序を決めます。RGB距離は意図的に簡潔で予測可能です。実用的な要約を目的としており、色精度が重要な印刷向けの知覚的色管理ではありません。
件数と割合を後続処理でご活用ください
応答のcolors配列は、表現された画素数が多い順に並びます。各項目にはhex、RGBオブジェクト、count、shareが含まれます。先頭のスウォッチは主要なアクセントの目安として使用できますが、画像の大半を表すと判断する前にshareをご確認ください。
約半分を占める先頭色は、5色が均等なパレットの先頭色より強い視覚的特徴です。自動処理では順位付き一覧全体を保存すると、サンプルを再処理せずにしきい値を変更できます。不正なチャンネル値やレコード、および1未満のnは明示的なエラーになります。
活用例
画面テーマを画像に合わせて生成します
順位付きパレットからアクセント、文字表現、仮背景を選び、shareを参照して少数色の過度な強調を避けられます。
商品画像へ色のタグを付けます
カタログのサンプル画素を、絞り込み、類似検索、商品分類、品質確認に使える安定した色特徴へ変換します。
大量の制作素材を簡潔に要約します
キャンペーン画像の比較、視覚的なずれの検出、ムードボード候補の収集では、全画素ではなく小さなパレットを保存できます。
よくある質問
応答の色数がnより少ないのはなぜですか?
指定値は上限です。 入力に含まれる異なるRGB値が少ない場合は、利用できるクラスターのみを返します。
同一の画素を繰り返す必要がありますか?
必要ありません。 RGBレコードのcountに頻度を指定するか、同じレコードを繰り返してください。完全一致は同じ重みで統合されます。
透明画素に対応していますか?
入力はRGBサンプルだけです。見えない画素を除外するか、予定する背景へ透明部分を合成してから一覧を作成してください。
画像のピクセルはどのように抜き出せばよいですか?
画像全体から偏りなく抜き出してください。単純な格子状、一定の間隔、縮小したプレビューなどが向いています。ファイルの先頭のピクセルや一つの隅だけを使うと、画像を代表しないパレットになることがあります。
似た色合いが1色にまとめられるのはなぜですか?
近い色合いはあえてまとめています。圧縮の跡やなめらかな輪郭、グラデーション、わずかな光の変化が、ほぼ同じ色の別々の項目に分かれず、代表となる1色に加わるためです。各色はそのまとまりの重み付き平均です。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/image/dominant-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"pixels":[{"r":244,"g":67,"b":54,"count":40},{"r":235,"g":76,"b":63,"count":10},{"r":33,"g":150,"b":243,"count":30},{"r":25,"g":118,"b":210,"count":20}]}'const res = await fetch("https://api.kit.forhosting.com/image/dominant-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"pixels": [
{
"r": 244,
"g": 67,
"b": 54,
"count": 40
},
{
"r": 235,
"g": 76,
"b": 63,
"count": 10
},
{
"r": 33,
"g": 150,
"b": 243,
"count": 30
},
{
"r": 25,
"g": 118,
"b": 210,
"count": 20
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/dominant-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"pixels": [
{
"r": 244,
"g": 67,
"b": 54,
"count": 40
},
{
"r": 235,
"g": 76,
"b": 63,
"count": 10
},
{
"r": 33,
"g": 150,
"b": 243,
"count": 30
},
{
"r": 25,
"g": 118,
"b": 210,
"count": 20
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/dominant-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"pixels":[{"r":244,"g":67,"b":54,"count":40},{"r":235,"g":76,"b":63,"count":10},{"r":33,"g":150,"b":243,"count":30},{"r":25,"g":118,"b":210,"count":20}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"pixels":[{"r":244,"g":67,"b":54,"count":40},{"r":235,"g":76,"b":63,"count":10},{"r":33,"g":150,"b":243,"count":30},{"r":25,"g":118,"b":210,"count":20}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/dominant-palette", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"pixels": [
{
"r": 244,
"g": 67,
"b": 54,
"count": 40
},
{
"r": 235,
"g": 76,
"b": 63,
"count": 10
},
{
"r": 33,
"g": 150,
"b": 243,
"count": 30
},
{
"r": 25,
"g": 118,
"b": 210,
"count": 20
}
]
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.dominant_palette",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_mb | 15 |
max_megapixels | 12 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
再現可能な色クラスタリングをご確認ください
そのため、圧縮ノイズ、アンチエイリアス、グラデーション、わずかな照明変化を、ほぼ同じ項目へ分裂させず、代表的なスウォッチへ反映できます。
件数と割合を後続処理でご活用ください
shareはクラスターの件数を重み付き総画素数で割った値で、安定したJSONにするため小数点以下6桁へ丸めます。応答には、要求したパレット数、実際に返した数、total_pixelsも含まれます。これにより、利用側は網羅性を確認し、小規模なサンプルと十分に抽出された画像を区別できます。ブラウザーとAPIは同じ純粋なソルバーを使用し、API呼び出しは1回$0.002です。
技術的な質問
APIリクエストの料金はいくらですか?
APIリクエストは1回$0.002です。同じ決定論的なソルバーをブラウザーでも実行できます。
nが1未満の場合はどうなりますか?
パレットで要求できるクラスターは最低1個のため、invalid_inputエラーでリクエストが失敗します。