カラースケールとは

カラースケールとは、一つの色相の濃淡を順に並べた集合で、慣習的に 50 から 900 まで番号を振ります。刻みが知覚的に均等に見え、特定の組み合わせが既知のコントラスト比を満たすように設計されており、任意の 16 進数ではなく役割と段階で色を選べるようになります。

番号付けの慣習

多くの体系はスケールに 50（最も明るい）から 900 または 950（最も暗い）まで、100 刻みで番号を振ります。この慣習は Material Design に由来し Tailwind が定着させたもので、いまや従う価値があるほど一般的です。

--blue-50:  #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8A

共有された慣習の値打ちは、「境界線には blue-600 を使って」がデザイナーにもエンジニアにも AI アシスタントにも同じ意味になることです。

良いスケールの条件

知覚的な等間隔性。 各段は等しく離れて見えるべきです。sRGB での補間ではこれを達成できません。中間で詰まり、色相によっては濁ったスケールになります。OKLCH のような知覚的に均等な空間で作業すると、目に見えて良い結果になります。

予測できるコントラスト。 よくできたスケールでは、特定の組み合わせが信頼できます。段 50 の上に段 600 以上なら本文で AA を満たし、500 なら大きな文字に使えます。この関係が成り立っていれば、日常的な組み合わせでいちいち手でコントラストを確かめなくなります。

色相の一貫性。 明度を素朴に調整すると、両端で色相がずれます。青は暗くすると紫に寄り、黄は緑に寄ります。知覚される色相をスケール全体で安定させるには、意図的な補正が要ります。

段数はいくつか

十段（50 から 900）が一般的な既定で、ほとんどのプロダクトに足ります。ダークテーマで 900 より下が必要な場合に 950 を足し、十一段にする体系もあります。

七段を下回るあたりから、必要な濃さが存在しない穴が空きがちになります。そこがまさにドリフトの入り口です。

体系に必要なスケール

  • ブランドカラーのためのプライマリスケール
  • ニュートラルあるいはグレーのスケール。ほかのすべてを合わせたより多く使われます
  • 成功・警告・エラー・情報のためのセマンティックスケール
  • 必要に応じてセカンダリあるいはアクセントのスケール

最も注意を払う価値があるのはニュートラルのスケールです。インターフェースの大部分は実際そこに宿ります。グレーにわずかな色味、暖かいか冷たいかを与えることが、考え抜かれたインターフェースと既定のままのインターフェースを分けることは少なくありません。

Flash DSM との関係

生成される体系には、プライマリ・セカンダリ・ニュートラル・セマンティックの完全なスケールが含まれます。知覚的に均等な空間で作られ、ライトとダークの変形を持ち、組み合わせごとにコントラストが確認されます。