Brand standards

颜色

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

How we use color

独特的红色

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

红帽红是纯正的红色(不含蓝色或绿色)。

#ee0000
RGB 238, 0, 0

CMYK 0, 98, 85, 0 Pantone 1788 C

红帽红(也称为 red-50)非常醒目,因此要谨慎使用。适度点缀的红色既能体现品牌特色,又能突出重点,不会显得过于喧宾夺主。

核心颜色

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

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

次要颜色

我们的次要颜色可以为设计增添活力,能够很好地配合红帽红而不会与之产生冲突。除了红帽红之外,建议最多只使用 1 到 2 种次要颜色,这样效果会更突出。 

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

渐变效果

为了增添层次感和丰富度,我们在背景和装饰元素上使用柔和的渐变效果。渐变效果不应成为设计的主角,它的作用是锦上添花,而不是喧宾夺主。

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

我们的颜色使用原则

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

保持简洁

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

谨慎地使用红色

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

创造平衡

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

考虑颜色来源

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

颜色组合

为了更容易地选择要搭配使用的颜色,我们创建了不同的颜色组合,以各种方式组合了不同配色方案中的颜色。每个项目开始时,都应该先选择其中一个组合作为起点。

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

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

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

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

注意事项

显示颜色误用的图片:演示文稿使用的颜色超出了红帽配色方案的范围。

不要使用红帽配色方案之外的颜色。

显示颜色误用的图片:广告使用了红帽红作为背景色。

不要在所有地方都使用红帽红(red-50)。红色的视觉冲击力很强,应该用它来点缀设计。

显示颜色误用的图片:插图使用了红色和三种次要颜色。

不要在同一个视觉设计中使用 2 种以上的次要颜色。颜色越少,效果越好。

显示颜色误用的图片:只使用了次要颜色的社交媒体帖子。

不要忘记使用红帽红(red-50)。红帽的所有设计都应包含 red-50

显示颜色误用的图片:演示文稿幻灯片使用了对比度很低的颜色。

不要使用不符合无障碍标准的颜色。请务必检查文字和其他元素与背景色的对比度。

显示颜色误用的图片:使用了多种渐变效果的网站标题。

避免过度使用渐变效果。渐变应该用来增添适度的层次感和丰富度。

辅助色

除了核心颜色和次要颜色外,我们还有 2 个辅助色配色方案,可在必要时使用。这些颜色只能用于特定用途,不能作为次要颜色使用。

信息类配色方案

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

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

人物肤色配色方案

我们的目标是真实地呈现人物形象。这些颜色只能用作插画人物的肤色。为每个插画人物选择 1 个肤色系列。详细了解关于创作人物插图的指南。

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

用颜色提供语境

颜色可以快速传达信息或数据重点。在用户界面、幻灯片、信息图表和示意图中,我们会使用大家普遍认知的颜色含义,让用户在整个使用过程中获得一致的体验。

颜色联想更多信息
红色红帽红色是我们的品牌色。不要用红色代表负面事物。
danger-orange危险、降低发生了负面事件,例如破坏性错误或数值下降。
orange提醒发生了非破坏性操作或错误。
yellow警告立即采取行动以避免破坏性操作或错误。
success-green成功、增加发生了正面事件,例如操作成功或数值增加。
interaction-blue链接或互动点击对象或文字会转至超链接或带来状态更改。
purple信息或备注提示提供了有用信息。
gray中性按钮或信息不可用或不重要。
Color swatches

色卡

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

点击下面的色卡,即可复制十六进制颜色代码,您也可以下载完整的色卡文件。

我们的品牌颜色

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

核心配色方案

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

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

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

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

red-50black 背景上符合颜色对比度标准。

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

whiteteal-60 背景上符合颜色对比度标准。

red-10 上的 black 文字和图标

blackred-10 背景上符合颜色对比度标准。

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

whitepurple-60 背景上符合颜色对比度标准。

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

red-50gray-80 背景上不符合颜色对比度标准。

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

whiteteal-40 背景上不符合颜色对比度标准。

red-60 上的 black 文字和图标

blackred-60 背景上不符合颜色对比度标准。

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

whitepurple-30 背景上不符合颜色对比度标准。

色盲问题

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

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

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

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

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

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

视觉震动

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

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

将明亮的颜色与饱和度较低的中性色配合使用。

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

不要在同一区域使用强度相似的颜色。

了解更多

网站图标。

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

检查清单图标。

Web 内容无障碍指南(WCAG)

眼睛图标。

红帽视觉辅助功能