画像カラーピッカー
任意の画像から主要な色を抽出し、HEX値とRGB値、および各色の占有率を表示します。処理はデバイス上で完了するため、画像がアップロードされることはありません。
またはここにドロップ
JPG、PNG、WebP、またはGIF。画像を貼り付けることもできます。
抽出された色
使い方
この画像カラーピッカーは、ブラウザ内でアップロードされた画像を完全に解析し、主要な色をHEX値とRGB値、および各色のおよその占有率とともに返します。これにより、あらゆる写真からブランドパレットやカラースキームをすばやく抽出できます。
- 画像を選択
クリックして参照するか、ファイルをドラッグ＆ドロップ、またはクリップボードから貼り付けてください。
- 色数の設定
3〜10色のスウォッチが、画像内の占有率の高い順に表示されます。
- 色のコピー
スウォッチをクリックするとHEX値がコピーされます。また、セット全体をCSS変数としてコピーすることもできます。
色の抽出方法
画像を小さなキャンバスに描画し、各ピクセルの赤、緑、青の値を16単位のバケットに丸めることで、近似色を同一の色として扱います。バケットはカバーするピクセル数に基づいてランク付けされ、すでに選択された色に近すぎる候補はスキップされるため、結果として類似色の重複ではなく、明確に異なる色の広がりが得られます。
ブラウザ上で完全に動作します。
画像はFileReader APIで読み込まれ、Canvas APIのgetImageDataメソッドで解析されます。画像データがサーバーに送信されることはないため、機密のブランド資産やプライベートな写真でも安全に使用できます。URLで読み込んだクロスオリジンの画像は、ブラウザがCORS許可のない画像からのピクセルデータ読み取りをブロックするため解析できません。その場合は、まず画像をダウンロードしてからローカルファイルをアップロードしてください。
よくある質問
画像から色を抽出してカラーパレットを作成するにはどうすればよいですか?
画像ファイルをドラッグ&ドロップまたはアップロードしてください。このツールはHTMLキャンバスを使用して画像のピクセルデータをサンプリングし、類似する色をグループ化して、主要な色をHEXコード、RGB値、おおよその占有率とともにスウォッチとして表示します。スウォッチをクリックするとHEX値がクリップボードにコピーされます。また、すべての色をCSSカスタムプロパティとして一括でコピーすることも可能です。
色を抽出する際に画像はサーバーにアップロードされますか?
いいえ。色の抽出は、Canvas APIのgetImageDataメソッドを使用してブラウザ内で完全に実行されます。画像は非表示のキャンバスに読み込まれ、ピクセルデータはローカルで読み取られ、クラスタリングされた色はJavaScriptで計算されます。画像データが外部サーバーに送信されることはないため、機密のブランド資産やプライベートな写真でも安全です。
カラー抽出ツールで使用できる画像形式は何ですか?
このツールは、ブラウザがデコードできる任意の画像形式に対応しており、一般的にはJPEG、PNG、WebP、GIF、BMPなどが含まれます。ファイルはFileReader APIで読み込まれてキャンバスにレンダリングされるため、制限はこのツール自体ではなくブラウザのネイティブ画像サポートに依存します。
色抽出の精度はどの程度ですか。すべての色合いを識別できますか。
抽出ツールは、すべての固有ピクセルではなく、最も多く含まれる色のクラスターを特定します。青空や肌色のような緩やかなグラデーションを含む画像は、中間の色合いすべてではなく、代表的なHEX値をいくつかにまとめることがあります。複雑な画像をより細かく分析するには、「抽出する色の数」スライダーを上げてください。
ブラウザベースの色抽出にはどのような制限がありますか。
ブラウザのキャンバスのセキュリティ制限により、クロスオリジン画像は分析できません。CORS（クロスオリジンリソース共有）ヘッダーのない別ドメイン上の画像にリンクすると、ピクセルデータの読み取り時にセキュリティエラーが発生します。リモートURLを指定するのではなく、まず画像をダウンロードし、ローカルファイルをアップロードしてください。