画像カラーピッカーとパレット
ブラウザ内で 1 枚の画像から色を取得し、HEX/RGB/CSS 値をコピーし、2-32 色の代表パレットを抽出して CSS 変数または JSON として書き出せます。HEIC/HEIF 入力に対応します。
画像をここにドラッグ＆ドロップまたはクリックして選択
PNG / JPEG / WebP / AVIF / HEIC / HEIF 対応
画像カラーピッカーとパレット画像を 1 枚インポートプレビューをクリックして HEX/RGB/CSS をコピーパレット色数を選択（4/6/8/12/16/24/32）代表色を抽出CSS 変数または JSON を書き出し
かんたんスタート
1
2
3
4
5
よくある利用シーン
デザイン/ポスターの色取得
配色スキーム用に主要色とアクセント色を抽出
テーマ/デザインシステム
プロジェクト用に CSS 変数または JSON をエクスポート
コンポーネントスタイリング
ボタン、タグ、チャート用のマッチング色を抽出
ブランド統一
ブランド素材から標準カラーパレットを抽出
カラーピッカーとパレット設定
色数：2-32。通常は 8/12、写真やグラデーションは 16-32 が目安
プリセットボタン：4/6/8/12/16/24/32ワンクリック切り替え
並び順：量子化サンプル数の多い順に並び、よく出る色ほど前に表示
色の横の数字：ダウンサンプリングしたパレット画像での量子化サンプル数
書き出し仕様：CSS 変数は :root の --color-1 名を使います。JSON は各パレット色の index/hex/css/rgb/count を並べます。
使い方のヒント
まず8/12で全体効果を見て、必要に応じて16/24/32に増やす
プロジェクトで使用する際は--color-1をセマンティック名（例：--color-primary）に変更推奨
大きな画像の抽出時はページを前面に保持してブラウザのスロットリングを回避
制限事項と互換性
パレット抽出は性能のため自動でダウンサンプリングします。結果は代表色です。
精度：クリック取色は最長辺 2,048 px までの表示 Canvas を使います。パレット抽出は 256 px サンプルを使います。
HEIC/HEIF は入力専用です。ローカルデコードに失敗する場合は PNG/JPEG に変換してください。
Alpha の扱い：CSS は rgba(...) を出力できます。HEX/RGB は alpha を含みません。JSON は css 値で alpha 表現を保持します。
入力範囲：URL インポート、貼り付けインポート、画面スポイト、ブラウザー拡張フローには対応していません。
色の範囲：HSL/CMYK/Pantone/LAB/OKLCH 変換、コントラストチェック、WCAG マトリクスはありません。
書き出し範囲：Tailwind/SCSS/ASE/Figma/Procreate スウォッチ書き出しはありません。
プライバシーとセキュリティ
画像の色取得とパレット抽出はブラウザ内で行われます。元画像は、このツールを開いている間だけページメモリに保持されます。パレットの色数設定はブラウザストレージに残る場合があり、WebDAV 同期を有効にしている場合は設定に従って同期されることがあります。選択した色、パレット、エラーメッセージ、プレビューのズーム / パン情報は実行時の確認状態で、存在している間は WebDAV 状態 schema を通じて同期される場合があります。画像ファイルは既定では同期されず、添付同期を明示的に有効にした場合だけ WebDAV 添付同期に入ることがあります。CSS/JSON パレットの書き出しはダウンロード時に生成され、個別の結果として保存されません。共有端末では、必要に応じて画像、取得色、パレット、保存済み設定、サイトデータを消去してください。
よくある質問
一般的な UI は 8 または 12、最小アイコンは 4-6、写真やグラデーションは 16-32 が目安です。プリセットで素早く比較できます。
クリック取色は表示中の Canvas を 1 点サンプリングします。パレット抽出は 256 px サンプルを量子化し、全体傾向を表す色を出します。
色の取得とパレット抽出はブラウザ内で行われます。画像はツールを開いている間だけページメモリに保持されます。パレットの色数はブラウザストレージに残り、有効時は WebDAV で同期される場合があります。取得色、パレット、プレビュー状態も存在している間は実行時状態として同期されることがあります。画像ファイルは添付同期を明示的に有効にした場合だけ WebDAV 添付同期に入ります。
取得した色は HEX、RGB、CSS 形式で表示されます。パレットは CSS 変数と、index、hex、css、rgb、count を含む JSON として書き出せます。HSL、CMYK、Pantone、LAB、OKLCH、ASE、Figma パレット書き出しは対象外です。