画像のカラーピッカー・配色抽出

画像の主な色を見つけてHEX、RGB、HSLのコードで表示し、押した点の色のコードも表示します。写真からデザイン用の色を取り出したり、ロゴの色を確認したりするのに使えます。

使い方

1. 画像を枠にドロップするか、クリックして選びます。
2. 「主な色」に、よく使われている色とその割合が一覧表示されます。「色数」（5〜10）や「抽出方法」を変えて試せます。
3. 画像を押すかドラッグすると、その点の色が「取得した色」に表示されます。先に拡大することもでき、「取得範囲」で周りのピクセルの平均をとることもできます。
4. コードを押すとコピーできます。配色全体は、「CSS変数としてコピー」「JSONとしてコピー」「PNGで保存」で取り出せます。

計算方法と補足

• 主な色は、長い辺が最大256ピクセルになるように縮小したコピーから求めます。透明なピクセルは数えません。
• メディアンカット法は、色の広がりが最も大きいグループをその中央値で分割することを繰り返し、k-means法は各グループの中心を計算し直すことを繰り返します。k-means法の方が少し時間がかかります。
• 最後に取得した30色は、この端末のこのブラウザに保存されます。画像はアップロードされません。

よくある質問

画像からカラーコードを取得するには？

画像を開いて、調べたい場所を押します。「取得した色」にHEX、RGB、HSLのコードが表示され、コードを押すとコピーできます。

HEXとRGBの違いは？

同じ色の2通りの書き方です。RGBは赤、緑、青を0〜255の数値で表し、HEXは同じ3つの値をそれぞれ2桁の16進数で書きます。rgb(255, 0, 0) は #FF0000 です。

取得した色が見た目と少し違うのはなぜ？

写真では、隣り合うピクセルの色が少しずつ異なることがよくあります。「取得範囲」を3 × 3や5 × 5ピクセルの平均にすると、値が安定します。

このページの外の色も取得できますか？

対応しているブラウザでのみできます。その場合は「画面のどこからでも色を取得」ボタンが表示され、画面上の任意の点の色を取得できます。