しくみ
写真、ロゴ、スクリーンショットを選ぶと、median cutアルゴリズムで主な色を見つけます。画像の色を同じ大きさのグループに繰り返し分割する方法です。色ごとにHEXコードと画像内で占める割合を表示し、パレット全体をCSS変数としてコピーできます。
画像 → 似た色ごとにグループ化 → 各グループの平均色
こんなときに便利
- 商品写真からブランドやWebサイトのパレットを作る。
- スライド、ポスター、サムネイルの色を画像に合わせる。
- ロゴやイラストの正確な色を調べる。
活用のヒント
- 色の数を少なくすると代表的な色が、多くするとアクセントカラーまで見えてきます。
- PNG画像の透明部分は無視されます。
- 画像は端末内で分析され、アップロードされることはありません。
計算の基準と出典
- 減色処理はmedian cutアルゴリズム(Heckbert, 1982)を使用
- 色の値はCSS Color Module Level 4で定義されたsRGBで表示
最終確認 2026年10月7日
よくある質問
主な色はどうやって選ばれますか?
median cutアルゴリズムが画像の色をグループに繰り返し分割して各グループの平均を取るので、よく使われている色が浮かび上がります。
色はいくつ抽出すればいいですか?
4〜6色なら全体の雰囲気を、8〜12色なら小さなアクセントカラーまで拾えます。
ロゴやスクリーンショットにも使えますか?
はい。フラットな画像ではとても正確な色が得られ、PNGの透明部分は無視されます。
画像はアップロードされますか?
いいえ。画像はブラウザ内で縮小・分析され、端末の外に出ることはありません。
抽出した色をCSSで使えますか?
はい。CSS変数のブロックをコピーするか、色をタップしてHEXコードをコピーしてください。