カテゴリー: 画像ツール

支配色抽出ツール

サイト側で企画したツールツールが見つからない?

画像から主要な色を抽出し、コピーできるパレットにします

画像をアップロードすると、最も多く使われている色を、それぞれの占有率付きで16進スウォッチのランキングとして抽出します。デザインツールやスタイルシートにそのままコピーできます。画像がブラウザの外に出ることはありません。

画像を選ぶと、支配的な色を抽出します。

抽出する色数

画像はブラウザ内のcanvas上でデコード・解析され、どこにもアップロードされません。

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

画像はオフスクリーンのcanvasに描画され、処理速度のために縮小されたうえで、Canvas APIですべてのピクセルが読み取られます。似た色はバケットにまとめられ、各バケットに含まれる実際のピクセルを平均して正確なスウォッチにし、画像に占める割合でバケットをランキングします。ユニークなピクセル値ごとに1色を出すのではなく、少数の代表的なパレットを得られます。

使い方

  1. 端末から画像ファイルを選びます。
  2. 抽出する色数を選びます。
  3. 個々のスウォッチの16進値をコピーするか、パレット全体を一度にコピーします。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

画像はどこかにアップロードされますか。
いいえ。ブラウザタブ内のcanvas上ですべてデコード・解析され、ファイルやピクセルデータがサーバーに送信されることはありません。
抽出された色が、最も明るい正確なピクセルの色とわずかに違うのはなぜですか。
各スウォッチは1つのサンプルピクセルではなく、そのバケットにまとめられたすべてのピクセルの平均色です。1点をクリックして選ぶスポイト方式よりも代表性の高い結果になります。
割合を合計すると100%になりますか。
画像内で見つかったすべてのバケットを抽出した場合のみです。パレットは選んだ色数に制限されているため、表示される割合は上位の色だけの占有率であり、画像全体の割合ではありません。