画像カラーピッカー＆パレット
画像カラーピッカー＆パレット
画像をクリックして色を取得、主要色とパレットを自動抽出、HEX/RGBをコピーしCSS変数をエクスポート。PNG、JPG/JPEG、WebP、AVIF、HEIC/HEIF対応。
画像をここにドラッグ＆ドロップまたはクリックして選択
PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF 対応
画像カラーピッカー＆パレット
🚀 かんたんスタート
- 画像をインポート：ドラッグ＆ドロップまたはクリックで選択
- パネル切り替え：デスクトップはサイドパネル；モバイルは下部ボタンをタップ
- クリックで取得：画像の任意の場所をクリックしてそのピクセルの色を取得
- 色をコピー：取得後HEX/RGB/CSS形式でコピー
- 色数を設定：スライダーをドラッグまたはプリセットをクリック（4/6/8/12/16/24/32）
- パレットを抽出：抽出ボタンをクリックして主要色リストを取得
- CSSをエクスポート：抽出後CSS変数ファイルをエクスポート
- JSONをエクスポート：抽出後JSONデータファイルをエクスポート
- リセット：現在の画像と結果をクリア
📌 よくある利用シーン
- デザイン/ポスターの色取得：配色スキーム用に主要色とアクセント色を抽出
- テーマ/デザインシステム：プロジェクト用にCSS変数またはJSONをエクスポート
- コンポーネントスタイリング：ボタン、タグ、チャート用のマッチング色を抽出
- ブランド統一：ブランド素材から標準カラーパレットを抽出
🎛️ カラーピッカー＆パレットオプション
- 色数：2–32、一般的には8/12；写真/グラデーションは16–32推奨
- プリセットボタン：4/6/8/12/16/24/32ワンクリック切り替え
- ソート：パーセンテージの高い順、最も一般的な色が先頭
- 色の横の数字：画像内のピクセルパーセンテージを表示
🧭 使い方のヒント
- まず8/12で全体効果を見て、必要に応じて16/24/32に増やす
- プロジェクトで使用する際は--color-1をセマンティック名（例：--color-primary）に変更推奨
- 大きな画像の抽出時はページを前面に保持してブラウザのスロットリングを回避
⚠️ 制限事項と互換性
- 単一ファイル制限128MB、非常に大きな画像は遅延の原因に
- パレット抽出はパフォーマンス向上のため自動ダウンサンプリング、結果は代表色
- HEIC/HEIFデコードはブラウザサポートに依存、失敗時はJPG/PNGに変換
- 透明ピクセルは無視されるか実際のRGBAとして処理
🔒 プライバシーとセキュリティ
- すべての処理はブラウザ内で完了；データがデバイスから出ることはありません
❓ よくある質問
エクスポートしたCSSファイルの使い方は？
エクスポートした :root { --color-1: ... } をグローバルCSSに配置し、var(--color-1)で参照。
エクスポートしたJSONは何に使う？
スクリプト/デザインシステムの再利用用、例：Design Tokensやテーマ設定の生成。各色にhex/css/rgbとcountを含む。
色数はいくつが推奨？
一般的なUI：8または12；ミニマルアイコン：4–6；写真/グラデーション：16–32。プリセットで素早く比較。
クリック取得とパレットの色が違うのはなぜ？
クリック取得は単一ピクセル；パレットは画像全体を量子化した代表色で全体的な傾向を強調。
エクスポートボタンがグレーアウトしているのはなぜ？
まず「パレットを抽出」ボタンをクリックする必要があり、抽出完了後にエクスポートが利用可能に。
エクスポートされるファイル名はどう生成される？
デフォルトは元のファイル名（拡張子なし）+ .palette-色数 + .css/.json、不正な文字は自動クリーニング。