画像の色を変えるということ

赤いジャケットを青くしたい。ブランドカラーが変わったのに、スクリーンショットが 40 枚とも古い色のままだ。商品には 6 色あるのに、写真は 1 枚しかない。

素直なやり方は、その色を選んで新しい色で塗りつぶすことですが、結果はいつも不自然になります。ジャケットはしわ 1 本ない平らな青い切り抜きになってしまうのです。それをジャケットらしく見せていたのは陰影、つまり少しずつ違う何百もの赤だったのに、塗りつぶしはそれを全部捨ててしまいます。

このツールは色を変えて、陰影を残します。 ジャケットのそれぞれの赤が、対応するそれぞれの青になります。ハイライトは明るいまま、しわは暗いまま。ジャケットを撮った写真のままです。

一覧は何を表しているか

PNG や JPG には、SVG のような色のリストが入っていません。写真なら 20 万種類の色が含まれていてもおかしくないのです。ですから絵の下の表は、その画像がおもに何色でできているかです。ほとんど同じ階調をひとまとめにし、画像のどれだけを占めているかで並べています。

ロゴ、アイコン、スクリーンショット、べた塗りの絵なら、その一覧はそのまま実際の色であり、1 つ変えれば正確に変わります。

写真の場合、各行は階調の一族を表します。1 つの赤ではなく「赤たち」です。だからこそ結果が使いものになりますし、だからこそ次の設定が効いてきます。

どこまで近い色をまとめるか

選んだ色に、その階調をどこまで含めるかを決めます。

狭すぎると、ジャケットの一部しか変わらず、古い色がまだらに残ります。
広すぎると、意図しないところまで染み出します。赤いジャケットが茶色いドアまで連れていってしまうのです。

真ん中から始めて、変化の境目が思ったところに来るまで動かしてください。一致の縁は切り落とすのではなくぼかしてあるので、色が変わる境目がギザギザになることはありません。

陰影を残す

既定でオンです。これが「色を変えた写真」と「ステッカー」の分かれ目になります。

オンのとき、各ピクセルは自分の明るさを保ち、色相と鮮やかさだけが新しい色へ移ります。オフにすると、一致したピクセルはすべて選んだ色そのものになります。べた塗りの絵、ロゴ、単色の背景など、そもそも残すべき陰影がない場合はこちらが正解です。

色を透明にする

各行には色の隣に消しゴムがあります。押すと、その色は置き換えではなく削除されます。ほかの色になるのではなく、その部分が透明になります。

ロゴやアイコンからべた塗りの背景を抜くのに、これがいちばん早い方法です。絵の中の背景をクリックし、消しゴムを押し、PNG で保存するだけです。境目のぼかしもそのまま効くので、かじり取ったような縁にはなりません。

透明を保存できるのは PNG と WebP だけです。JPG を選ぶとその旨が表示されます。JPG では消した部分を白としてしか保存できないからです。

絵をクリックする

一覧は出発点であって、限界ではありません。編集後の絵のどこかをクリックすれば、その場所の色を対象にします。その色が属する行を選び、どの行にも近くなければ新しい行を追加します。

たいていはこれがいちばん早い入口です。変えたいものをクリックして、何色にするかを決めるだけです。

アップロードはされません

画像はあなたのブラウザの中で読み込まれ、色を変えられ、保存されます。サーバーに届くことはありません。商品写真、仕事の素材、人物の写真では、ここが肝心です。

アップロード待ちも順番待ちもなく、ページさえ読み込めばオフラインでも動き続けます。

こんなときに使われています

商品の色を変えて、1 枚の写真で全色をまかなう
ブランドカラーが変わったあとのスクリーンショットを更新する
PNG でしか残っていないロゴやアイコンの色を変える
同じ絵の明るい版と暗い版を作る
何も切り抜かずに背景色を差し替える
選ぶそばから絵が変わるので、決める前に色を試す

知っておくとよいこと

2 つのプレビューは変更前と変更後を同じ大きさで並べたものなので、比較が正直です
保存形式の既定は PNG です。劣化せず、透明も保てます。ファイルサイズのほうが大事なときのために JPG と WebP もあります
透明なピクセルは透明のままです。JPG を JPG として保存すると 1 回再エンコードされるので、あとでまだ編集する予定なら PNG で保存してください
とても大きな画像は扱いやすいように縮小され、そのことを黙ってではなく画面でお知らせします
これは色を対象にした処理で、物体を対象にしたものではありません。別のものが同じ色なら両方変わります。写真でそれが困る場合は、先に背景を削除で被写体を切り抜いてください
SVG の場合は SVG の色を変えるをどうぞ。ピクセルではなく実際の色の値を書き換えます
色を変えるのではなく読み取りたい場合は画像から色を取得をどうぞ

使い方

クリックしてアップロードを押すか、PNG・JPG を枠にドロップします
その画像を構成している色が、下の表に並びます
絵の中の色をクリックしてその行へ飛ぶか、一覧から行を選びます
右側で新しい色を決めます。選んでも、16 進数を打ち込んでもかまいません
変化が狙いどおりの範囲を覆うまで、どこまで近い色をまとめるかを広げたり狭めたりします
写真なら陰影を残すはオンのまま、べた塗りの絵ならオフにします
あるいは行の消しゴムを押してその色ごと消し、PNG で保存します
画像をダウンロードを押します

画像の色を変える