カラーパレット抽出（WCAG判定）
上位N色＋コントラスト比をブラウザで即時算出。デザインの配色検討に。
ブラウザ内処理・アップロードなし
how使い方（かんたん3ステップ）
- 1画像を選択（複数可）。
- 2オプションを設定（品質/サイズ/形式など）。
- 3「一括処理」→ 完了したらZIPで保存。
読み込み中…
DOC
このツールの詳しい解説
配色抽出はブランド再設計やダークモード検討、既存 UI の再現性確保に役立ちます。本ツールは画像のピクセルをサンプリングし、量子化（近傍色クラスタリング）によって代表色を抽出、出現頻度順に並べます。取得結果は HEX / RGB および白(#FFF)/黒(#000) テキストとのコントラスト比 (WCAG 2.1) を即時計算し、AA/AAA 達成可否を一目で判断できます。
ワークフロー例: 競合サイトのスクリーンショット → 本ツールで上位 8〜12 色抽出 → 冗長な彩度違いを統合 → ベース/アクセント/背景/境界/ステート色の役割を再割り当て → カラーパレット管理 で定義を永続化、といった流れです。コントラスト閾値 (4.5 / 3.0) を満たさない場合は明度または彩度を微調整し再検証します。
注意: 透過 PNG や影付き要素では背景色が推測できないため、実際の UI 背景を合成した画像で再抽出すると代表色の精度が上がります。
MORE