画像からカラーパレット抽出
カラー
写真・スクリーンショット・デザインをドロップすると、ピクセルをサンプリングして粗い RGB 格子にバケッティング、最頻出のバケットを平均で代表色化。色数(2–16)を調整可能。パレットは比率で配分された棒と、HEX・RGB・画像内占有率(%)付きの個別スウォッチで表示。
—
画像をドロップするとパレットが抽出されます。
使い方
- 画像をドロップまたは選択。
- 色数(2–16)を調整。
- スウォッチをクリックして HEX をコピー、Copy all で一括コピー。
よくある質問
- 抽出はどう動く?
- 画像を縮小(長辺最大 400px)し、RGB を 8×8×8 グリッドで量子化。最大バケットがパレットとなり、それぞれ平均で代表色化(スウォッチがピクセル化しないように)。
- 似た色が統合される?
- 8×8×8 量子化は意図的に粗め — でないとほぼ同一のグラデーションが出ます。微差が欲しければ色数を増やし、タイトなブランドパレットなら減らしてください。
- 画像はアップロードされる?
- いいえ。Canvas がローカルでピクセルを読み、バケットはメモリ上で扱われ最終的に HEX 文字列のみ残ります。
- パーセンテージの合計が 100% にならない?
- 上位 N バケットのみ表示で、ロングテールの稀少色は含まれません。棒のスライスは表示中のバケットに対する比率で、画像全体ではありません。
関連ツール
色覚シミュレーター
8 種類の色覚異常(CVD)で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字/背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00