--- title: "カラー" description: "カラーロール、モノクロームのプライマリ、ただ 1 つのアクセント、そしてすべてのスキームを生成し検証する仕組み。" url: "https://tanrei.chnotchy.com/ja/foundations/color/" last_updated: 2026-10-23T21:17:12.000Z --- # カラー > カラーロール、モノクロームのプライマリ、ただ 1 つのアクセント、そしてすべてのスキームを生成し検証する仕組み。 Tanrei では、コンポーネントが色を選ぶことはありません。コンポーネントは `primary` や `surface-container` といった**ロール**を求め、そのロールにどの色を当てるかは、有効なテーマが決めます。ロールは Tanrei の語彙が定め、その値は各デザインシステムのレイヤが定めます。 ## ロール - **インテント：** `primary`、`secondary`、および 4 つのステータスのインテント `error`・`success`・`warning`・`info`。それぞれ 4 つで 1 組です。その色、その上に置くコンテンツのための `on-` の色、より控えめな `-container`、そして `on-…-container`。 - **サーフェス：** `surface`、`surface-container-lowest` から `surface-container-highest` までの 5 段階、それに `surface-dim` と `surface-bright`。どのサーフェスでも、その上のコンテンツには `on-surface` か、より控えめな `on-surface-variant` を使います。 - **アウトライン：** `outline` と `outline-variant`（後述）。 - **インバース**のロール。スナックバーのように、あえてテーマを反転させる要素のためのものです。 - **フィックスト**のロール。ライトでもダークでも同じトーンを保ちます。 - **ユーティリティ：** `scrim`、`shadow`、`focus-ring`、およびエレベーションが使うリングと影の色。 塗りには、必ずそれ自身の `on-` ロールを組み合わせてください。コントラストのチェックが保証しているのは、この組み合わせです。 ## モノクロームのプライマリ 既定のテーマでは、`primary` はライトモードでほぼ黒、ダークモードでほぼ白です。そのため、画面で最も重要なアクションが、画面の中で最もコントラストの高いものになり、プロダクト自身の色と競合することもありません。`secondary` は、補助的なアクションのための、より柔らかいニュートラルです。 ## アクセントは 1 つ、控えめに アクセントはコアの語彙には含まれません。既定の Tanrei システムが**宣言している**パレット（シードは `#30a3f0`）で、宣言によってほかのインテントと同じ 4 つのロール、`accent`・`on-accent`・`accent-container`・`on-accent-container` が与えられます。コアのロールである `focus-ring` がこのパレットから色を取り、ほかにこのパレットを使うロールはありません。既定のシステムでは `link` はプライマリの色を取り、リンクは下線によって隣のテキストと見分けられます。プロダクトも同じ方法で自分のパレットを宣言します。再計算されてはならないブランドカラーや、クイズの「正解」と「不正解」がその例です。Material Design 3 を模したプリセットも `tertiary` をこの方法で宣言しており、Tanrei がその枠を全員のために持つことはしていません。アクセントを装飾に使わないでください。すべてが青ければ、何も目立ちません。 ## outline と outline-variant 2 つのアウトラインのロールは、見た目は似ていますが、役割は正反対です。 | ロール | 目的 | コントラスト | | --- | --- | --- | | `outline` | **機能的な境界**。空のテキストフィールド、未チェックのチェックボックス、アウトラインのボタンのように、コントロールがどこにあるかを示す唯一のものです。 | すべてのサーフェスロールに対して 3:1 以上 | | `outline-variant` | **装飾的な細い線**。区切り線、カードの枠線、エレベーションのリング。取り除いても、情報が何も隠れてはなりません。 | 標準のコントラストでは要件なし。低いアルファの黒または白です。中コントラストでは 3:1 以上、高コントラストでは 4.5:1 以上をすべてのサーフェスロールに対して満たし、常に `outline` より弱くなります | > [!WARNING] > **注意** > > 枠線が、コントロールがあることを示す唯一の手がかりであるなら、`outline` を使わなければなりません。アルファ 8% の細い線は感じがよい一方で、多くの人には見えません。 ## コントラストレベル どのテーマにも 3 つのコントラストレベルがあります。**標準**が既定です。**中**と**高**では、コンテンツのロールが両極へ寄り、2 つのアウトラインのロールがどちらも強くなります。Web では、`prefers-contrast: more` のときに高コントラストが自動で適用されます。ネイティブのプラットフォームは、それぞれのシステム設定に従います。ここで試せます（スイッチはページ全体に適用されます）。 ## スキームの生成方法 色を手で選ぶことはありません。システムファイル（`tokens/systems/core.system.json`）がパレットを宣言します。アクセントとエラーにはシードカラー、ニュートラルには色相と彩度です。さらに、ライトとダークの各コントラストレベルで、各ロールがどのパレットのどのトーンを取るかを、データとして記述します。ビルド時に、ジェネレーターが次のことを行います。 1. 各キーカラーを、HCT 色空間の**トーナルパレット**に変換します。Apache-2.0 の `material-color-utilities` ライブラリを使います。この色空間では、トーンとコントラストの対応が予測できます。 2. ニュートラルのパレットを、テーマの彩度に切り詰めます。既定では 0 で、純粋なグレーになります。 3. ライトとダークの各コントラストレベルについて、すべてのロールにトーンを割り当てます。 4. 結果を、DTCG のファイルとして `tokens/generated/` に書き出します。 ジェネレーターのアルゴリズムにはバージョン（`specVersion`）があります。そのため、対応づけの変更は、すべての色がいつの間にかずれる出来事ではなく、レビューできる意図的な変更になります。 ## CI で強制される不変条件 テーマとコントラストの 6 通りの組み合わせすべてについて、次の条件を満たさなければ、トークンのビルドは失敗します。 - すべての `(ロール, on-ロール)` の組が **4.5:1** に達している（2 つの高コントラストのスキームでは **7:1**）。 - `outline` が、すべてのサーフェスロールに対して **3:1** に達している。 - `focus-ring` が、それを描くサーフェスに対して **3:1** に達している。 ビルドを通すためにしきい値を緩めることはできません。ロールと値の一覧は、[カラーのトークンリファレンス](https://tanrei.chnotchy.com/ja/tokens/color/)にあります。