Color Palette Extractor
Drop an image, get its dominant colors. Export as HEX, RGB, HSL, CSS variables, Tailwind config or JSON. Powered by k-means clustering — runs entirely in your browser.
Drop an image, click to browse, or Ctrl/Cmd + V to paste
PNG, JPG, WebP, GIF — anything your browser can decode
From a photo to a complete brand palette in seconds
Designers, web developers and brand professionals constantly need to extract colors from reference images — a competitor's website, a mood-board photo, a screenshot, a logo, a piece of art. This tool does it instantly with k-means clustering, the same algorithm used by Adobe Color and similar professional tools.
仕組み
K-means is a classic clustering algorithm: it groups similar pixels together and finds the "center" (average color) of each group. We sample up to 20,000 pixels from your image (more than enough — visually indistinguishable from analyzing every pixel) and run k-means in RGB space to find the K most dominant clusters. The result is a palette sorted by frequency, so the first color is the one that occupies the most pixels.
なぜk-meansで他のアルゴリズムではないのか？
Popular alternatives like median-cut (used by ColorThief) and Vibrant.js have known issues: they sometimes return colors that are vivid rather than dominant, and their output can vary between runs. Our k-means implementation uses k-means++ seeding with a deterministic golden-ratio fraction, which makes runs reproducible (same image → same palette) and converges to truly dominant clusters.
エクスポート形式
- HEX list — paste into any design tool.
- RGB / HSL — for code that needs numeric channels.
- CSS variables — drop into
:root { }and reference withvar(--color-1). - Tailwind config — generates a block ready to paste into
tailwind.config.jsundertheme.extend.colors. - JSON — with HEX, RGB and the percentage each color occupies. Ideal for design tokens or programmatic use.
画像を読み込む 3 つの方法
- Click and pick. The drop zone opens a file picker.
- Drag and drop. Drop any image file directly on the page.
- Paste from clipboard. Press Ctrl/Cmd + V after copying an image — works for screenshots, design tools, websites with Copy Image, anything.
プライバシー
Your image never leaves your device. Every step — decoding, sampling, clustering — happens in your browser tab. We don't have a server-side component for this tool.
よくある使用例
- Recreate a competitor's brand palette from their website screenshot.
- Pull a Tailwind config out of a moodboard.
- Match a website color scheme to a hero photo.
- Generate design tokens from a piece of artwork or photography.
- Choose accent colors for a slide deck from the cover image.
よくある質問
- カラー抽出ツールは画像をサーバーにアップロードしますか？
- いいえ。画像はデバイスから出ることはありません。デコード、ピクセルサンプリング、k-meansクラスタリングのすべてのステップがブラウザタブ内で完全に行われます。このツールにはサーバーサイドのコンポーネントはありません。
- 抽出したパレットにはどのエクスポート形式がありますか？
- HEXリスト、RGBリスト、HSLリスト、CSS変数（:root {}に対応）、Tailwindコンフィグ（tailwind.config.jsに貼り付け可能）、またはHEX、RGB、色の頻度パーセンテージを含むJSONでパレットをエクスポートできます。すべてワンクリックコピーです。
- カラー抽出アルゴリズムはどのように機能しますか？
- このツールはk-meansクラスタリングを使用します — Adobe Colorやプロフェッショナルツールと同じアルゴリズムです。画像から最大20,000ピクセルをサンプリングしてクラスターにグループ化し、主要な色を見つけます。最も目立つ色が最初に表示されるよう頻度順にソートされます。
- カラーパレット抽出の一般的な使用例は何ですか？
- デザイナーはスクリーンショットからブランドパレットを再現、ムードボードからTailwindコンフィグを取得、Webサイトの色をヒーロー写真に合わせる、アートワークからデザイントークンを生成、カバー画像からスライドデッキのアクセントカラーを選択するために使用します。
- カラー抽出ツールは無料ですか？何色まで抽出できますか？
- このツールはサインアップ不要、制限なしで完全に無料です。任意の画像から4、6、8、10、または12色のパレットを抽出できます。すべての処理がブラウザで実行されるため、使用上限や1日の制限はありません。