60-30-10の法則
配色は色選びより配分で失敗します。60-30-10の法則は、それを好みではなく算数で解きます。
#f4f1ec
#c9d6df
#2f4858
#e08e45
数字の意味
見える面積の六割は主となる色、たいていは最も静かな色に与えます。壁、ページの背景、ポスターの地の部分です。三割は構造を作る二番目の色——家具、カード、セクションの区画です。一割がアクセントで、気づいてほしいものに載せます。比率は目安であって計測ではありません。誰もピクセルを数えてはいません。
なぜ効くのか
同じ量の二色は競い合い、目はその競争を雑音として受け取ります。面積のはっきりした序列は、どこを最初に見て、次にどこを見て、最後に何を見るかを伝えます。その順序こそが、設計されたページと飾られたページを分けます。しかも寛容です。特に調和しているとは言えない色でも、配分がここまで明確なら意図的に見えてきます。
画面に合わせて使う
インターフェースには三色では足りないことが多いので、三つの値ではなく三つの役割として使ってください。六割は背景と面、三割は文字と構造、一割はリンクやボタン、状態表示です。エラーの赤や成功の緑といった意味を持つ色は比率の外に置き、意味を保てるくらい稀なままにしておきます。
覚えておきたいこと
最も静かな色に広さを与え、最も強い色にはほとんど与えない。色を一つ足すより、配分のほうが効きます。
パレットを生成して比率を試す