画像にカラーパレットを適用(減色・配色変換)

カラーパレット適用(減色)ツールについて

画像の色を、あらかじめ決めたカラーパレットの色だけに置き換える無料のブラウザツールです。写真やイラスト、3Dレンダリング画像などを読み込み、パレットを指定して変換すると、画像内のすべての画素がパレット内のいずれかの色に割り当てられます。「この配色で全体を統一したい」「作品のキービジュアルの色味をほかの素材にも揃えたい」「写真を限られた色数のドット絵風に落とし込みたい」といった、イラスト・デザイン制作でよくある作業をツール内で完結できます。

パレットは、当サイトのカラーパレット作成で作ったもの(画像からの抽出・ランダム生成)を「📤 他のツールで使う」で送っておけば、ボタンひとつで読み込めます。もちろんHEXコードを直接貼り付けたり、色をひとつずつ追加・修正したりすることもできるため、配色表やブランドカラーの指定があるときにも使えます。

変換方法は2種類あります。「近い色に置き換える」は、各画素をパレット内でいちばん近い色に置き換える減色処理です。色の近さは、人間の見た目に近い Oklab 色空間での距離を基準にするため、単純なRGB距離よりも自然な割り当てになります。「明るさで割り当てる」は、画素の明るさ(輝度)だけを見て、暗い部分から明るい部分へパレットの色を順に割り当てるグラデーションマップです。元の色相は無視されるため、モノクロ画像の着色や、写真を特定の配色のデュオトーン・トライトーン風にする加工に向いています。

どちらの方法でも、ディザ(誤差拡散・Bayerパターン)を選ぶと、少ない色数でも中間の階調を点の密度で表現でき、レトロゲーム風・印刷物風の質感になります。さらに縮小を指定すると画像を1/2〜1/16に縮めてから変換するため、ドットがはっきり見えるピクセルアート風の仕上がりになります(保存時に元の大きさへくっきり拡大することもできます)。変換後は、スライダーで元画像と重ねて比較できるほか、パレットの各色が画像の何%を占めているかも表示されるため、配色の面積バランスの確認にも役立ちます。透過PNGの透明部分はそのまま保持されます。

画像の読み込み・変換・書き出しはすべてお使いのブラウザ内で処理されます。画像がサーバーにアップロードされることは一切ありません。

使い方

1. 「1. 画像」の枠に画像をドラッグ&ドロップするか、クリックしてファイルを選択します。コピーした画像を Ctrl+V(Macは⌘+V)で貼り付けることもできます。
2. 「2. パレット」で色を用意します。カラーパレット作成で「📤 他のツールで使う」を押してあれば「📥 カラーパレット作成から読み込む」で取り込めます。HEX一覧の欄に「#RRGGBB」形式のコードを貼り付けるか、「+ 色を追加」で1色ずつ追加することもできます。スウォッチをクリックすると色を修正できます。
3. 「3. 変換の設定」で変換方法・ディザ・縮小などを選びます。画像とパレットがそろっていれば、設定を変えるたびに自動で再変換されます。
4. 結果の下のスライダーで元画像と比較し、「PNGで保存」または「画像をコピー」で書き出します。

よくある質問

画像はアップロードされますか?

いいえ。読み込んだ画像の変換はすべてブラウザ内(お使いの端末内)で行われ、当サイトを含むどこにも送信・保存されません。ページを閉じると結果も消えるため、必要な画像は保存してください。

「カラーパレット作成から読み込む」が押せません

まだパレットが送られていない状態です。カラーパレット作成でパレットを作り、「📤 他のツールで使う」を押してからこのページに戻ってください(別タブで開いていても自動で反映されます)。パレットはブラウザ内(localStorage)に保存されるため、別の端末やブラウザ、プライベートモードには引き継がれません。

「近い色に置き換える」と「明るさで割り当てる」はどう使い分けますか?

元の色合いをなるべく保ちつつ色数を減らしたい(減色・配色統一)なら「近い色に置き換える」、元の色を捨てて明暗だけでパレットの色を塗り分けたい(グラデーションマップ・デュオトーン・モノクロ画像の着色)なら「明るさで割り当てる」を選びます。後者はパレットを暗→明の順に並べた状態で割り当てるため、パレットの色数が多いほど階調が細かくなります。

ディザを入れると何が変わりますか?

ディザなしでは各画素が単純に一番近い色へ置き換わるため、グラデーション部分が段々(バンディング)になります。ディザを入れると、2色を細かく混ぜて点の密度で中間色を表現するため、少ない色数でもなめらかな階調に見えます。「誤差拡散」は写真向きの自然な仕上がり、「パターン(Bayer)」は規則的な網点になりレトロゲーム風の質感です。強さを下げると、ベタ塗りとディザの中間の表現になります。

ドット絵風にするには?

「縮小」で 1/4〜1/8 程度を選び、色数の少ないパレット(8〜16色程度)を使うと、ドットのはっきりした仕上がりになります。「保存時は元の大きさに拡大する」をオンにすると、ドットをぼかさずに元の画像サイズへ拡大して保存します。オフにすると縮小後の小さいサイズのまま保存されるため、ゲーム素材として使う場合はこちらが便利です。

変換後の色が思っていた色と違います

「近い色に置き換える」では、パレットに元の色に近い色がないと、別の色相の色に割り当てられることがあります。パレットに中間色や明暗のバリエーションを足す、または「色の近さの基準」を切り替えて比較してみてください。「色の使用率」でほとんど使われていない色があれば、その色は画像内の色から遠い、ということです。

透過PNGの透明部分はどうなりますか?

透明度はそのまま保持されます。完全に透明な画素は変換されず、使用率の集計からも除外されます。半透明の画素は色のみ置き換わり、透明度は元のままです。

大きな画像で時間がかかります

変換は画素数に比例して時間がかかります。「処理する最大サイズ」を 1024px にすると、長辺が1024pxになるよう縮小してから変換するため高速になります(保存される画像もそのサイズになります)。誤差拡散ディザは他の設定よりやや時間がかかります。

対応している画像形式は?

PNG・JPEG・GIF(先頭フレーム)・WebPなど、お使いのブラウザが表示できる形式に対応しています。書き出しはPNG形式です。