小さなアイコンでは、色を増やすより役割を整理する方が効果的です。主役の色、補助の色、小さなアクセントをひとつずつ決めます。
実際の配色変更を比べる
下の2枚は、サイトの四角アイコンエディターから保存した画像です。顔の形とパーツは変えず、肌、髪、背景の色だけを変えました。
配色を直す前と後
| 確認点 | 修正前 | 修正後 | | --- | --- | --- | | 顔と髪 | 明るさが近く、小さくすると境界がつながる | 髪を暗くするか顔を明るくし、32pxでも分ける | | アクセント | 明るい部分が何か所も競う | 目、口、小物のどれか一つに絞る | | 背景 | 編集画面だけで判断する | 保存画像を明るい画面と暗い画面で確認する |
これは判断方法の例で、どのサービスにも同じ色を勧めるものではありません。自分の保存画像に同じ三つの確認を使います。
色相より先に明るさを見る
色相が違っても明るさが近いと、小さくしたときに顔と髪がつながります。赤と緑の違いだけにも頼らず、形と明暗で分かれるようにします。
四角アイコンエディターで大きな色面をひとつずつ変え、256px PNGを保存します。実ファイルの外周が明るい画面と暗い画面の両方で読め、アクセントが主役を邪魔しなければ十分です。
最後に丸い切り抜きも見ます。四隅の背景が隠れても輪郭が残るか、髪が円の端に触れすぎないかを確認してください。問題があれば、色を増やす前に余白か明暗差を直します。