Brand standards

颜色

颜色不仅仅是好看而已，它们还会影响受众对我们所传达信息的语气和关联性的理解。我们的配色以红色为核心颜色，兼顾实用性和品牌个性，吸引受众与我们互动。

概述

独特的红色

每个品牌都有自己标志性的品牌色，但很少有品牌的颜色能像红帽这样与品牌核心身份紧密相连。红色从一开始就在红帽的品牌故事中扮演着举足轻重的角色，它代表着我们对开展合作以及乐于助人的热情。

红帽®红是纯正的红色（不含蓝色或绿色）。

#ee0000
RGB 238, 0, 0

CMYK 0, 98, 85, 0 Pantone 1788 C

红帽红（也称为 red-50）非常醒目，因此要谨慎使用。red-50 的点缀应融入我们每一件创作中，它既能彰显品牌身份，又能突出重点，同时避免造成视觉压迫感。

核心颜色

要打造具有鲜明红帽特色的设计，请坚持使用我们的核心颜色，就是那些在我们徽标中使用的、与品牌最紧密相关的颜色。红色的明暗变化和中性灰色为创造层次感和阴影效果提供了灵活性。

显示了红色、白色和黑色明暗色调的图片。

表现型颜色

表现型颜色必须与核心颜色搭配使用，不可单独出现，它们能为设计注入层次感与活力。这些颜色的选用是为了辅助并衬托红帽红，而非与之争夺视觉焦点。

次要颜色

显示了橙色、黄色、青色和紫色的图片。

我们的次要配色方案由橙色、黄色、青色和紫色的明暗色调组成。为获得最佳视觉效果，请在单个构图或应用中仅使用 1 到 2 种次要颜色。

渐变效果

显示了配色方案中几种渐变效果的图片。

在混合风格体系中，部分核心颜色与次要颜色相互融合，形成独特的渐变效果，常用于营造细腻的视觉点缀与背景层次。渐变效果不应成为设计的主角，它的作用是锦上添花，而不是喧宾夺主。

辅助色

除了核心颜色和次要颜色外，我们还有 2 个辅助色配色方案。这些颜色只应用于既定目的，不可作为表现型颜色使用。

信息类配色方案

信息类配色方案用于表达状态和互动。这些颜色是功能性的，而不是装饰性的。它们主要用在界面、网页、图形和图表、报告和其他信息类视觉设计中。

一个显示了 information-blue、success-green 和 danger-orange 的图片。

人物配色方案

我们的目标是真实地呈现人物形象。这些颜色只能用作插画人物的肤色。对描绘的每个人物选择 1 个皮肤色调系列。 详细了解人物插图。

一个显示了冷色调和暖色调的各种明暗变化的图片。

如何使用颜色

要体现红帽的设计风格，不仅仅是使用配色方案中的颜色那么简单。每种颜色的使用量和位置同样重要。要保持颜色的一致性，请遵循以下核心原则。

保持简洁

使用克制、风格化的配色。保持简洁，留出充足的留白空间，让信息更突出，让受众能够关注重点内容。

谨慎地使用红色

红色的视觉冲击力很强。与其大面积使用，不如用它来点缀设计中的关键元素。

创造平衡

用最浅的色调、最深的暗色和柔和的渐变来填充大面积元素和背景。要少量使用饱和度高的颜色，主要用于强调重点、辅助导航或增添丰富感。

考虑颜色来源

要站在整体角度观察设计中所有元素的颜色。思考它们之间的搭配效果，以及注意力的引导方向。

颜色组合

这些组合以各种方式结合了不同配色方案中的色彩，让您能够更轻松地选择要搭配使用的颜色。每个项目开始时，都应该先选择其中一个组合作为起点。

主色明亮版
这个配色板展示了在主色明亮版场景中使用颜色的三种方法。背景色可以是 gray-10 或 white。文字可以是 black 或 red-50。其他图形可以是红帽红、黑色或白色的任意明暗变化。右边是 4 张使用创意风格暗色版颜色组合的示例图片。
主色暗色版
这个配色板展示了在主色暗色版场景中使用颜色的三种方法。背景色可以是 black 或 gray-80。文字可以是 white 或 red-50。其他图形可以是红帽红、黑色或白色的任意明暗变化。右边是 4 张使用主色暗色版颜色组合的示例图片。
主色红色版
这个配色板展示了在主色红色版场景中使用颜色的三种方法。背景色可以是 red-10 或 white。文字可以是 black 或 red-50。其他图形可以是红帽红、黑色或白色的任意明暗变化。右边是 5 张使用主色红色版颜色组合的示例图片。
创意风格明亮版
这个配色板展示了在创意风格明亮版场景中使用颜色的三种方法。背景色可以是 gray-10、red-10 或 white。文字可以是 black、purple-80 或 red-50。其他图形可以是红帽红、紫色、黑色、白色、青色、橙色和黄色的任意明暗变化。右边是 3 张使用创意风格暗色版颜色组合的示例图片。
创意风格暗色版
这个配色板展示了在创意风格暗色版场景中使用颜色的三种方法。背景色可以是 black 或 purple-80。文字可以是 white 或 red。其他图形可以是红帽红、紫色、黑色、白色、青色、橙色和黄色的任意明暗变化。右边是 3 张使用创意风格暗色版颜色组合的示例图片。
界面明亮版
这个配色板展示了在界面明亮版场景中使用颜色的三种方法。最常用的背景颜色是 white、gray-10 和 gray-30。文字可以是 gray-95、gray-80、interaction-blue-50 或 red-50。其他图形可以是红帽配色方案中任何其他颜色的任意明暗变化。右边是 3 张使用主色红色版颜色组合的示例图片。

有关用户界面颜色的更多具体信息，请访问 ux.redhat.com（针对 Web 设计）和 PatternFly（针对产品设计）。

 界面暗色版
这个配色板展示了在界面暗色版场景中使用颜色的三种方法。最常用的背景颜色是 gray-95、gray-80 和 gray-70。文字可以是 white、gray-30、interaction-blue-20 或 red-50。其他图形可以是红帽配色方案中任何其他颜色的任意明暗变化。右边是 3 张使用界面暗色版颜色组合的示例图片。

有关用户界面颜色的更多具体信息，请访问 ux.redhat.com（针对 Web 设计）和 PatternFly（针对产品设计）。

避免事项

显示颜色误用的图片：一张演示文稿幻灯片，其中的饼图使用了非红帽配色方案中的颜色。

错误用法：不要使用红帽配色方案之外的颜色。

显示颜色误用的图片：一张完全使用红色背景、红色渐变以及红色细节的图片。

错误用法：不要在所有地方都使用红帽红。红色的冲击感很强，应该用它来点缀设计。

显示颜色误用的图片：一张图片中包含白色红帽 logo，且整体画面未使用任何红色元素。

错误用法：别忘了使用红帽红。红帽的所有设计都应包含这个颜色。

显示颜色误用的图片：一张网站屏幕截图，其背景使用了青色到红色的满版渐变。

错误用法：不要过度使用渐变效果。渐变应该用来增添适度的层次感和丰富度。如需了解更多信息，请参阅混合风格手册。

显示颜色误用的图片：一张拼贴画中，基础形状采用了黄色到青色的渐变效果。

错误用法：请勿创建新的渐变效果。仅允许使用混合风格手册中指定的渐变效果。

显示颜色误用的图片：使用红帽的自定义 Firefly 模型生成的 AI 3D 对象，但采用了我们的配色方案之外的颜色。

错误用法：请勿直接使用未经颜色评估与调整的 AI 工具生成图像。即使是通过红帽自定义 Firefly 模型创建的此类图像，其原始色彩也不符合我们的颜色配色方案。

用颜色提供语境

颜色可以快速传达信息或数据重点。在用户界面、幻灯片、信息图表和示意图中，可使用以下广为人知的颜色关联含义，让用户在整个使用过程中获得一致的体验。

颜色关联含义详细说明
red红帽红色是我们的品牌色。不要用红色代表负面事物。
danger-orange错误、下降或失败发生了负面事件，例如破坏性错误或数值下降。
orange提醒发生了非破坏性操作或错误。
yellow警告立即采取行动以避免破坏性操作或错误。
success-green成功、增长发生了正面事件，例如操作成功或数值增加。
teal一般或中性按钮或信息不具有严重性等级。
interaction-blue链接或互动点击对象或文字会转至超链接或带来状态更改。
purple信息或备注提示提供了有用信息。
gray无效状态按钮或信息不可用或不重要。
色卡

色卡

我们的配色方案分为 11 个色系。每个颜色按照从浅到深用数字标记，最浅的颜色编号为 10。不同色系中编号相同的颜色，在饱和度和明度上相近，视觉效果也比较接近。

点击下面的色卡，即可复制十六进制颜色代码，您也可以下载完整的色卡文件（需要红帽凭据）。

RGB、CMYK 和 Pantone 值（需要登录）

下载 ASE 文件（需要登录）

访问我们的 Adobe CC 库（需要登录）

我们的品牌颜色

这些是我们用来展现红帽品牌形象、提升品牌辨识度的专属颜色。

核心配色方案

red-10

#fce3e3

red-20

#fbc5c5

red-30

#f9a8a8

red-40

#f56e6e

red-50
（红帽红）

#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

success-green-80

#183301

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

danger-orange-80

#4c1405

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

interaction-blue-80

#032142

人物配色方案

我们对肤色的描述方式与传统的色彩分类不同：冷色调偏向粉色系，而暖色调偏向黄色和棕色系。 详细了解人物插图。

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 内容无障碍指南（WCAG）AA 标准的对比度要求。

对于红帽素材，小号文字（17pt 或更小）需要至少达到 4.5:1 的对比度。大号文字（18pt 或更高）和信息类图形（如图标）需要至少达到 3:1 的对比度。您可以使用 Adobe Color 之类的工具来测量颜色的对比度，并参考 WCAG，了解有关文字和其他图形的标准对比度的更多信息。

Adobe Color
WCAG 文字对比度
WCAG 图形对比度
black 背景上的 red-50 文字和图标

正确用法：red-50 符合 black 为底色的颜色对比度标准。

teal-60 背景上的 white 文字和图标

正确用法：white 符合 teal-60 为底色的颜色对比度标准。

red-10 背景上的 black 文字和图标

正确用法：black 符合 red-10 为底色的颜色对比度标准。

purple-80 背景上的 white 文字和图标

正确用法：white 符合 purple-60 为底色的颜色对比度标准。

gray-80 背景上的 red-50 文字和图标

错误用法：red-50 不符合 gray-80 为底色的颜色对比度标准。

teal-40 背景上的 white 文字和图标

错误用法：white 不符合 teal-40 为底色的颜色对比度标准。

red-60 背景上的 black 文字和图标

错误用法：black 不符合 red-60 为底色的颜色对比度标准。

purple-30 背景上的 white 文字和图标

错误用法：white 不符合 purple-30 为底色的颜色对比度标准。

色盲

色盲人士无法像大多数普通人那样感知颜色的差异。如果信息仅通过颜色来区分，特别是在图表或界面设计中，他们就很难理解内容。最常见的色盲是红绿色视觉缺陷（绿色盲或红色盲）和蓝黄色视觉缺陷（蓝色盲）。

如果只靠颜色来传达信息，色盲人士可能无法理解您的视觉设计。建议您在使用颜色的同时，配合使用文字或图标来传达信息，并选择不同饱和度的颜色来区分内容。可以使用 Color Oracle 之类的工具来模拟色盲人士看到的效果。

Color Oracle
一个饼图，用标签标识出图表中对应的部分。

正确做法：除了颜色外，还可以使用标签来标识出示意图、图表和界面的不同部分。

显示颜色误用的图片：一个饼图，只用不同颜色标识出图中的各部分。没有用标签指向图表中对应的部分。

错误做法：不要只靠颜色来传达信息。色盲人士可能无法分辨不同的颜色，这会导致他们无法获取重要信息。

视觉震动

当饱和度相近的颜色搭配在一起时，会产生视觉震动效果，让边缘看起来模糊发光。这种颜色搭配会让所有人看着都很不舒服，甚至让视觉障碍人士感到刺痛。

不会产生视觉震动的高对比度颜色示例。

正确做法：将明亮的颜色与饱和度较低的中性色配合使用。

显示颜色误用的图片：低对比度颜色产生视觉震动的示例。

错误做法：不要在同一区域使用强度相似的颜色。

了解更多

网站图标。

数字设计中的无障碍基础知识

检查清单图标。

Web 内容无障碍指南（WCAG）

眼睛图标。

红帽视觉辅助功能