画像の色を置き換える
読み込みから保存まで非公開
デコード、ピクセル採取、色の比較、置換、プレビュー、PNG生成はすべて現在のブラウザータブでCanvasを使って行います。画像はToon Toneへ送られず、ログインも不要です。タブを更新すると作業中の画像は消去されます。
画像の色を置き換える
画像の色を置き換えるオンラインツール
写真をサーバーへ送らず、ひとつの色系統を変更できます。ロゴ、イラスト、アイコン、スクリーンショット、単色背景から元のピクセルを選び、新しいHEXカラーを指定し、選択マスクを確認してPNGを保存します。アカウントも透かしもなく、結果が再現できる無料のローカル処理です。
最新ブラウザーで動作確認 · 2026年8月1日
画像の色を置き換える
画像内のひとつの色を変更する方法
ラスター画像を読み込み、変更したい元の色をクリックし、置換後の色を入力します。選択マスクを見ながら、必要な陰影がすべて白くなるまで許容範囲を少しずつ上げてください。ハイライトや影を残す場合は明るさ保持を有効にし、色を削除する場合は透明化を選びます。結果を確認してPNGを保存しても、端末上の元ファイルは変更されません。
画像の色を置き換える
この画像色置換ツールを使う理由
どのピクセルを選び、どのように変えるかを画面上で確認できます。曖昧なAI指示ではなく、短い編集を自分で検証できます。
画像の色を置き換える
ハイライトと影を維持
明るさ保持は新しい色相と彩度を適用しながら、元画像にある明暗差を残します。単色の塗りはきれいに変わり、イラストのしわ、光沢、立体感、柔らかな影は読み取れる状態を保ちます。
画像の色を置き換える
選択ピクセルをマスクで確認
選択範囲は白、それ以外は黒で表示できます。書き出す前に、アンチエイリアスの取りこぼし、広すぎる許容範囲、同じ色を持つ背景や別の物体まで選ばれていないかを見つけられます。
画像の色を置き換える
画像内の色を置き換える
画像を読み込み、元の色をクリックして範囲を調整し、PNGで保存します。処理はこのブラウザータブ内だけで行われます。
画像の色を置き換える
PNG、JPG、WebP、GIF、AVIF、BMP · 12MBまで · ドロップまたは貼り付け
画像の色を置き換える
元画像 · Toon Toneサンプル
0 × 0元画像をクリック。矢印キーは1ピクセル、Shift併用は10ピクセル移動します。
画像の色を置き換える
色置換コントロール
画像の色を置き換える
一致したピクセル0 px0.0%
画像の色を置き換える
編集画像 · ライブ結果
画像の色を置き換える
画像の色を置き換える
失敗を減らす4段階の色変更手順
最初は狭い範囲で試し、画像に必要な分だけ広げます。同じ色を共有する別の物体が予期せず変わるのを防げます。
画像の色を置き換える
1. 適切なラスター画像を開く
12MB以下のPNG、JPEG、WebP、GIF、AVIF、BMPを選択します。アニメーションは最初に描画された静止フレームが対象です。大きな画像はスライダーの応答性を保つため長辺2400ピクセルへ縮小され、表示寸法が実際の保存サイズになります。
画像の色を置き換える
2. 代表的な元の色を採取する
極端に明るい反射や暗い輪郭ではなく、物体の中央にある代表的な中間色をクリックします。細かく位置を合わせるには元画像のキャンバスへフォーカスし、矢印キーを使います。Shiftと矢印を同時に押すと10ピクセル移動します。
画像の色を置き換える
3. 許容範囲と境界を調整する
低い許容範囲から始め、選択マスクへ切り替え、目的の色系統が白く埋まるまで値を上げます。境界の滑らかさは選択の外側へ段階的な混合を作り、アンチエイリアス部分に硬い縁や色の輪が出るのを抑えます。
画像の色を置き換える
4. 新しい色か透明化を選ぶ
3桁または6桁の有効なHEXカラーを入力し、明るさを保持するか決めます。背景を削除するときは透明化を有効にします。結果表示へ戻って細部を確認し、編集したピクセルをPNGとして保存します。
画像の色を置き換える
素材に合う色変更方法を選ぶ
ピクセル距離による置換はグラフィック素材に強い一方、物体の意味は認識しません。元画像の特徴に設定を合わせてください。
| 画像作業 | 推奨設定 | 期待できる結果 | 注意点 |
|---|---|---|---|
| 画像の色を置き換える平面的なロゴやアイコン | 低い許容範囲と滑らかさ | 輪郭の明確な塗り替え | 同じブランド色 |
| 画像の色を置き換えるイラストの服や小物 | 明るさを保持 | 陰影を残した新しい色相 | 色付きの輪郭 |
| 画像の色を置き換える単純な背景 | 透明化とマスク表示 | 透明なPNG領域 | 前景の似た色 |
| 画像の色を置き換える写真内の物体 | 狭い範囲で慎重に確認 | 部分的な色調変更 | 質感と反射色 |
画像の色を置き換える
許容範囲が実際に選択するもの
表示される各ピクセルには赤、緑、青、アルファの値があります。このエディターは採取した元の色からRGB空間上の直線距離を計算します。許容範囲がゼロなら完全一致だけを選び、値を上げるほど最大距離が広がって、圧縮ノイズ、アンチエイリアス、隣接する陰影も選択へ加わります。一致ピクセル数は画像の何割が変わるかを示し、マスクはその場所を目で確認させます。
許容範囲は画像全体へ適用され、物体の意味や境界を理解しません。黄色い服と黄色い看板のRGB値が近ければ、片方だけを望んでも両方が一致します。範囲を狭め、より特徴的な中間色を採取するか、同じ色が別領域へ繰り返される場合はレイヤーと領域マスクを備えた編集ソフトで複数回に分けてください。この正直な制限は、数式が写真の主題を理解すると見せかけるより検証しやすいものです。
画像の色を置き換える
保存前の品質チェック
マスクと結果を通常表示と拡大表示の両方で確認します。次の6項目で多くの失敗を防げます。
- 画像の色を置き換える採取したHEXが、極端な反射、輪郭、透明境界ではなく、物体を代表する中間色から得られたか確認する。
- 画像の色を置き換える低い許容範囲から始め、目的領域全体がマスクへ現れた時点で値を上げるのを止める。
- 画像の色を置き換える同じ元色を持つ無関係な物体、繰り返されたブランド色、無彩色の背景が選ばれていないか探す。
- 画像の色を置き換える明るさ保持のオンとオフを比較し、細部を残しながら目標色から離れすぎない結果を選ぶ。
- 画像の色を置き換える滑らかな端に色の輪、半透明の筋、孤立したピクセルがないか拡大し、必要なら範囲を狭める。
- 画像の色を置き換えるPNGを保存して対照的な背景で開き直し、変更していない元画像を基準として保管する。
画像の色を置き換える
技術的根拠と測定できる上限
ブラウザーで文書化されたピクセル機能を使い、再現できるよう実装上の数値を公開しています。
- 画像の色を置き換えるCanvas ImageDataは各ピクセルを赤・緑・青・アルファの4つの1バイト値として提供し、このツールは各チャンネルを0〜255で扱います。
- 画像の色を置き換える対応ラスター画像は12MBまで読み込め、操作速度を保つため作業キャンバスの長辺は2400ピクセルを上限とします。
- 画像の色を置き換える許容範囲は0〜100、境界の滑らかさは0〜30で、PNG保存は透明化による完全または部分アルファを維持します。
画像の色を置き換える
MDNはピクセルの容器を次のように定義しています。
The ImageData object represents the underlying pixel data of an area of a canvas object.
画像の色を置き換える
次のカラーワークフロー
画像の色を置き換える
画像の色を置き換える よくある質問
画像の色を置き換える
画像はインターネットへアップロードされますか？
いいえ。選択したファイルは現在のブラウザータブでCanvasを使ってデコード、処理されます。このツールに画像送信、アカウント、クラウド履歴の手順はありません。ブラウザーが端末内でPNGを作ります。機密性の高いファイルでは作業後にタブを閉じるか更新し、ページ内容を読む権限を持つ無関係な拡張機能にも注意してください。
画像の色を置き換える
編集できる画像形式は何ですか？
ブラウザーが対応していれば、12MB以下のPNG、JPEG、WebP、GIF、AVIF、BMPを選択できます。アニメーションGIFやWebPは静止フレームとしてCanvasへ描画され、動きは保持されません。SVGはベクターマークアップなので対象外です。SVGのfillやstrokeはベクターエディターで直接編集してください。
画像の色を置き換える
別の物体まで色が変わるのはなぜですか？
一致判定は画像全体のピクセル値を比較し、ピクセルがどの物体に属するかを理解しません。離れた領域でもRGB値が近ければ同じ許容範囲へ入ります。範囲を下げ、特徴的な元色を選ぶか、ひとつの領域だけに限定する必要がある場合はレイヤーと手動マスクを備えた編集ソフトを使います。
画像の色を置き換える
色変更後も影を残すには？
明るさ保持を有効にし、代表的な中間色を採取してください。目標の色相と彩度を適用しつつ、一致ピクセルごとの相対的な明るさを維持します。無彩色、強い反射、圧縮写真では低い許容範囲が必要な場合があります。切り替えて同じ場所をライブ結果で比較してから保存します。
画像の色を置き換える
背景を透明にできますか？
背景が前景と十分に異なる色なら可能です。背景色を採取して透明化を有効にし、マスクを確認しながら境界を滑らかにします。背景のばらつきを含むまでだけ許容範囲を上げます。前景にも同じ色がある場合、全体へ適用する色範囲では分離できないため、領域を指定できる手動マスクが安全です。
画像の色を置き換える
保存色は入力したHEXと完全に同じですか？
明るさ保持がオフなら、完全一致した不透明ピクセルは目標RGB値になります。オンの場合は目標の色相と彩度を使いながら陰影のため明度が変化し、個々のHEXは異なります。境界の部分一致は滑らかさに応じて混合されます。表示中の結果とダウンロードPNGは同じ編集済みImageDataを使います。