写真の色をそのままパレットに。無料ツール「画像から配色抽出」を公開しました。

この写真の雰囲気でサイトの色を決めたいけれど、スポイトで拾った1色だけでは全体が組めない。配色に迷ったとき、手元の画像そのものが答えを持っていることは少なくありません。デザイン事務所AMIXは、画像を読み込むと主要な色をHEXコードのパレットとして取り出せる無料Webツール「画像から配色抽出」を公開しました。抽出する色数を選び、気に入った色をタップしてコピーしたり、CSSカスタムプロパティとして一括で書き出したりできます。アプリのインストールやアカウント登録は不要で、パソコンでもスマートフォンでも、ブラウザを開けばすぐに使い始められます。

どんなツールか

「画像から配色抽出」は、写真やイラストを1枚読み込むと、その画像に多く含まれている色を解析して代表的な色を並べてくれるツールです。出力されるのは #1A2B3C のような大文字のHEXコードで、そのままCSSやデザインツールに貼り付けられます。

グラフィックソフトのスポイトツールで1点ずつ拾っていく方法もありますが、あれは「その1ピクセルの色」を取るだけの操作です。写真の中で本当に面積を占めている色や、画面全体の印象を作っている中間色は、目で狙って拾うのが難しい。空をクリックしたつもりが雲の白を拾っていた、というのもよくある話です。本ツールは縮小した画像のピクセルを集計してから代表色を決めるため、「この画像を色で要約すると何色か」という答えが返ってきます。

画像の読み込みと解析は、すべてお使いのブラウザ内で完結します。選んだ画像は <canvas> に描き込んでピクセル情報を読み取る処理に使われるだけで、当方のサーバーへ送信・保存されることはありません。画像データが端末内にとどまる仕組みのため、公開前の撮影データや支給素材から配色を起こす場面にも向いています。対応形式はJPEG・PNG・WebPなど、ブラウザが画像として扱える形式です。

どうやって色を選び出しているか

パレット抽出の内側では、「減色」と呼ばれる処理が動いています。写真には数万種類の色が含まれているので、それを6色や8色にまで絞り込む必要があります。本ツールが使っているのはメディアンカット法という古典的な手法です。

考え方はシンプルです。まず画像の全ピクセルを、赤・緑・青の3軸で構成された立体の中に散らばった点として捉えます。その塊を1つの箱と見て、いちばん幅が広い軸を探し、点の数がちょうど半分になる位置で真っ二つに割ります。すると箱が2つになります。次はその2つのうち幅の広いほうを選んで、また半分に割る。これを指定した色数になるまで繰り返し、最後に各箱に入っている点の平均値をその箱の代表色とします。

「メディアン（中央値）」で分けるとは、単純に色の座標の真ん中で切るのではなく、並べたピクセル数を二分することです。この実装は、色の値の広がりが大きい箱を優先して分割します。色の面積や分布、縮小処理によって抽出結果は変わり、小さな領域の色が必ず選ばれるわけではありません。色数を変えながら結果を見比べてください。

処理の前には画像を長辺160ピクセルまで縮小しています。数千万ピクセルをそのまま計算すると端末によっては待たされてしまうため、色の構成比を保ったまま計算量を落とす前処理です。あわせて、不透明度が低いピクセル（アルファ値が255段階中125未満の部分）は集計から除いています。PNGの透過部分が灰色や黒として混ざるのを避けるためです。最終的に得られた色はRGBの加重和による明るさの目安の順に並べ替えて表示されるので、パレットは暗い色から明るい色へのグラデーション状に整列します。同じHEXになった重複色は取り除かれるため、単色に近い画像やベタ塗りのイラストでは、指定した数より少ない色数になることがあります。

主な機能・特徴

読み込みからコピーまでが1画面で完結します。

• 画像はドロップエリアをタップしてファイルを選ぶか、ドラッグ＆ドロップで読み込めます。読み込むと画像のプレビューが表示され、その下にパレットが並びます。
• 抽出数は「4色」「6色」「8色」「12色」の4段階（初期値は6色）。切り替えるとその場で再計算されるので、同じ画像で粒度を変えながら見比べられます。
• 各スウォッチには色見本とHEXコードが表示され、タップまたはクリックするだけでその1色がクリップボードにコピーされます。コピーすると数値の背景が一瞬緑に変わり、どれを取ったかがわかります。
• キーボード操作にも対応しています。スウォッチにフォーカスを移してEnterキーまたはスペースキーを押すと、同じようにコピーできます。
• 「HEXを一括コピー」ボタンを押すと、表示中の全色をカンマ区切りのひとつのテキストとしてコピーできます。メモやチャットへの共有、デザインツールへの一括入力に向いています。
• 「CSS変数を表示」ボタンを押すと、:root のブロックに --color-1 から順に並べたCSSカスタムプロパティが出力されます。そのままスタイルシートの先頭に貼れる形です。もう一度押すと「CSS変数を隠す」に切り替わって折りたためます。
• パレットは明るさ順に並ぶため、そのまま「濃い色＝文字色」「淡い色＝背景色」といった役割の当たりをつけられます。
• 画像を差し替えるときは、続けて次の画像を読み込むだけでパレットが入れ替わります。

使い方

手順は3つです。まず「画像をタップして選択（ドラッグ＆ドロップも可）」と書かれたエリアをタップしてファイルを選ぶか、パソコンなら画像ファイルをそのままエリアへドラッグ＆ドロップします。スマートフォンではカメラロールから選べます。

読み込まれると画像のプレビューが表示され、既定の6色でパレットが生成されます。次に「抽出数」を切り替えて粒度を調整します。4色にすると画像全体の大きな色の傾向だけが残り、12色にすると中間色や陰影の階調まで拾えます。まず4色で方向性を確認し、そこから8色や12色に増やして中間の色を探す、という順番が扱いやすいです。

最後に色を取り出します。1色だけ欲しいときはスウォッチを直接タップ。全色まとめて記録に残したいときは「HEXを一括コピー」。CSSに組み込むなら「CSS変数を表示」を押して出力されたブロックの右上「コピー」を使います。取り出したHEXコードは、CSSのほか、デザインツールのカラーピッカーや資料作成ソフトの色指定欄など、HEX入力に対応した場所ならどこへでも貼り付けられます。

抽出した色をそのまま使わない

このツールの結果は完成した配色ではなく、材料です。ここを踏まえておくと使い勝手がぐっと上がります。

写真から取れた色は、その写真の光の状態を含んでいます。夕方に撮った写真なら全体がオレンジに寄り、曇りの日なら彩度が低く沈みます。それをそのままWebサイトの背景色や文字色に据えると、画面全体が濁って見えることがあります。とくに写真から抽出した中間色は、彩度が中途半端で「なんとなく汚い色」になりがちです。実際に使うときは、抽出した色を出発点として、彩度を少し上げる、明度を寄せる、といった手を加えるほうがうまくまとまります。

もうひとつ確認したいのがコントラストです。パレットの両端の色は文字色と背景色の候補になりますが、それだけで読みやすさが保証されるわけではありません。このツールはコントラスト比を判定しないため、実際に使う色の組み合わせを別途確認してください。

そして「12色抽出したから12色使える」わけでもありません。画面の中で意味を持って働ける色は、経験的にそれほど多くありません。抽出結果から使う色を選び、残りは捨てる。この引き算まで含めて、はじめて配色になります。

活用シーン

• 写真に合わせたWebサイトのテーマカラーを決めたいとき
• 商品写真からブランドカラーの候補を洗い出したいとき
• ムードボードやコンセプトシートに、参考画像の色を数値で添えたいとき
• イラストやキービジュアルに合わせて、UIの配色を寄せたいとき
• スライド資料の配色を、表紙画像から統一したいとき
• 過去に作った制作物の色数値を、データを開かずに確認したいとき
• 好きな風景写真から、配色の練習用パレットを作りたいとき
• CSSのカスタムプロパティとして、テーマ色の下書きを用意したいとき

写真1枚から配色の骨格が取れるので、「なんとなく好きな色」で組み始めて途中で行き詰まる、という手戻りを減らせます。

ご利用にあたって

本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。抽出結果は縮小した画像に対する近似計算に基づくものであり、同じ画像でも抽出数によって得られる色は変わります。デザイン上の最終判断はご自身でおこなってください。表示される色は、お使いのモニターやブラウザのカラープロファイルによって実際の印象が異なる場合があります。印刷物に使う場合は、CMYKでの再現を別途ご確認ください。読み込んだ画像はサーバーに送信されずブラウザ内で処理されますが、ブラウザの種類・バージョンや端末環境によっては、表示・動作・コピー機能の挙動が異なる場合があります。抽出した色の利用にあたっては、元画像の権利および第三者の権利を侵害しない範囲でご利用ください。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。本ツールの仕様・内容は、予告なく変更または提供を終了する場合があります。

画像を1枚置くだけで、配色の出発点が手に入ります。色に迷ったときの最初の一手として、ぜひ気軽にお試しください。