カラーパレット抽出

画像から主要な色を抽出してカラーコードを取得

画像をドラッグ&ドロップ

またはクリックして選択

※ すべての処理はブラウザ上で行われます。

使い方

  1. 1「抽出する色の数」のプルダウンから、取り出したい色数(4〜12色)を選びます。
  2. 2ドロップゾーンに画像をドラッグ&ドロップするか、クリックしてファイルを選ぶと、自動でカラーパレットが抽出されます。
  3. 3抽出された色のスウォッチ(色帯)と、各色のHEX・RGB・HSL値が一覧で表示されます。
  4. 4使いたい値のボタンをクリックすると「Copied!」と表示され、クリップボードにコピーされます。そのままCSSやデザインツールに貼り付けて利用できます。

よくある質問

抽出される色はどうやって選ばれていますか?
画像を縮小したうえで各ピクセルの色を集計し、出現回数の多い色を代表色として選びます。さらに似通った色はまとめて除外するため、画像全体を特徴づける主要な色がバランスよく並びます。
HEX・RGB・HSLはどう使い分ければよいですか?
HEX(#RRGGBB)はWeb制作やCSS、デザインツールで最も一般的です。RGBは画像編集ソフトでの指定に、HSLは色相を保ったまま明るさ・鮮やかさを調整したいときに便利です。同じ色を3形式で確認できます。
画像はサーバーにアップロードされますか?
いいえ。色の解析はすべてお使いのブラウザ内で行われ、画像が外部サーバーに送信・保存されることはありません。公開前のデザインや作品も安心して扱えます。
写真とイラスト、どちらでも使えますか?
どちらでも利用できます。色数の多い写真からはおおまかな配色傾向を、色がはっきりしたイラストやロゴからは使用色に近いパレットを取り出せます。抽出する色数を変えると結果の粒度を調整できます。

関連ツール