画像からカラーパレットを抽出

k-meansクラスタリングで写真の主要な色を抽出し、それぞれが占める割合を確認して、HEXコード、CSS変数、JSONとしてコピーできます。

ここに画像をドロップするか、クリックして選択

クリップボードから画像を貼り付けることもできます（Ctrl+V / ⌘V）

すべてブラウザ内で実行されます。データがアップロードされることはありません。

画像カラーパレットとは？

画像の主要な色を見つけ、各色が画像で占める割合の順に並べたパレットとして表示します。2〜12色から選び、HEXコード、CSSカスタムプロパティ、RGB値と割合付きのJSONとしてコピーできます。

画像カラーパレットの使い方

画像をドロップ、選択、または貼り付けます。
色の数を選びます。
パレットバーと、各色のHEX、RGB、割合の一覧を確認します。
HEXコードを1つコピーするか、CSS 変数としてコピー、JSON としてコピー、HEX リストをコピーを使います。

例

入力

40×20 image split into red, green, blue and white quadrants, 4 colors

出力

#FF0000 25%, #00FF00 25%, #0000FF 25%, #FFFFFF 25%

画像カラーパレットを使うべき場面

写真やアートワークから配色を作ったり、Webサイトのテーマをヒーロー画像に合わせたり、ブランドのビジュアルを分析したりするときに使います。クラスタの平均は、どの単一のピクセルとも少し異なる場合があります。正確な1ピクセルの色を読み取るには、画像カラーピッカーを使ってください。

画像カラーパレットの仕組み

画像は長辺が最大256pxに縮小され、完全に透明なピクセルは無視されます。残りのピクセルは、RGB空間でk-meansクラスタリングによりグループ化されます。初期の中心は決定論的に選ばれ（平均色に最も近いピクセル、次に選ばれたすべての中心から最も遠いピクセルを繰り返し選択）、最大12回の反復でピクセルを再割り当てし、各中心をそのクラスタの平均に移動します。パレットの各色はクラスタの平均で、その割合はクラスタ内のピクセルの占める割合です。