カラーパレット抽出

画像から代表的な色を抽出してカラーパレットを作ります。写真やスクリーンショットを読み込ませると、その画像を構成している主要な色がHEXコードで並びます。画像はブラウザ内で処理されるだけで、どこにもアップロードされません。

使い方

1. 画像をドロップするか、クリックしてファイルを選びます。
2. スライダーで抽出する色数を3~10の範囲で決めます。
3. 抽出された色見本とHEXコードが表示されます。
4. 必要なHEX値をコピーして、デザインやCSSに使います。

こんなときに

• 写真の雰囲気に合わせたスライドやサイトの配色を決めたいとき。
• ロゴ画像しか手元になく、ブランドカラーのHEX値を割り出したいとき。
• 商品写真から背景色やアクセントカラーを決めたいとき。
• 気に入った画像の色づかいを、自分のデザインの出発点にしたいとき。

抽出の仕組みと注意点

処理は画像を縮小してから全画素を走査し、近い色をまとめて出現頻度の高い順に代表色を選ぶ方式です。縮小して数えるため大きな画像でも一瞬で終わりますが、画面のごく一部にしかない鮮やかな差し色は、面積が小さいと候補から漏れることがあります。その色が必要なときは抽出色数を増やしてください。逆に色数を増やしすぎると、ほとんど区別がつかない近い色が並びます。実用上は5~6色あたりが扱いやすく、そこから主色・補助色・アクセントを選び分けるのが定番の使い方です。

関連ツール

よくある質問

カラーパレット抽出を使うと写真はサーバーに送信されますか?

いいえ。カラーパレット抽出はブラウザの Canvas API でファイルを読み込み、すべてのピクセルを端末内で処理します。画像が外部に出ないため、ページを開いた後に通信を切っても動作します。

カラーパレット抽出を通すと画質は落ちますか?

設定によります。JPEG と WebP は非可逆圧縮のため、品質値を下げるほど容量は小さくなり劣化が目立ちます。PNG は可逆でピクセルがそのまま保たれます。まず品質 80 パーセント前後をお試しください。多くの写真は元の 3 分の 1 の容量でも見た目は変わりません。

ファイルサイズや枚数の制限はありますか?

アップロードしないため、サイト側の制限はありません。実際の上限は端末のメモリで、5000 万画素を超えるような大きなファイルは古いスマートフォンでは遅くなることがあります。