色は、使うことで見た目が良くなるというだけでなく、オーディエンスがメッセージから感じ取るトーンや関連性の高さにも影響を与えます。Red Hat のカラーパレットは赤を基調としており、実用性と Red Hat ブランドの個性を両立させ、オーディエンスの行動を促します。

How we use color

ただの赤ではない

どのブランドにもそのブランドならではのブランドカラーがありますが、Red Hat ほどコアアイデンティティと密接に結びついたカラーを持つブランドはまれです。赤という色は、Red Hat のストーリーにおいて、当初から重要な役割を果たしてきました。赤は、コラボレーションと人の役に立つことに対する Red Hat の情熱を表しています。

Red Hat レッドは純粋な赤です (青や緑は含まれません)。

#ee0000
RGB 238, 0, 0

CMYK 0, 98, 85, 0 Pantone 1788 C

Red Hat レッド (red-50 とも言います) は人の目を引く色なので、使い方に注意が必要です。赤をアクセントカラーにすることで、オーディエンスに Red Hat ブランドであることが伝わり、過剰な色合いになることなく重要なポイントを強調できます。

コアカラー

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

濃淡が異なる赤、白、黒の画像。

二次色

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

オレンジ、黄色、ティール、紫の画像。

グラデーション

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

パレットに含まれるグラデーションのオプションの一部を示した画像。

色の使い方

Red Hat らしさを出すには、パレットにある色を使うだけでは十分とは言えません。それぞれの色をどこに、どれくらい使用するのかも同じくらい重要です。統一感のある色使いにするため、以下の基本原則に従ってください。

色使いはシンプルに

控えめで様式化された色を使います。全体をシンプルに保ち、たっぷりと余白を設けることで、メッセージにスポットライトが当たり、オーディエンスが重要なポイントに集中できるようにします。

赤は意図的に使う

Red Hat レッドは強い印象を与える色です。そのため、スペース全体を赤で埋め尽くすのではなく、赤をアクセントカラーに使用して、構成内の重要な要素を強調します。

バランスよく

大きなオブジェクトや背景には、最も淡い色、濃い色、そしてかすかなグラデーションを使用します。最も彩度値の高い色の使用は少なめにし、何かを強調したり、ナビゲーションをサポートしたり、より色彩を豊かにしたりする場合にのみ使用します。

色を発する要素に配慮する

構成全体を見て、構成内のあらゆる要素の色に配慮します。色同士の組み合わせはどうか、またオーディエンスの注目がどこに集まるかを検討します。

カラーコレクション

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

Core light
カラーパレットに、コアライトを使用する場合の 3 通りの色使いが示されています。背景には gray-10 か白を使用できます。テキストには黒か red-50 を使用できます。その他のグラフィックについては、あらゆる濃淡の Red Hat レッド、黒、白を使用できます。右側には、エクスプレッシブダーク・カラーコレクションの使用例として、4 つの画像があります。
Core dark
カラーパレットに、コアダークを使用する場合の 3 通りの色使いが示されています。背景には黒か gray-80 を使用できます。テキストには白か red-50 を使用できます。その他のグラフィックについては、あらゆる濃淡の Red Hat レッド、黒、白を使用できます。右側には、コアダーク・カラーコレクションの使用例として、4 つの画像があります。
Core red
カラーパレットに、コアレッドを使用する場合の 3 通りの色使いが示されています。背景には red-10 か白を使用できます。テキストには黒か red-50 を使用できます。その他のグラフィックについては、あらゆる濃淡の Red Hat レッド、黒、白を使用できます。右側には、コアレッド・カラーコレクションの使用例として、5 つの画像があります。
Expressive light
カラーパレットに、エクスプレッシブライトを使用する場合の 3 通りの色使いが示されています。背景には gray-10、red-10、または白を使用できます。テキストには黒、purple-80、または red-50 を使用できます。その他のグラフィックについては、あらゆる濃淡の Red Hat レッド、紫、黒、白、ティール、オレンジ、黄色を使用できます。右側には、エクスプレッシブダーク・カラーコレクションの使用例として、3 つの画像があります。
Expressive dark
カラーパレットに、エクスプレッシブダークを使用する場合の 3 通りの色使いが示されています。背景には黒か purple-80 を使用できます。テキストには白か赤を使用できます。その他のグラフィックについては、あらゆる濃淡の Red Hat レッド、紫、黒、白、ティール、オレンジ、黄色を使用できます。右側には、エクスプレッシブダーク・カラーコレクションの使用例として、3 つの画像があります。
Interface light
カラーパレットに、ライトインタフェースを使用する場合の 3 通りの色使いが示されています。最も一般的な背景色は、白、gray-10、および gray-30 です。テキストには gray-95、gray-80、interaction-blue-50、または red-50 を使用できます。その他のグラフィックについては、Red Hat カラーパレットのその他の色をあらゆる濃淡で使用できます。右側には、コアレッド・カラーコレクションの使用例として、3 つの画像があります。

ユーザーインタフェースの色に関するより詳しい情報は、ux.redhat.com (Web デザイン関連) および PatternFly (製品デザイン関連) を参照してください。

Interface dark
カラーパレットに、ダークインタフェースを使用する場合の 3 通りの色使いが示されています。最も一般的な背景色は、gray-95、gray-80、および gray-70 です。テキストには白、gray-30、interaction-blue-20、または red-50 を使用できます。その他のグラフィックについては、Red Hat カラーパレットのその他の色をあらゆる濃淡で使用できます。右側には、ダークインタフェース・カラーコレクションの使用例として、3 つの画像があります。

ユーザーインタフェースの色に関するより詳しい情報は、ux.redhat.com (Web デザイン関連) および PatternFly (製品デザイン関連) を参照してください。

避けるべきこと

誤用を示す画像:Red Hat のカラーパレットにない色が使用されているプレゼンテーション。

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

誤用を示す画像:Red Hat レッドを背景にした広告の例。

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

誤用を示す画像: 赤と 3 色の二次色を使ったイラスト。

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

誤用を示す画像:二次色のみを使用したソーシャルメディアへの投稿。

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

誤用を示す画像: コントラストが低い配色のプレゼンテーション・スライド。

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

誤用を示す画像:複数色のグラデーションを用いた Web サイトヘッダー。

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

補助色

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

情報パレット

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

information-blue、success-green、danger-orange の画像。

人物パレット

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

濃淡が異なる寒色系と暖色系の肌色の画像。

色でコンテキストを伝える

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

連想されるもの詳細
redRed Hat赤は Red Hat のブランドカラーです。ネガティブなことを表現するのに赤は使用しません。
danger-orange危険、低下中断を伴うエラーや数値の低下など、何らかのネガティブな事象が起こったことを示します。
orange注意中断を伴わないアクションやエラーが起こったことを示します。
yellow警告中断を伴うアクションやエラーを避けるために、すぐに対応が必要なことを示します。
success-green成功、上昇アクションの成功や数値の上昇など、何らかのポジティブな事象が起こったことを示します。
interaction-blueリンクまたは操作オブジェクトまたはテキストをクリックすると、ハイパーリンクまたは状態の変更につながることを示します。
purple情報またはヒントメモ参考になる情報があることを示します。
grayニュートラルボタンや情報が利用できない、または重要でないことを示します。
Color swatches

色見本

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

下の色見本をクリックすると、16 進コードがクリップボードにコピーされます。見本ファイルをダウンロードすることもできます。

Red Hat のブランドカラー

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

コアパレット

red-10

#fce3e3

red-20

#fbc5c5

red-30

#f9a8a8

red-40

#f56e6e

red-50
(Red Hat レッド)

#ee0000
RGB 238 0 0
CMYK 0 98 85 0
Pantone 1788C

red-60

#a60000

red-70

#5f0000

red-80

#3f0000

white

#ffffff
RGB 255 255 255
CMYK 0 0 0 0
Pantone White

gray-10

#f2f2f2

gray-20

#e0e0e0

gray-30

#c7c7c7

gray-40

#a3a3a3

gray-50

#707070

gray-60

#4d4d4d

gray-70

#383838

gray-80

#292929

gray-90

#1f1f1f

gray-95
(ux black)

#151515

black

#000000
RGB 0 0 0
CMYK 60 40 40 100
Pantone Black C

二次色パレット

orange-10

#ffe8cc

orange-20

#fccb8f

orange-30

#f8ae54

orange-40

#f5921b
RGB 245 146 27
CMYK 0 50 100 0
Pantone 144C

orange-50

#ca6c0f

orange-60

#9e4a06

orange-70

#732e00

orange-80

#4d1f00

yellow-10

#fff4cc

yellow-20

#ffe072

yellow-30

#ffcc17
RGB 248 204 23
CMYK 0 15 100 0
Pantone 108C

yellow-40

#dca614

yellow-50

#b98412

yellow-60

#96640f

yellow-70

#73480b

yellow-80

#54330b

teal-10

#daf2f2

teal-20

#b9e5e5

teal-30

#9ad8d8

teal-40

#63bdbd

teal-50

#37a3a3
RGB 55 163 163
CMYK 80 10 30 10
Pantone 2234C

teal-60

#147878

teal-70

#004d4d

teal-80

#003333

purple-10

#ece6ff

purple-20

#d0c5f4

purple-30

#b6a6e9

purple-40

#876fd4

purple-50

#5e40be
RGB 94 64 190
CMYK 85 80 0 0
Pantone 2097C

purple-60

#3d2785

purple-70

#21134d

purple-80

#1b0d33

補助色

情報パレット

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

success-green-10

#e9f7df

success-green-20

#d1f1bb

success-green-30

#afdc8f

success-green-40

#87bb62

success-green-50

#63993d
RGB 99 153 61
CMYK 70 0 100 10
Pantone 7737C

success-green-60

#3d7317

success-green-70

#204d00

danger-orange-10

#ffe3d9

danger-orange-20

#fbbea8

danger-orange-30

#f89b78

danger-orange-40

#f4784a

danger-orange-50

#f0561d
RGB 240 86 29
CMYK 0 83 100 0
Pantone 165C

danger-orange-60

#b1380b

danger-orange-70

#731f00

interaction-blue-10

#e0f0ff

interaction-blue-20

#b9dafc

interaction-blue-30

#92c5f9

interaction-blue-40

#4394e5

interaction-blue-50

#0066cc
RGB 0 102 204
CMYK 85 55 0 5
Pantone 2387C

interaction-blue-60

#004d99

interaction-blue-70

#003366

人物パレット

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

cool-tone-10

#ffe3dc

cool-tone-20

#f7c8bb

cool-tone-30

#e8a997

cool-tone-40

#ce8873

cool-tone-50

#a66552

cool-tone-60

#724335

cool-tone-70

#40251d

warm-tone-10

#ffe9dc

warm-tone-20

#f9d5c0

warm-tone-30

#edbea1

warm-tone-40

#d8a381

warm-tone-50

#b88564

warm-tone-60

#8e6549

warm-tone-70

#664934

Accessibility

アクセシビリティ

オープンで使いやすいということは、公平でインクルーシブな体験を創出するということです。そのためには、プレゼンテーション・スライド、Web ページ、製品インタフェース、ソーシャルメディアへの投稿など、Red Hat のあらゆるアセットを誰もが利用できるようにする必要があります。

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

コントラスト

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

Red Hat のアセットでは、小さなテキスト (17pt 以下) は最低でも 4.5:1 のコントラスト比が必要です。大きなテキスト (18pt 以上) やわかりやすいグラフィック (アイコンなど) は、最低でも 3:1 のコントラスト比が必要です。Adobe Color などのツールを使って色のコントラスト比を測定し、WCAG からテキストその他のグラフィックの標準的なコントラスト比について学びましょう。

黒の背景に red-50 のテキストとアイコン

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

teal-60 の背景に白のテキストとアイコン

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

red-10 の背景に黒のテキストとアイコン

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

purple-80 の背景に白のテキストとアイコン

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

gray-80 の背景に red-50 のテキストとアイコン

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

teal-40 の背景に白のテキストとアイコン

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

red-60 の背景に黒のテキストとアイコン

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

purple-30 の背景に白のテキストとアイコン

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

色覚異常

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

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

円グラフのそれぞれのセクションにラベルが付けられている。

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

誤用を示す画像: 色分けされたキーを使った円グラフ。ラベルがグラフのセクションを指していない。

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

ハレーション

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

ハレーションが生じないコントラストの高い配色の例。

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

誤用を示す画像:ハレーションを生じさせる、コントラストが低い配色の例。

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

詳細はこちら

Web サイトアイコン。

デジタルデザインにおけるアクセシビリティの基本

チェックリストアイコン。

Web コンテンツ・アクセシビリティ・ガイドライン (WCAG)

目のアイコン。

Red Hat における視覚的アクセシビリティ