画像からカラーパレット抽出
写真・スクリーンショット・デザインをドロップすると、ピクセルをサンプリングして粗い RGB 格子にバケッティング、最頻出のバケットを平均で代表色化。色数（2–16）を調整可能。パレットは比率で配分された棒と、HEX・RGB・画像内占有率（%）付きの個別スウォッチで表示。
—
画像をドロップするとパレットが抽出されます。
使い方
- 画像をドロップまたは選択。
- 色数（2–16）を調整。
- スウォッチをクリックして HEX をコピー、Copy all で一括コピー。
よくある質問
- 抽出はどう動く？
- 画像を縮小（長辺最大 400px）し、RGB を 8×8×8 グリッドで量子化。最大バケットがパレットとなり、それぞれ平均で代表色化（スウォッチがピクセル化しないように）。
- 似た色が統合される？
- 8×8×8 量子化は意図的に粗め — でないとほぼ同一のグラデーションが出ます。微差が欲しければ色数を増やし、タイトなブランドパレットなら減らしてください。
- 画像はアップロードされる？
- いいえ。Canvas がローカルでピクセルを読み、バケットはメモリ上で扱われ最終的に HEX 文字列のみ残ります。
- パーセンテージの合計が 100% にならない？
- 上位 N バケットのみ表示で、ロングテールの稀少色は含まれません。棒のスライスは表示中のバケットに対する比率で、画像全体ではありません。
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
カラー 0 0
カラートークンエクスポーター
カラーパレットを1回定義 → CSSカスタムプロパティ·Tailwind設定·SCSS·LESS·デザイントークンJSON·SwiftUI Color·Android `colors.xml` にエクスポート。ライブプレビュースウォッチ。
カラー 0 0
カラーパレット ジェネレーター
ベースカラーを選んで、クラシックなカラーホイールのハーモニーを取得 — 補色、スプリット補色、トライアド、テトラド、スクエア、アナロガス、モノクロマティック。
カラー 0 0
Tailwind カラーパレット
Tailwind CSS のデフォルトパレット全体 — 22 色相 × 11 シェード（50〜950）— クリックで Tailwind クラス、HEX、rgb() としてコピー。
カラー 0 0
カラーソート
16 進カラーのリストを貼り付けて色相、彩度、明度、または知覚的明るさでソート — デザイントークンパレットを整えるのに便利。
カラー 0 0
画像カラーピッカー
画像をドロップしてクリックするだけで該当画素の HEX / RGB / HSL を取得 — パレットも一緒に。
画像 0 0