デザイン素材を外部に送らずに使える色を見つける

この抽出ツールはブラウザ内で縮小したキャンバスをサンプリングし、元のファイルはデバイス上に保持します。アクセシブルなUI作業では、パレットだけに頼らず、最終的なテキストと背景の各ペアを個別に検証してください。

画像からカラーパレットを抽出する手順

画像カラー抽出は、ローカル画像から実用的なパレットを作ります。画像をドロップ、貼り付け、またはファイル選択し、4〜12 色を指定して、HEX 値をそのまま CSS にコピーできます。

画像はこのタブ内の縮小キャンバスでサンプリングされるため、アップロードはありません。結果は主要色の近似で、すべてのピクセルを正確に読み取るスポイトではありません。

画像を追加します。ドロップゾーンにドロップ、ページにフォーカスした状態で貼り付け、またはローカルファイルを選択します（PNG・JPEG・WebP・GIF・AVIF・BMP、最大 40 MB）。
残す色数を選びます（4・5・6・8・10・12、既定は 6）。
「色を抽出」を押します。アルファ値 90 未満のピクセルは無視されるため、パレットは不透明な領域だけから作られます。
スウォッチをクリックすると HEX コードをコピーできます。rgb() 値とサンプリングしたピクセルに占める割合も表示されます。「合成サンプルを読み込む」では内蔵の 960 × 560 のテスト画像を試せます。
「クリア」で画像と結果をリセットします。パレットの前景色と背景色の組み合わせは、アクセシビリティ監査で確認してください。

パレットの計算方法と割合の意味

画像は長辺が 420 ピクセルになるよう縮小したキャンバスに描画し、最大約 140,000 ピクセルのグリッドで読み取ります。色はチャンネルごと 4 ビットのグループに分け、ピクセル数で並べ替え、距離が 28 未満の色を統合してから最終的な 4〜12 色を選びます。

各スウォッチはグループの平均色なので、結果は主要な領域を要約したものです。細かいグラデーション、ディザリング、1 ピクセル幅の線、アンチエイリアスの境界は縮小で消えることがあります。値は測定値ではなく出発点として扱ってください。

スウォッチの下の割合は、サンプリングした不透明ピクセルのうちそのグループに入った割合で、合計はおよそ 100% になります。選んだ色数は上限です。単色の画像では 1 色だけが 100% で表示され、色数が少ない画像ではスウォッチも少なくなります。

完全に透明な画像では 0 色と表示され、スウォッチは出ません。スウォッチは実際のボタンなのでキーボードでも操作でき、コピーの結果はステータス行に表示されます。ブラウザーがクリップボードを拒否した場合もその旨を表示します。

解析はすべてタブ内で完結します。ブラウザーがファイルをデコードし、ピクセル API でキャンバスを読み取り、画像データはどこにも送信されないため、オフラインでも動作します。デスクトップ版 Chrome のテストでは、4000 × 3000 の写真を約 0.2 秒で解析しました。

40 MB の上限は、デコードがブラウザー内で行われるためです。アクセシビリティ用途では、パレットを WCAG の保証と見なさず、最終的なテキストと背景の組み合わせをコントラストチェッカーで確認してください。