画像からカラーパレット抽出
あらゆる画像から主要な色を抽出し、16進コードをコピーできます。スポイトで正確なピクセルの色を拾い、パレットとしてエクスポートも可能です。
ブラウザー内でローカルに処理されます。ファイルはアップロードされません。
このツールでできること
写真、スクリーンショット、ロゴ、イラストをドロップすると、主要な色と、それぞれが画像に占める割合が表示されます。画像は長辺が約100ピクセルになるよう縮小され、決定的なk-meansアルゴリズムでクラスタリングされるため、同じ画像からは常に同じパレットが得られます。透明なピクセルは無視されるので、背景が透明なロゴも正しく扱われます。
スウォッチをクリックすると、その16進コードがコピーされます。画像上の任意の場所をクリックすると、その位置のピクセルの正確な色を取得できます。Chromium系のブラウザーでは、ネイティブのスポイトを使って画面上のあらゆる色を拾うこともできます。拾った色は、抽出された色と一緒にエクスポートに追加されます。
CSS変数、Tailwind v3/v4のスニペット、JSON、PNGのスウォッチ帯としてエクスポートできます。画像はお使いのデバイス上でローカルに読み込まれ、アップロードされることはありません。
使い方
- 1画像（PNG、JPG、WebP、GIF、AVIF、SVG）を追加します。
- 2スライダーで、抽出する主要な色の数を選びます。
- 3スウォッチをクリックして、16進コードをコピーします。
- 4画像をクリックするか、スポイトを使って、特定の色を拾います。
- 5結果を必要な形式でエクスポートします。
対応形式
入力：PNG、JPG、WebP、GIF（最初のフレーム）、AVIF、SVG。出力：CSS、Tailwind、JSON、PNG。
プライバシー
このツールはブラウザー上で動作します。入力されたデータはお使いのデバイス上で処理され、当社のサーバーには送信されません。
制限事項
- 主要な色は似たピクセルの平均値のため、単一のピクセルと完全には一致しない場合があります。正確な値が必要な場合はスポイトを使ってください。
- 色の数を少なく指定すると、ごく小さなアクセントカラーはより大きな近い色に統合されることがあります。
- ネイティブのスポイトはFirefoxとSafariでは利用できません。画像をクリックする方法はどのブラウザーでも使えます。
- カラーマネジメントは適用されません。値はブラウザーがデコードしたままのもの（sRGB）です。
よくある質問
色はどのように選ばれますか？
ピクセルを似た色のグループに分け、k-meansクラスタリングで絞り込みます。結果は、各クラスターの平均色と、そのクラスターが占めるピクセルの割合です。
同じ画像から常に同じ色が得られるのはなぜですか？
アルゴリズムが固定のシードを使っているため、結果は再現できます。色の数を変えると、クラスタリングの結果も変わります。
透過PNGでも使えますか？
はい。完全または大部分が透明なピクセルは無視されるため、パレットに黒や白として現れることはありません。
画像はアップロードされますか？
いいえ。画像はブラウザー内で読み込まれ、分析されます。
関連ツール
カラーパレット生成ツール
基準色から配色パターンを生成し、気に入った色をロックして、WCAGコントラストを確認できます。CSS、Tailwind、JSON、PNGでエクスポートも可能です。
OGP画像ジェネレーター
タイトル、ロゴ、背景を組み合わせて1200x630のSNSシェア用画像を作成し、PNGでダウンロードできます。すべてブラウザー内で処理されます。
ファビコン生成ツール
1枚の画像から、favicon.ico、各サイズのPNG、Apple Touch Icon、Androidアイコン、Webマニフェスト、HTMLタグまでファビコン一式を作成できます。
スクリーンショットモックアップ作成
スクリーンショットをブラウザー、ノートPC、スマートフォン、タブレットのフレームに配置し、背景や影を設定してPNGで書き出せます。