色

誰が見ても Red Hat らしいものを作るには、Red Hat ロゴにも使用され、Red Hat ブランドとの結びつきが最も密接なコアカラーを使用します。さまざまな濃淡の赤とニュートラルグレーによって、深みや陰影を柔軟に表現できます。

二次色パレットは、Red Hat レッドと競合することなく、Red Hat レッドをさらにエネルギッシュに見せ、引き立てるものです。Red Hat レッドの他に使用する二次色を 1 色または 2 色に抑えることで、よりインパクトが大きくなります。 

さらに深みや色彩を豊かにするため、背景の塗りつぶしやアクセントとしてかすかなグラデーションを使用します。グラデーションが構成全体で最も注目を集める要素とならないようにします。グラデーションは引き立て役であり、主役ではありません。

相性の良い色を選びやすくするため、さまざまなテーマでパレットの色を組み合わせたカラーコレクションを作成しました。どのプロジェクトも、まずこちらのコレクションのいずれかから始めてください。

Red Hat のカラーパレットにない色を使用しない。

Red Hat レッド (red-50) を多用しすぎない。赤は強い印象を与える色なので、アクセントカラーとして使用します。

二次色は、1 つのビジュアルで 3 色以上使用しない。色数は少ないほどよいです。

Red Hat レッド (red-50) を取り入れるのを忘れない。Red Hat が提供するものにはすべて、red-50 を含む必要があります。

利用に支障が生じるような色使いをしない。必ず背景色とテキストやその他の要素とのコントラスト比を確認してください。

グラデーションの多用は控える。グラデーションは、繊細な深みや色彩の豊かさを加えるために使用します。

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

情報パレットの用途は、ステータスとインタラクションの状態の表示に限定されています。実用性が第一であり、装飾用ではありません。これらの色は、インタフェース、Web ページ、グラフや図表、レポートなど、情報を伝えることを目的としたビジュアルに使用します。

Red Hat では、常に現実の世界の人々を表現することが重要だと考えています。これらの色は、人物のイラストの肌色としてのみ使用してください。人物 1 人のイラストにつき、1 つの肌色ファミリーを選びます。人物のイラストについて詳しくは、こちらをご覧ください。

色によって、メッセージやデータポイントをすばやく伝えることができます。ユーザーインタフェースをはじめ、スライド、インフォグラフィック、図表で、各色から連想される一般的なイメージに応じた色を使用することで、カスタマージャーニー全体に統一感が生まれます。

Red Hat ブランドを表現し、認知度を高めることを目的に使用する色です。

これらの色を使用する上では実用性が第一であり、意図された目的にのみ使用する必要があります。装飾のためのビジュアルには使用しないでください。

肌色ファミリーは、従来連想される色とは異なる表現を使用します。寒色系はピンク寄り、暖色系はイエローやブラウン寄りになっています。人物のイラストについて詳しくは、こちらをご覧ください。

色覚異常の人は、多くの人が認識できるような色の違いを識別することができません。このため、特にグラフやインタフェースでは、色のみで区別されるグラフィックはわかりにくい場合があります。最も一般的な色覚異常は、赤緑色覚異常 (第二色覚異常または第一色覚異常) および青黄色覚異常 (第三色覚異常) です。

色だけで意味を伝えようとすると、色覚異常の人にはビジュアルの内容が伝わらない可能性があります。色だけでなくテキストやアイコンも使い、さまざまな彩度の色を選んで各項目を区別するとよいでしょう。Color Oracle などのツールを使ってシミュレーションを行うことで、ビジュアルが色覚異常の人にどう見えるかを確認できます。

色に加えてラベルを使うことで、図表やインタフェースの個々のセクションを識別します。

色だけに頼ってはいけません。色覚異常の人は色を区別できないことがあり、その場合、色だけでは情報を理解してもらえません。

彩度が近い純色を一緒に使用するとハレーションを起こし、端がぼんやりと光って不明瞭になります。こうした色使いは、誰にとっても見づらく、視覚障害のある人は苦痛に感じることさえあります。

鮮やかな色には彩度の低い色や無彩色を組み合わせましょう。

彩度が近い色を同じエリア内で使用しないようにします。