画像から色を抽出
画像をアップロードすると、主な色のパレットと各色の割合を表示します。画像の好きな点をクリックすればその色を取得でき、HEX・RGB・HSLのコピーや、CSS・Tailwind・PNGでの書き出しもできます。
画像から色を取る方法
- 画像を選ぶか、ドラッグするか、貼り付け（Ctrl+V）ます。
- 下に主な色のパレットが表示されます（5〜12色を選べます）。画像の上にカーソルを当ててクリックすると、ルーペで確かめながらその点の色を取れます。
- 色コードの横のコピーボタンを押すか、パレット全体をCSS・JSON・Tailwind・PNG画像で書き出します。
よくある質問
似た色のピクセルをグループにまとめ、各グループの平均の色を、広い面積を占める順に並べます。パーセントは、その色が画像のどれくらいを占めているかを表します。
画像の上でカーソル（または指）を動かすと、ルーペでその部分が拡大されるので正確に狙えます。クリックするか指を離すと、「選んだ色」に追加されます。
いいえ。透明なピクセルは無視するので、背景が透明なロゴならロゴ自体の色が取れます。
Tailwindを選ぶと、Tailwind v4用の@theme（CSSに貼り付け）とTailwind v3用の設定（tailwind.config.js）が出ます。bg-palette-1、text-palette-2のようにすぐ使えます。
はい。パレットは縮小したコピーで計算しますが（主な色を見るには十分で、ずっと速いです）、クリックで取る色は最大1600pxの鮮明なコピーから読むので、実際の色にとても近くなります。
完全に無料で、登録も不要です。