あるプロジェクトのために、13色のカラーパレットを組んだことがあります。もとにしたのは、名前と由来のある日本の伝統色です。1色ずつ見れば、どれも良い色でした。

あとから13色の色相角を一列に並べてみると、金黄と山吹の差は8.8度しかありませんでした。

8.8度はどれくらい近いか

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

8.8度の2色は、別々に見れば2色です。横に並べると、同じ色が刷りずれたように見えます。

選ぶときと使うときは違う

色を選ぶとき、私たちは1色ずつ見ます。使う側は、何色かを一度に見ます。

だからパレットを渡すときは、13個のカラーコードだけでは足りません。色同士の関係も書いておく必要があります。

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

その2色はどうしたか

削ってもいないし、調整もしていません。ルールを1つ足しました。この2色は同じ画面に置かない、というものです。

同じパレットには「霧」という中間のグレーもあり、コントラスト比は3.01:1しかありません。大きな文字なら使えて、本文には使えない、ちょうどその線の上です。これも残して、使える場所をガイドラインに明記しました。

色見本は、どの色が使えるかを教えてくれます。私たちが納めるガイドラインは、もう1つの問いにも答えるようにしています。この色をこの位置に置いていいかどうか、です。