無料のカラーパレット抽出ツール

このページにJPG、PNG、WebP画像をドロップしてください。エディターが開き、画像の読み込みが終わるとすぐに6色のパレットが表示されます。「パレットサイズ」で色数を変更し、スウォッチをクリックするとそのコードをコピーできます。

画像をアップロードし、「カラー形式」を初期設定のHEXのままにしてください。各スウォッチには #3a7bd5 のような6桁のコードが表示されます。スウォッチをクリックするとそのコードをコピーでき、「CSS変数としてすべてコピー」を押すとすべてのコードを一度にコピーできます。

4色、6色、8色、12色から選べて、初期設定は6色です。シンプルなブランドパレットには4色が向いています。色数を増やすとスウォッチも増えますが、空のような広い領域では、似た色合いが複数のスウォッチを占めることがよくあります。

メディアンカット法を使っています。画像のコピーを長辺256pxに縮小し、ピクセルを赤、緑、青の値で等しいグループに分けます。各スウォッチは1グループの平均色なので、単一のピクセルには存在しない混合色になることがあります。6色または12色のときは、最も明るいグループが除外されます。

はい、できます。「CSS変数」ボックスには、選んだ形式の色が :root ブロック内に --color-1、--color-2 のような名前で並びます。「CSS変数としてすべてコピー」をクリックして、スタイルシートに貼り付けてください。コードはクリップボードにコピーされ、ファイルはダウンロードされません。

直接はできません。アップローダーが受け付けるのはJPG、PNG、WebPのみで、HEIC、GIF、AVIF、SVG、TIFFファイルは読み込めません。HEICやTIFFの写真は、まず無料の画像変換ツールでPNGに変換し、そのPNGをここにドロップするとパレットを取得できます。

はい、使えます。半分以上が透明なピクセルは除外されるため、ロゴの何もない背景が黒や白のスウォッチとして加わることはありません。画像のほとんどが透明な場合はスウォッチがまったく表示されないので、ロゴを単色の背景に置いたコピーをお試しください。

色が表示されない原因は2つあります。各スウォッチはピクセルを等分した1グループの平均色なので、小さなアクセントカラーは周りの色に溶け込みます。また、6色と12色のときは、最も明るいピクセルを含みやすい最後のグループが除外されるため、白い部分が表示されないことがあります。すべてのピクセルを反映したい場合は4色または8色を選んでください。

このツールでは選べません。画像全体からパレットを作成するため、1ピクセルを選ぶスポイトはありません。小さな部分の色を調べたいときは、先にその部分まで画像をトリミングしてください。残った範囲だけからパレットが作られます。

直接はできません。このツールが読み込むのは画像ファイルで、ウェブアドレスではありません。サイトのスクリーンショットを撮ってPNGで保存し、ここにドロップすると、そのページの主要な色をHEX、RGB、HSLコードで取得できます。

はい。無料で、登録は不要、1日の利用制限もありません。画像はブラウザー内で読み込まれ、当社のサーバーに送信されることはありません。記録するのはパレットのサイズや所要時間などの匿名の統計だけで、画像やその色は記録しません。