Most Used Colors

画像から、使用頻度順のパレットへ

画像をアップロード領域にドロップするか、ファイル選択で指定します。領域には対応形式（JPEG、PNG／APNG、TIFF、WebP、BMP、GIF、AVIF、HEIC、SVG）が表示されます。抽出する色数を1～16色の範囲で選ぶと、量子化した色を頻度順に並べ、それぞれの16進値と解析したピクセルに占める割合を表示します。黒・白・グレーを除外したり、必要に応じて透明度を考慮したりできます。

仕上げて書き出す

• 各色の16進値は専用のボタンでコピーできます。
• 該当するCSSの色名があればそれを使い、なければ独自の名前を付けられます。
• 不要な色見本は現在のパレットから削除できます。
• パレットに名前を付け、JSON、Adobe Swatch Exchange（ASE）、Adobe Color Swatch（ACO）、名前入りのSVG見本帳、またはカスタムプロパティを含むCSSファイルとしてダウンロードします。

流れは、画像を選ぶ、色数と除外条件を決める、色見本を確認して調整する、パレット名を入力して必要な形式をダウンロードする、の順です。

どんな人に向いているか

デザイナー、イラストレーター、フロントエンド開発者、コンテンツ制作者など、写真やスクリーンショット、アートワーク、ブランド素材から再利用できるパレットを作りたい人に向いています。色彩学や画像編集の専門知識は必要ありません。Adobe互換のデザインソフト用に色見本を用意したり、Webサイトの試作用にCSSのカスタムプロパティを作ったりする場面で役立ちます。

ローカル処理と制限事項

選んだ画像、デコードしたピクセル、パレットの計算、編集内容、書き出すファイルはすべてブラウザー内で処理されます。画像やパレットの内容をサーバーへアップロードすることはなく、フォントやスクリプトなどのリソースを第三者のサーバーから読み込むこともありません。ブラウザーのローカルストレージに保存されるのは、表示言語、テーマ、指定した色数、除外の設定、透明度の扱いだけです。画像や作成したパレットは永続的には保存されず、URLにも状態は含まれません。

長辺が1,000ピクセルを超える画像は、解析前に縮小されます。色は256色のRGB量子化空間にまとめられるため、結果は代表的な色であり、元の値をすべて列挙するものではありません。パレットは最大16色で、アルファ値が50%未満のピクセルは無視されます。TIFFは1ページ目のみ、アニメーション形式はブラウザーが描画した1フレームのみを解析します。形式によっては、デコードできるかどうかがブラウザーやOSによって異なります。JavaScriptとCanvas 2Dが使える最新のブラウザー、画像をデコードできるだけのメモリー、コピー時にはクリップボードへのアクセス許可が必要です。インターフェースは21言語に対応し、ライト、ダーク、システム連動の表示を選べます。

アップロード領域と主要な操作部はキーボードで操作でき、見えるラベルやツールチップが付いています。値はボタンでコピーでき、色名もキーボードで編集できます。ただし、画像のプレビューや色見本は元画像の内容を文章で完全には説明しません。また、インターフェースのアニメーションはまだ動きを減らす設定に対応していません。