🎯 画像からカラー抽出

画像から色を抽出すると、占有率の高い色と、面積は小さいのに目を引く色の2種類が出てきます。 この2つは役割が違うので、そのまま同じように使うと画面が破綻します。

写真から起こした配色がうるさくなるときは、たいてい彩度の高い色を広い面に使っているのが原因です。 広い面ほど彩度を落とし、狭い面ほど強くする、と覚えておくと外しません。 文字を載せる組み合わせはコントラスト比を確認してください。 本文なら4.5:1以上（WCAGのAA）が目安で、このツールは抽出した色ごとに白文字・黒文字での比率を出します。

完成したパレットをそのまま使うのではなく、階調を揃えたいときはデザインシステムのカラーパレット一覧で 近い色を探し、既存の段階に置き換えると扱いやすくなります。 画面全体の配色例を見たいときはUIテーマの配色カタログもどうぞ。

抽出する色数によって、出てくるものの性格が変わります。多く取れば正確になるわけではありません。数を増やすほど似た色が並び、どれを使えばよいか分からなくなります。

写真から配色を起こすならまず8色で見て、似た色ばかりなら減らす、 という進め方が確実です。 狙った一点の色だけ知りたい場合は、色数を増やすよりプレビューをクリックしてスポイトで拾うほうが速く、正確です。 背景を透過したPNGでは、透明な部分は集計から除いているので、 透過部分の色が結果に混ざることはありません。