カラー抽出器
画像から色を抽出してデザインパレットを生成します。
画像からカラーパレットを抽出する
概要
カラー抽出ツールは画像を分析し、主要な色をすぐ使えるパレット(デザインに貼れるhexコード)として返します。ブランドを写真に合わせる、ムードボードを作る、ヒーロー画像に合わせてサイトをテーマ化する — そんなとき一つずつスポイトで色を拾うのは遅く不正確です。このツールは画像全体をサンプリングし、その見た目を定義する核となる色にまとめます。処理はすべてブラウザ内で行われます。
使い方（ステップ）
- 1
画像を置く
写真・ロゴ・スクリーンショット・イラストすべて使えます。高解像度ほど代表性の高いパレットになります。
- 2
抽出されたパレットを確認
主要色とアクセント色がhex・RGB値とともに表示されます。
- 3
必要なコードをコピー
スウォッチをクリックしてhexをコピーし、CSS・デザインツール・ブランドガイドに貼り付けます。
仕組み
画像をキャンバスに描画してピクセルをRGB値として読みます。クラスタリングアルゴリズム(median-cutやk-means系)が数百万のピクセルを、出現頻度で重み付けした代表色にまとめます。結果は主要パレットとアクセント色で、それぞれコピー可能なhex・RGBコードで表示されます。生のピクセルデータをローカル処理するため、元画像はアップロードされません。
こんなときに使う
選んだ写真と調和するサイト・スライドのテーマ構成。ロゴ画像からのブランドカラー抽出。イラストやUIモックアップ用の調和したパレット作成。インスピレーション写真からのムードボード生成。製品写真から読みやすいテキスト・背景の組み合わせ選定。ヒーロー画像のトーンに合わせたCSSグラデーション。
よくある質問
圧倒されない程度で使えるパレットになるだけの主要色とアクセント色です。微妙なグラデーションの写真は、平面色ブロックのグラフィックより少ない色数にまとまります。