以前、13色のカラーパレットを作りました。名前と由来のある伝統色がもとになっていて、1色ずつ見ればどれも良い色です。

問題が見えたのは、色相角を並べてからでした。そのうち2色の差が、8.8度しかなかったのです。

8.8度とはどれくらいか

隣り合う色相を見分けられる境目は、明度や彩度によって変わります。ただ、この彩度の帯では、おおよそ15度以上離れていないと「2つの色」には見えません。

8.8度だとどうなるか。単独で見れば別の色ですが、並べると、同じ色が刷り損じたように見えます。

パレットの質は、単色ではなく関係で決まる

色を選ぶとき、私たちは1色ずつ見ます。色を使うとき、見る人は何色かを同時に見ます。

ですから、パレットとして本当に伝えるべきなのは13個のカラーコードではなく、次のようなことです。

  • 前景と背景の組み合わせごとのコントラスト比の計算値と、4.5:1に届いているかどうか
  • 色相が近すぎて、隣に置いてはいけない組み合わせ
  • 彩度が高すぎて、アクセントには使えても地には使えない色
  • ニュートラルの階調が、ダークモードとライトモードでそれぞれどの段に対応するか

その2色をどうしたか

削除も、色の調整もしていません。「この2色は同じ画面に置かない」というルールを1つ加えました。

同じパレットには、コントラスト比が3.01:1しかないニュートラルグレーもあります。大きな文字なら使えて、本文には使えない、ちょうどその線上の色です。これも残し、使い道を1つに限って明記しました。

デザインシステムと色見本の違い

色見本が答えるのは「どんな色があるか」です。デザインシステムが答えるのは「この色を、この場所で使っていいか」です。

⭐ 納品物は後者です。前者はスクリーンショットにすぎません。