Red Hat のカラーパレットは 10 色のカラーファミリーで構成されています。それぞれのカラーファミリーは 7 色の単色で構成されており、そのほかに白、黒、グレーがあります。カラーファミリーは、使用方法に基づいて、コアカラー、二次色、補助色の 3 つのサブパレットに分類されています。

各色は淡い色から濃い色へと 10 から順に数字で番号が振られています。異なるファミリーでも同じ番号を共有する色は、彩度と値が近いため、視覚的な比重が似ています。

Red Hat の中心的なカラーである赤、黒、白は Red Hat ロゴで使用されており、Red Hat ブランドと強く結びついています。どこから手を付けたらよいかわからない場合は、この中心的なカラーから始めてください。

主要なブランドカラーは red-50 で、Red Hat レッドとも呼ばれています。いくつかの例外はありますが、Red Hat のビジュアルは常に red-50 を含み、Red Hat ブランドとの結びつけを表現するものとします。

Red Hat のビジュアルとインタフェースは、他のコンテンツを目立たせるため、背景として黒、白、グレーを使用することがよくあります。黒と白の中間のニュートラルグレイには 10 段階あり、ユーザー・インタフェースに奥行、影、ライトモードおよびダークモードを柔軟に作成できます。

余白を活用する

Red Hat のブランドの個性と同様、Red Hat のデザイン言語h亜オープンで風通しの良いレイアウトに重点を置いています。ビジュアルに使われている色に関係なく、余白を大切にしましょう。シンプルですっきりとしたレイアウトは、見る人の注意を重要な要素に引き付けます。

意図的に赤を使う

赤は強い印象を与える色です。Red Hat レッドで広いスペースを埋め尽くすのではなく、ビジュアルの重要な部分を目立たせるために、アクセントになるような使い方をしましょう。

重要な警告やエラーメッセージに注意を引き付ける必要がある場合は、Red Hat レッドではなく、danger のオレンジを使用してください。ステータスの色については後述します。

濃淡をアクセントとして使う

赤、黒、白をアクセントとして使い、影やハイライトを作ったり、背景のような大きなスペースを埋めたりできます。こうすることで、Red Hat レッドが際立ちます。

無彩色の背景を使い、十分な余白を取りましょう。

red-50 を使って重要な要素を強調し、見る人の注意を引きます。

ビジュアル全体を red-50 で塗りつぶさないようにしてください。赤は強い印象を与える色です。余白を Red Hat レッドで塗りつぶす前に、無彩色の背景を使用してみましょう。

ビジュアルの中で、赤色として濃い赤や淡い赤だけを使用しないようにしてください。常に Red Hat レッドを取り入れてください。

red-50 だけを使用したデザインにしないようにしてください。すべてを目立たせようとすると、結果として何も目立たなくなります。

Red Hat を最も強く印象づけるのはコアカラーですが、場合によっては違う色へと範囲を広げる必要があります。Red Hat の二次色パレットには、オレンジ、イエロー、ティール、ブルー、パープルの 5 つのカラーファミリーがあります。

Red Hat が目指すビジュアルは、色調を抑えた様式化されたカラーパレットによって作られます。こうすることでビジュアルをシンプルに保ちつつ、Red Hat レッドを際立たせることができます。すべてのプロジェクトにおいて、コアカラーとともに使用する二次色ファミリーは 2 色までとします。

二次色を選ぶ際、何から始めたらいいかわからない場合は、Red Hat のカラーコレクションを利用してみましょう。これらのコレクションでともに使用されているファミリーは互いを引き立たせ、組み合わせても Red Hat ブランドの精神を維持できます。

ビジュアルに使用する二次色のファミリーは最大 2 つまでとします。このイラストでは、赤、オレンジ、パープルだけが使用されています。

2 色以上の二次色ファミリーを使用しないでください。雑多な印象になります。

Red Hat のロゴが含まれている場合でも、Red Hat ブランドと結びつけるために、ビジュアルのアクセントとして常に red-50 を含めます。

二次色のみを使用した Red Hat アセットを作成しないようにしてください。

ビジュアル全体で淡い色と濃い色を使って違いを表しましょう。このグラフでは、red-50、blue-70、orange-30 を使用しています。

同じ彩度の色を同じビジュアル内で使いすぎないようにしましょう。色が振動し、階層性が失われます。

鮮やかな色を背景にあまり使わないようにして、ビジュアルの最も重要な部分を目立たせましょう。

鮮やかな色を背景に使わないようにしましょう。強すぎる印象になることがあります。

コアカラーと二次色に加え、必要に応じてより具体的なものを表現するために使用できる 2 種の補助カラーパレットを用意しています。これらの色は本来の目的にのみ使用し、二次色としては使用しないでください。

人物パレット

Reg Hat では、現実の世界の人々を常に正確に表現することが重要だと考えています。そのため、イラストの他の部分で使用するカラーパレットを問わず、現実的な肌の色を使う必要があります。人物のイラストについて詳しくは、こちらをご覧ください。

人物 1 人のイラストにつき、1 つの肌色ファミリーを選びます。肌色ファミリーには、他の色とは異なる表示名が使用されています。寒色系 (cool-tone) はピンク寄り、暖色系 (warm-tone) はイエローやブラウン寄りにになっています。

人物パレットの色は、イラストの人物の肌にのみ使用してください。

人物パレットの色を肌以外の目的に使用しないでください。

各イラストの人物に、寒色か暖色のどちらかを選びます。

同じイラストの中で寒色と暖色を組み合わせて使用しないでください。

ステータスパレット

ビジュアルで危険や成功に注意を喚起する必要がある場合には、ステータスカラーを使用します。これらの色はインタフェースで最もよく使われますが、必要に応じて他の用途にも使用できます。Danger は、エラーやその他の問題が発生したことを示すためにのみ使用します。Success は、何かが正しく完了したときに使用します。

注：Success は、DEI コミュニティや持続可能性に関するデザインのように、グリーンがデザインにどうしても必要な限られた状況でのみ使用できます。

ステータスパレットの色は、エラーや成功などの重要な情報を示す場合にのみ使用します。

ステータスパレットの色を他の要素に使用しないでください。

ステータスカラーをアクセントとして使って利用者の目を引きます。

ステータスカラーをビジュアルのメインカラーや背景として使用しないでください。

Red Hat は、インクルーシブな環境と経験を創造することの大切さを信じています。包括性を重視するということは、プレゼンテーションスライド、文書、Web ページ、製品インタフェース、ソーシャルメディアへの投稿など、Red Hat のすべてのアセットに誰もがアクセスできるようにしなければなりません。

色はアクセシビリティにおいて重要な役割を果たします。視覚に障害を持つ利用者がどのように情報を知覚し、理解できるかに影響します。制作においてどのような色を使用するか、意識的な決定を行うことが重要です。

コントラストは、前景色と背景色の知覚できる明度の差を表す比率として測定されます。コントラストが低い場合、特に弱視の人にとっては文字を読んだり認識したりするのが難しくなります。情報量の多いビジュアル、つまりコンテンツを理解する上で重要な情報を伝えるビジュアルは、Web コンテンツ・アクセシビリティ・ガイドライン (WCAG) の AA 基準のコントラスト比を満たす必要があります。

Red Hat のアセットでは、小さなテキスト (17pt 以下) は最低でも 4.5：1 のコントラスト比が必要です。大きなテキスト (18pt 以上) や分かりやすいグラフィック (アイコンなど) は、最低でも 3：1 のコントラスト比が必要です。

Adobe Color のようなツールを使って色のコントラスト比を測定し、WCAG からテキストやその他のグラフィックの標準的なコントラスト比について学びましょう。

色覚異常の人は、多くの人が認識できるような色の違いを識別することができません。このため、特にグラフやインタフェースでは、色別で分けられているグラフィックを区別するのが難しくなることがあります。

最も一般的な色覚異常は、赤緑色覚異常 (第二色覚異常または第一色覚異常) および青黄色覚異常 (第三色覚異常) です。

色だけで意味を伝えようとすると、色覚異常の人はそのビジュアルを理解できないかもしれません。色だけでなくテキストやアイコンも使い、さまざまな彩度の色を選んで各項目を区別すると良いでしょう。Color Oracle のようなツールを使って色覚異常のシミュレーションを行い、ビジュアルが色覚異常の人にどのように見えるかを理解しましょう。

red-50 は、black に対するカラーコントラスト基準を満たしています。

white は、teal-60 に対するカラーコントラスト基準を満たしています。

red-50 は、blue-10 に対するカラーコントラスト基準を満たしています。

white は、purple-60 に対するカラーコントラスト基準を満たしています。

red-50 は、gray-80 に対するカラーコントラスト基準を満たしていません。

white は、teal-40 に対するカラーコントラスト基準を満たしていません。

red-50 は、blue-70 に対するカラーコントラスト基準を満たしていません。

white は、purple-30 に対するカラーコントラスト基準を満たしていません。

Red Hat のすべてのアセットとデザインシステムは同じカラーパレットを共有していますが、特定のニーズを満たすために異なる方法で色を使用する場合があります。

プレゼンテーションにおける色

プレゼンテーションは、顧客やパートナーと Red Hat ブランドの最初の接点となることがあります。プレゼンテーションは Red Hat を体現する見た目であるべきであり、アクセシビリティのベストプラクティスにも従う必要があります。Red Hat のプレゼンテーション・テンプレートには、推奨カラーコレクションが含まれています。

Red Hat のプレゼンテーション・テンプレート (Red Hat 認証情報が必要です)

イラストにおける色

Red Hat では、複雑なテクノロジーを視覚化したり、微妙な違いがあるアイデアを説明したりするためにイラストを使用します。イラストのアクセントカラーにコアカラーの赤を使用すると Red Hat らしさを表現できます。さらに二次色を使用すると、ストーリーに適切なトーンを加えることができます。

Red Hat のイラスト基準

ユーザーエクスペリエンスにおける色

Red Hat の Web プロパティは、デザイントークンを介して Red Hat のカラーパレットを適用し、Web アクセシビリティ標準に従ってスクリーンに最適化された視聴体験を提供します。

ux.redhat.com にアクセス