画像から代表的な色を最大8色抽出します。写真の雰囲気に合わせた配色を決めたいときや、ブランドカラーの候補出しに使えます。
くわしい使い方
画像を選ぶと、使われている色を分析して代表色を並べます。各色はHEXでコピーできるため、そのままCSSやデザインツールで使えます。
配色の組み立て方
この70:25:5の比率は、配色をまとめる目安としてよく使われます。抽出した色をすべて使うのではなく、役割を決めて3色程度に絞ると散らかりません。
- ベースカラー（70%）：面積の広い背景色。彩度を抑えた色が扱いやすい
- メインカラー（25%）：ブランドを印象づける色
- アクセントカラー（5%）：ボタンやリンクなど、目を引かせたい箇所
使うときの注意
写真から抽出した色は彩度が高すぎることがあり、そのままUIに使うと目が疲れます。彩度を下げる、明度を上げるなどの調整を前提に考えてください。
文字色に使う場合は、背景とのコントラスト比が4.5:1以上（大きな文字は3:1以上）になるか確認してください。
抽出した色の記録
決めた配色は、HEX値をメモに残しておくと、次に別の素材を作るときに統一できます。ロゴ・スライド・SNS投稿で色がずれると、同じブランドに見えなくなります。
色ごとに役割（背景・見出し・アクセント）を書き添えておくと、他の人が作業するときも迷いません。
よくある質問
Q 何色まで抽出できますか？
最大8色です。画像の色数が少ない場合は、それより少なく表示されます。
Q 抽出のしくみは？
画像内の画素を分析し、出現頻度の高い色をまとめて代表色として表示しています。
Q 抽出した色をそのまま使えますか？
写真由来の色は彩度が高いことが多いため、UIに使う際は調整をおすすめします。
Q 画像は送信されますか？
されません。ブラウザ内で処理しています。