カラーパレットの構成

Radix Colors を使用してカラーパレットを構成するためのガイドです。

ブランドスケールの選択

Radix には、ブランドやアクセントカラーに使用できる多くのスケールが用意されています。

白い前景テキスト用に設計されたスケール

カスタムブランドカラー

Radix Colors は、カスタマイズを目的としていません。アクセスしやすく、バランスが良く、調和がとれるように設計されています。カスタマイズすると、これらの機能が損なわれる可能性があります。

カスタムブランドカラーが必要な場合は、Radix スケールと並行してカスタムスケールを追加することをお勧めします。

たとえば、グレースケールやセマンティックスケールに Radix Colors を使用し、カスタムブランド/アクセントカラーを追加できます。

グレースケールの選択

Radix Colors は、純粋なグレーと、色付きのグレースケールをいくつか提供しています。

• グレー は純粋なグレーです
• モーヴ は紫の色相に基づいています
• スレート は青の色相に基づいています
• セージ は緑の色相に基づいています
• オリーブ はライムの色相に基づいています
• サンド は黄色の色相に基づいています

ニュートラルな組み合わせ

ニュートラルな雰囲気が必要な場合や、シンプルにしたい場合は、グレー はどの色相やパレットにもよく合います。

自然な組み合わせ

あるいは、アクセントの色相に最も近い色相で彩られたグレースケールを選択します。違いは微妙ですが、これにより、よりカラフルで調和のとれた雰囲気になります。

セマンティックスケールの選択

ほとんどのプロジェクトでは、セマンティックな意味を伝えるために色が必要になります。以下は、西洋文化でうまく機能する一般的な組み合わせです。

• エラー: 赤, ルビー, トマト, クリムゾン
• 成功: 緑, ティール, ジェイド, グラス, ミント
• 警告: 黄色, アンバー, オレンジ
• 情報: 青, インディゴ, スカイ, シアン

多くの場合、何らかの理由で、最終的にはほとんどのスケールが必要になる可能性があります。アプリで、各ユーザーに色を割り当てるマルチプレイヤーモードをサポートする場合があります。アプリに、ユーザーがタスクに色を割り当てるラベル付け機能がある場合があります。アプリで、"保留中" または "拒否" 状態を伝えるためにバッジを使用する場合があります。

Radix Colors はバランスが良く、調和するように設計されています。そのため、製品のコミュニケーションには、ほとんどの色の組み合わせがうまく機能します。

テキストスケールの選択

ステップ 11 と 12 は、それぞれ低コントラストのテキストと高コントラストのテキスト用に設計されています。必要な雰囲気に応じて、アクセントスケールまたはグレースケールを使用できます。

アクセントスケールを使用すると、よりカラフルな雰囲気になります。

グレースケールを使用すると、より機能的な雰囲気になります。

違いは微妙に見えるかもしれませんが、ページ全体のテキストでは大きな違いが生じる可能性があります。

マーケティングサイトのテキストにはアクセントスケールを使用し、アプリのテキストにはグレースケールを使用することを試してみるとよいでしょう。