🎨 画像からカラーパレット抽出
画像をドラッグ＆ドロップするだけで、k-means クラスタリングで主要な色を自動抽出。HEX/RGB/HSL コード一発コピー。CSS変数・Tailwind config・JSON 形式で書き出し。Webデザイン・ブランドカラー分析に。
📑 使い方
- 画像をドロップ → 色数を選ぶ → パレット自動生成
- 各色クリックで HEX コードをコピー
- 下部の「エクスポート」で CSS / Tailwind / JSON 形式取得
🖼
画像をドラッグ＆ドロップ または クリック
JPG / PNG / WebP / SVG
🔒 画像はアップロードされません。すべてブラウザ内 (Canvas API + k-means) で処理。
📐 アルゴリズム
本ツールは k-means++ クラスタリングを使用：
- 画像を縮小サンプリング (最大10,000ピクセル)
- k-means++ 初期化で代表色を選定（似た色が密集するのを防ぐ）
- 20回反復でクラスタ重心を確定
- 明度順・出現頻度順で並び替え可能
🎯 使い道
- ブランドカラー分析: 競合のロゴ・サイトから配色を抽出
- Webデザイン: 写真や絵画から調和の取れた色を選ぶ
- UIデザイン: ヒーロー画像から CSS 変数を即生成
- イラスト制作: 参考画像のパレットを再現
- ファッション: コーディネートの配色分析
❓ よくある質問
- 画像はサーバーに送信される？
- いいえ、Canvas API でブラウザ内処理。プライベートな写真・社外秘ロゴも安心です。
- 透明背景の画像は？
- 透明ピクセルは無視して色抽出します。PNG の透過も問題なし。
- 何色まで抽出できる？
- 2〜20色。8〜12色がバランス良いです。多すぎると似た色が増えます。
- 大きい画像は処理に時間がかかる？
- 10,000ピクセルにサンプリングするので、4Kでも1〜2秒。スマホでも快適です。
- Adobe Color や Coolors とどう違う？
- 本ツールは「画像から自動抽出」に特化。Adobe Color の補色生成や Coolors の調和生成は別ツールが向きます。