ForHosting KIT · 画像の編集・解析

画像内の特定の色を置き換える

Q: 画像ファイルを受け付けますか？

いいえ。 画像のピクセル色を #RRGGBB の十六進色のリストとして受け取り、色替え済みのリストを返します。画像のデコードと再構成はお客様の側で行います。

ピクセル一覧の赤を緑に置き換えます。許容誤差を32にすると、純粋な赤と赤に近い2色が変わり、5ピクセル中3ピクセルが置き換わります。チャンネルごとに比べるので、輪郭の陰影も拾えます。ブラウザで無料で使えます。

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

無料で実行 API仕様を見る

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

計算例

入力した場合

ピクセル: #FF0000, #FF2020, #00FF00, #0000FF, #FE0101
対象: #FF0000
許容誤差: 32
置換文字列: #00FF00

結果

ピクセル: #00FF00, #00FF00, #00FF00, #0000FF, #00FF00
置換数: 3
合計数: 5

ピクセルは、赤・緑・青の各チャンネルの差が設定した許容誤差以内であれば一致とみなされます。ゼロなら完全一致のみを置き換え、値を大きくすれば陰影やエッジのアンチエイリアシングまで捉えられます。画像のデコードも AI も使わない、チャンネル距離という明快なルールによる、どこでも再現できる決定論的な「魔法の杖」による色替えです。

許容誤差つきで色を置き換えるとはどういうことか

実際の画像に単一のフラットな色だけが含まれることはほとんどありません。赤いロゴの周囲にはアンチエイリアシングのピンクがかったピクセルの輪があり、赤い車の写真には光の具合で何十もの赤が混ざっています。完全一致する十六進値だけを置き換えたのでは、仕上がりはまだらで素人くさくなってしまいます。

許容誤差は、対象の周囲に近傍を定義することでこれを解決します。このツールは各ピクセルについて、赤・緑・青チャンネル間の絶対差の最大値を測り、その距離が許容誤差以下ならピクセルを置き換えます。許容誤差 0 は厳密な一致で、アイコンやスプライト、フラットな UI グラフィックに適しています。

16 から 48 程度がグラデーションや写真での一般的な範囲です。ルールが単純な数値比較なので、同じ入力からは常に同じ出力が得られます。色替えがビルドパイプラインやバリアント生成に組み込まれる場合に、まさに必要とされる性質です。

対象色・許容誤差・置換色の選び方

まず消したい色をサンプリングします。対象色には標準的な #RRGGBB の十六進値を指定できます。正確な値が分からない場合は、支配色やパレットを調べるツールで画像の実際の構成色が分かります。

次に許容誤差をゼロから上げていきます。0 で実行して置き換わったピクセル数を確認し、対象物の周囲の輪を、隣接する要素に侵食しない範囲で覆えるまで値を増やします。置換色も十六進の色で、一致した各ピクセルにそのまま書き込まれます。

ブレンドは行われないため、置き換えはくっきりとしたものになります。知っておくとよい保護機構がひとつあります。許容誤差は 0 か 255 までの正の整数でなければなりません。

負の半径には意味がなく、たいてい呼び出し側コードのバグを示すものだからです。後から微妙に間違った画像をデバッグするより、すぐに気づける方がはるかに助かるはずです。

実際のワークフローでの位置づけ

入力と出力はエンコード済みの画像ファイルではなくピクセル色のリストです。そのため、この機能は本格的な写真エディタではなく、構成部品として使われます。典型的な利用者は、favicon・グラフの系列・ゲームのスプライト・QR 風マーカーといった小さなアセットのピクセルを取り出し、ここで色を替え、自分の側で画像を再構成します。

マーケティングチームは、ひとつのマスターレンダーから製品のカラーバリエーションを作るために使います。グラフパイプラインは、系列の色を再レンダリングなしで変えるために使います。アクセシビリティツールは、問題のある色を準拠した色に写像するために使います。

ファイルのアップロードや保存は一切なく、計算は完全に決定論的で、1 回の呼び出しあたり 262144 ピクセルの上限はスプライトやアイコンを十分にカバーします。

活用例

製品バリエーションの色替え

製品レンダーの主色を入れ替え、ひとつのマスターアセットからすべてのカラーバリエーションを生成します。許容誤差がエッジの陰影までカバーします。

グラフやスプライトのテーマ変更

エディタを開かずに、小さなグラフィックの全ピクセルで旧パレットの色を新しいブランドカラーへ置き換えます。

アクセシビリティのための色修正

公開前に、アイコンや UI グラフィックで基準を満たさないブランドカラーを、準拠した同等色へ置き換えます。

よくある質問

一致はどのように判定されますか？

対象色に対する各チャンネル（赤・緑・青）の差の最大値が許容誤差以下であれば一致です。許容誤差 0 の場合は完全一致のみが置き換えられます。

許容誤差が負の場合はどうなりますか？

負の許容誤差には意味がなく、たいてい呼び出し側コードのバグを示します。

画像ファイルを受け付けますか？

いいえ。画像のピクセル色を #RRGGBB の十六進色のリストとして受け取り、色替え済みのリストを返します。画像のデコードと再構成はお客様の側で行います。

サイズの上限はありますか？

1 回の呼び出しにつき 262144 ピクセルまでです。アイコン・スプライト・小さなアセットを十分にカバーします。

許容誤差はどれくらいに設定すればよいですか？

アイコンやスプライト、平坦な図には0、グラデーションや写真には16から48くらいが目安です。0から始めて置き換わったピクセル数を確かめ、周りのにじみが消えて隣の色にはみ出さないところまで上げてください。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/image/color-replace

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

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

curl -X POST https://api.kit.forhosting.com/image/color-replace \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"pixels":["#FF0000","#FF2020","#00FF00","#0000FF"],"target":"#FF0000","replacement":"#00FF00"}'

const res = await fetch("https://api.kit.forhosting.com/image/color-replace", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "pixels": [
      "#FF0000",
      "#FF2020",
      "#00FF00",
      "#0000FF"
    ],
    "target": "#FF0000",
    "replacement": "#00FF00"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/color-replace",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "pixels": [
        "#FF0000",
        "#FF2020",
        "#00FF00",
        "#0000FF"
    ],
    "target": "#FF0000",
    "replacement": "#00FF00"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/color-replace", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"pixels":["#FF0000","#FF2020","#00FF00","#0000FF"],"target":"#FF0000","replacement":"#00FF00"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"pixels":["#FF0000","#FF2020","#00FF00","#0000FF"],"target":"#FF0000","replacement":"#00FF00"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/color-replace", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "pixels": [
    "#FF0000",
    "#FF2020",
    "#00FF00",
    "#0000FF"
  ],
  "target": "#FF0000",
  "replacement": "#00FF00"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.color_replace",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

max_pixels 262144

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

色置換 API は、画像のピクセル色・対象色・許容誤差・置換色を受け取り、一致したすべてのピクセルを置き換えたピクセルリストを返します。

許容誤差つきで色を置き換えるとはどういうことか

ブラウザで試し、その後まったく同じ呼び出しを API で自動化すれば同一の結果が得られるのです。

対象色・許容誤差・置換色の選び方

負の許容誤差は黙って丸められるのではなく、invalid_input エラーで拒否されます。

実際のワークフローでの位置づけ

処理全体は軽く、このページのブラウザ上で無料で実行でき、自動化する場合は API 経由で $0.002/リクエストです。

技術的な質問

料金はいくらですか。

API 経由で $0.002/リクエストです。また、このページのブラウザ上では無料で実行できます。

結果は決定論的ですか。

はい。ルールは乱数を伴わない単純なチャンネル距離の比較なので、ブラウザでも API でも同じ入力からは常に同じ出力が得られます。

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

画像内の特定の色を置き換える

無料で実行

計算例

許容誤差つきで色を置き換えるとはどういうことか

対象色・許容誤差・置換色の選び方

実際のワークフローでの位置づけ

活用例

製品バリエーションの色替え

グラフやスプライトのテーマ変更

アクセシビリティのための色修正

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

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

リクエスト例

レスポンス例

料金

制限

エラー

技術的な注記

許容誤差つきで色を置き換えるとはどういうことか

対象色・許容誤差・置換色の選び方

実際のワークフローでの位置づけ

技術的な質問

ありがとう