画像からカラーパレットを作る

● 端末上で動作。画像がアップロードされることはありません。

Loading…

ロゴ、写真、絵画、スクリーンショットなど、画像の中心となる色を取り出せます。パレットは画像のピクセルを見た目の近さでクラスタリングして求め、各色を画像に占める割合とともに一覧にし、CSS カスタムプロパティ、JSON、プレーンテキストで書き出せます。何も端末の外に出ません。

使い方

  1. 画像をドロップ、貼り付け、または選択します。
  2. 色の数を 5〜8 から選びます。色見本をクリックすると、HEX、RGB、HSL、OKLCH が表示されます。
  3. パレットを .css、.json、.txt でダウンロードします。

よくある質問

ファイルはアップロードされますか?
いいえ。すべての処理は、あなたのブラウザの中、あなたの端末上で行われます。ご自分で確かめられます。ブラウザのデベロッパーツール(DevTools)を開き、ツールの動作中に「ネットワーク」タブを見てください。アップロードは一切発生しません。ページタイトルの横にあるバッジには、このページが送信したバイト数がリアルタイムで表示されます。
色はどうやって選ばれますか?
縮小した画像を色のグループに分け(メディアンカット)、目で見た色の近さでグループを調整します(OKLab での k-means)。ほとんど同じ色合いはまとめられるので、はっきり違う色が、画像に占める割合の大きい順に並びます。同じ画像からは、いつも同じパレットが得られます。
指定した数より色が少ないのはなぜですか?
平面的なロゴのように、はっきり違う色が少ししかない画像では、ほぼ同じ色でリストを水増しせず、その色だけを表示します。透明な部分は無視されます。

関連ツール