色
色は、使うことで見た目が良くなるというだけでなく、オーディエンスがメッセージから感じ取るトーンや関連性の高さにも影響を与えます。Red Hat のカラーパレットは赤を基調としており、実用性と Red Hat ブランドの個性を両立させ、オーディエンスの行動を促します。
ただの赤ではない
どのブランドにもそのブランドならではのブランドカラーがありますが、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 レッドは強い印象を与える色です。そのため、スペース全体を赤で埋め尽くすのではなく、赤をアクセントカラーに使用して、構成内の重要な要素を強調します。
バランスよく
大きなオブジェクトや背景には、最も淡い色、濃い色、そしてかすかなグラデーションを使用します。最も彩度値の高い色の使用は少なめにし、何かを強調したり、ナビゲーションをサポートしたり、より色彩を豊かにしたりする場合にのみ使用します。
色を発する要素に配慮する
構成全体を見て、構成内のあらゆる要素の色に配慮します。色同士の組み合わせはどうか、またオーディエンスの注目がどこに集まるかを検討します。
カラーコレクション
相性の良い色を選びやすくするため、さまざまなテーマでパレットの色を組み合わせたカラーコレクションを作成しました。どのプロジェクトも、まずこちらのコレクションのいずれかから始めてください。
避けるべきこと
Red Hat のカラーパレットにない色を使用しない。
Red Hat レッド (red-50) を多用しすぎない。赤は強い印象を与える色なので、アクセントカラーとして使用します。
二次色は、1 つのビジュアルで 3 色以上使用しない。色数は少ないほどよいです。
Red Hat レッド (red-50) を取り入れるのを忘れない。Red Hat が提供するものにはすべて、red-50 を含む必要があります。
利用に支障が生じるような色使いをしない。必ず背景色とテキストやその他の要素とのコントラスト比を確認してください。
グラデーションの多用は控える。グラデーションは、繊細な深みや色彩の豊かさを加えるために使用します。
補助色
コアカラーと二次色に加え、必要に応じて使用できる 2 種の補助カラーパレットを用意しています。これらの色は本来の目的にのみ使用し、二次色としては使用しないでください。
情報パレット
情報パレットの用途は、ステータスとインタラクションの状態の表示に限定されています。実用性が第一であり、装飾用ではありません。これらの色は、インタフェース、Web ページ、グラフや図表、レポートなど、情報を伝えることを目的としたビジュアルに使用します。
人物パレット
Red Hat では、常に現実の世界の人々を表現することが重要だと考えています。これらの色は、人物のイラストの肌色としてのみ使用してください。人物 1 人のイラストにつき、1 つの肌色ファミリーを選びます。人物のイラストについて詳しくは、こちらをご覧ください。
色でコンテキストを伝える
色によって、メッセージやデータポイントをすばやく伝えることができます。ユーザーインタフェースをはじめ、スライド、インフォグラフィック、図表で、各色から連想される一般的なイメージに応じた色を使用することで、カスタマージャーニー全体に統一感が生まれます。
色 | 連想されるもの | 詳細 |
Red Hat | 赤は Red Hat のブランドカラーです。ネガティブなことを表現するのに赤は使用しません。 | |
危険、低下 | 中断を伴うエラーや数値の低下など、何らかのネガティブな事象が起こったことを示します。 | |
注意 | 中断を伴わないアクションやエラーが起こったことを示します。 | |
警告 | 中断を伴うアクションやエラーを避けるために、すぐに対応が必要なことを示します。 | |
成功、上昇 | アクションの成功や数値の上昇など、何らかのポジティブな事象が起こったことを示します。 | |
リンクまたは操作 | オブジェクトまたはテキストをクリックすると、ハイパーリンクまたは状態の変更につながることを示します。 | |
情報またはヒントメモ | 参考になる情報があることを示します。 | |
ニュートラル | ボタンや情報が利用できない、または重要でないことを示します。 |
色見本
カラーパレットは、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
#ca6c0f
orange-60
#9e4a06
orange-70
#732e00
#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
アクセシビリティ
オープンで使いやすいということは、公平でインクルーシブな体験を創出するということです。そのためには、プレゼンテーション・スライド、Web ページ、製品インタフェース、ソーシャルメディアへの投稿など、Red Hat のあらゆるアセットを誰もが利用できるようにする必要があります。
色はアクセシビリティにおいて重要な役割を果たします。視覚に障害を持つ利用者がどのように情報を知覚し、理解できるかに影響します。制作においてどのような色を使用するか、意識的な決定を行うことが重要です。
コントラスト
コントラストは、前景色と背景色の知覚できる明度の差を表す比率として測定されます。コントラストが低い場合、特に弱視の人にとっては文字を読んだり認識したりするのが難しくなります。情報量の多いビジュアル、つまりコンテンツを理解する上で重要な情報を伝えるビジュアルは、Web コンテンツ・アクセシビリティ・ガイドライン (WCAG) の AA 基準のコントラスト比を満たす必要があります。
Red Hat のアセットでは、小さなテキスト (17pt 以下) は最低でも 4.5:1 のコントラスト比が必要です。大きなテキスト (18pt 以上) やわかりやすいグラフィック (アイコンなど) は、最低でも 3:1 のコントラスト比が必要です。Adobe Color などのツールを使って色のコントラスト比を測定し、WCAG からテキストやその他のグラフィックの標準的なコントラスト比について学びましょう。
red-50 は、black に対するカラーコントラスト基準を満たしています。
white は、teal-60 に対するカラーコントラスト基準を満たしています。
black は、red-10 に対するカラーコントラスト基準を満たしています。
white は、purple-60 に対するカラーコントラスト基準を満たしています。
red-50 は、gray-80 に対するカラーコントラスト基準を満たしていません。
white は、teal-40 に対するカラーコントラスト基準を満たしていません。
black は、red-60 に対するカラーコントラスト基準を満たしていません。
white は、purple-30 に対するカラーコントラスト基準を満たしていません。
色覚異常
色覚異常の人は、多くの人が認識できるような色の違いを識別することができません。このため、特にグラフやインタフェースでは、色のみで区別されるグラフィックはわかりにくい場合があります。最も一般的な色覚異常は、赤緑色覚異常 (第二色覚異常または第一色覚異常) および青黄色覚異常 (第三色覚異常) です。
色だけで意味を伝えようとすると、色覚異常の人にはビジュアルの内容が伝わらない可能性があります。色だけでなくテキストやアイコンも使い、さまざまな彩度の色を選んで各項目を区別するとよいでしょう。Color Oracle などのツールを使ってシミュレーションを行うことで、ビジュアルが色覚異常の人にどう見えるかを確認できます。
色に加えてラベルを使うことで、図表やインタフェースの個々のセクションを識別します。
色だけに頼ってはいけません。色覚異常の人は色を区別できないことがあり、その場合、色だけでは情報を理解してもらえません。
ハレーション
彩度が近い純色を一緒に使用するとハレーションを起こし、端がぼんやりと光って不明瞭になります。こうした色使いは、誰にとっても見づらく、視覚障害のある人は苦痛に感じることさえあります。
鮮やかな色には彩度の低い色や無彩色を組み合わせましょう。
彩度が近い色を同じエリア内で使用しないようにします。