画面を作っている時に悩みやすいのが「色の選び方」「色の使いどころ」です。
マテリアルデザインを見ていると、かなり細かく色が設定されているなあ…ということは認識していたのですが、
「なぜここまで細かく色を作っているのか？」
「それぞれの色にどういった役割があるのか？」という原理原則をきちんと知っておきたいなと思い、ボリューミーでしたがガイドラインを読んでみました。
※DeepLの機械翻訳では理解が難しい点が多く、、私の意訳も多分に含むまとめとなってしまいました。間違って翻訳&解釈している点があるかもしれないことご了承ください🙇‍♀

まずはColor Systemのページから読み解きです👇

動的カラーを生成する手順のサマリ

Step1：Sourceカラーを1つ決める

Sourceカラーを決定するには、以下の3つの手段がある。

1．ユーザーが設定している壁紙からソースカラーを生成する

2．アプリ内コンテンツからソースカラーを生成

3．デザイナー自身でソースカラーを選ぶ

Step2：Sourceカラーから5つのKeyカラーを生成する

先述したいずれかの方法でSourceカラーを選択したら、Sourceカラーの色相と彩度を操作して5つのKeyカラーを生成する。Keyカラーの種類は下記の5つある。

1. Primary

2. Secondary

3. Tertiary

4. Neutral

5. Neutral variant

Step3：5つのKeyカラーごとにトーンパレットを生成する

Keyカラーが完成したら、階調値と彩度値を操作して13段階ので出来るトーンパレットを作成する。

Step4：トーンパレットの中の色を組み合わせて、組み合わせ色に役割を与える

アクセシビリティを考慮しながら、トーンパレット内の色を組み合わせ、組み合わせに役割を持たせる。

例）
primary40にはPrimaryの役割が、primary100にはOnPrimaryの役割が割り当てられている。

例）
色の役割を決める際は、5つのトーンパレットから色が割り当てられる。
Primaryの役割をもつカラーなら、PrimaryのKeyカラーで構成されるトーンパレットの色の中から選ばれる。
Surfaceの役割をもつカラーなら、NeutralのKeyカラーで構成されるトーンパレットから選ばれる。

👆👆👆ここまでがColor Systemに関する読み解きでした👆👆👆

色に割り当てられた役割

ここからはページが変わり、主に色の役割に関する読み解きになります💡

一般的な定義

1. Surface
   背景や画面の大きく強調度の低い領域に使用される。

2. Primary, Secondary, Tertiary
   前景の要素を強調または非強調するために使用するアクセントカラー。

3. Container
   ボタンなどの前景要素の塗りつぶし色として使用する。テキストやアイコンには使用しない。

4. On
   この用語で始まるカラーは、テキストやアイコンの色を、対になる親色の上に置く色である。例えば、on primaryはテキストやアイコンの第一の塗りつぶし色に対して使用される。

5. Variant
   この用語で終わるカラーは、バリアントでないペアよりも弱い強調をする際に使う色である。例えば、outline variant は、アウトライン・カラーのあまり強調しない場面で使用する。

Primary

• FABや最も強調したいボタン、アクティブステートなど、UI全体で最も目立つコンポーネントにはプライマリロールを使用する。

  • Primary - 最も強調する際の塗りつぶし、テキスト、表面に対するアイコン。

  • On Primary - プライマリーに対するテキストとアイコン。

  • Primary container - FABのような重要なコンポーネントのために、表面に対して目立つ塗りつぶしカラー。

  • On primary container - プライマリコンテナに対するテキストとアイコン。

Secondary

• フィルターチップのようなUIであまり目立たないコンポーネントには、セカンダリロールを使用する。

  • Secondary - 表面に対するあまり目立たない塗りつぶし、テキスト、アイコン。

  • On secondary - セカンダリに対するテキストとアイコン。

  • Secondary container - 表面に対してあまり目立たない塗りつぶし色。

  • On secondary container - セカンダリコンテナに対するテキストとアイコン。

Tertiary

• Tertiaryの役割は、PrimaryとSecondaryのバランスをとったり、入力フィールドのような要素に注目させるような、対照的なアクセントに使う。

• Tertiaryはデザイナーの裁量で適用する。より幅広い色彩表現をサポートするためのもの。

Error

• テキストフィールドに入力されたパスワードが間違っているなどのエラー状態を伝える。

• エラーは静的な色。（動的な配色でも変化しない）。
  エラーの色の役割は、どの動的配色でもデフォルトで静的になる。

Surface

• Surfaceにはさらに5つの役割に分かれており、レベルに応じて名前が付けられている。

  • デフォルトは「Surface container」。それ以外の色は拡張画面用のレイアウトで階層や入れ子のコンテナを作成する際に使用する。

• 使用例

  • 最も一般的な組み合わせは、背景領域にSurfaceを使い、ナビゲーション領域にSurface containerを使うケース。

  • カード、シート、ダイアログなどのコンポーネントにはコンテナカラーを使用する。

  • デフォルトでは、ナビゲーションバー、メニュー、ダイアログのようなニュートラルカラーのコンポーネントは、特定のSurface Containerのロールにマッピングされますが、これらのロールは、ユーザーのニーズに合わせてメーカーがマッピングし直すことができる。

Outline

• Surfaceに対して使用するアウトラインカラーは2種類存在する。

  • Outline - テキストフィールドのアウトラインなど、重要な境界。

  • Outline variant - 仕切りなどの装飾的要素。