- Templates
- Additional resources
-
Digital design system
External link -
PatternFly
External link -
Work Your Way
External link
颜色
颜色不仅仅是好看而已,它们还会影响受众对我们所传达信息的语气和关联性的理解。我们的配色以红色为核心颜色,兼顾实用性和品牌个性,吸引受众与我们互动。
独特的红色
每个品牌都有自己标志性的品牌色,但很少有品牌的颜色能像红帽这样与品牌核心身份紧密相连。红色从一开始就在红帽的品牌故事中扮演着举足轻重的角色,它代表着我们对开展合作以及乐于助人的热情。
红帽红是纯正的红色(不含蓝色或绿色)。
#ee0000
RGB 238, 0, 0
CMYK 0, 98, 85, 0 Pantone 1788 C
红帽红(也称为 red-50)非常醒目,因此要谨慎使用。适度点缀的红色既能体现品牌特色,又能突出重点,不会显得过于喧宾夺主。
核心颜色
在打造具有鲜明红帽特色的设计时,我们会坚持使用核心颜色,就是那些在我们徽标中使用的、与品牌最紧密相关的颜色。红色的明暗变化和中性灰色为创造层次感和阴影效果提供了灵活性。
次要颜色
我们的次要颜色可以为设计增添活力,能够很好地配合红帽红而不会与之产生冲突。除了红帽红之外,建议最多只使用 1 到 2 种次要颜色,这样效果会更突出。
渐变效果
为了增添层次感和丰富度,我们在背景和装饰元素上使用柔和的渐变效果。渐变效果不应成为设计的主角,它的作用是锦上添花,而不是喧宾夺主。
我们的颜色使用原则
要体现红帽的设计风格,不仅仅是使用配色方案中的颜色那么简单。每种颜色的使用量和位置同样重要。要保持颜色的一致性,请遵循以下核心原则。
保持简洁
使用克制、风格化的配色。保持简洁,留出充足的留白空间,让信息更突出,让受众能够关注重点内容。
谨慎地使用红色
红色的视觉冲击力很强。与其大面积使用,不如用它来点缀设计中的关键元素。
创造平衡
用最浅的色调、最深的暗色和柔和的渐变来填充大面积元素和背景。要少量使用饱和度高的颜色,主要用于强调重点、辅助导航或增添丰富感。
考虑颜色来源
要站在整体角度观察设计中所有元素的颜色。思考它们之间的搭配效果,以及注意力的引导方向。
颜色组合
为了更容易地选择要搭配使用的颜色,我们创建了不同的颜色组合,以各种方式组合了不同配色方案中的颜色。每个项目开始时,都应该先选择其中一个组合作为起点。
注意事项
不要使用红帽配色方案之外的颜色。
不要在所有地方都使用红帽红(red-50)。红色的视觉冲击力很强,应该用它来点缀设计。
不要在同一个视觉设计中使用 2 种以上的次要颜色。颜色越少,效果越好。
不要忘记使用红帽红(red-50)。红帽的所有设计都应包含 red-50。
不要使用不符合无障碍标准的颜色。请务必检查文字和其他元素与背景色的对比度。
避免过度使用渐变效果。渐变应该用来增添适度的层次感和丰富度。
辅助色
除了核心颜色和次要颜色外,我们还有 2 个辅助色配色方案,可在必要时使用。这些颜色只能用于特定用途,不能作为次要颜色使用。
信息类配色方案
信息类配色方案用于表达状态和互动。这些颜色是功能性的,而不是装饰性的。它们主要用在界面、网页、图形和图表、报告和其他信息类视觉设计中。
用颜色提供语境
颜色可以快速传达信息或数据重点。在用户界面、幻灯片、信息图表和示意图中,我们会使用大家普遍认知的颜色含义,让用户在整个使用过程中获得一致的体验。
颜色 | 联想 | 更多信息 |
红帽 | 红色是我们的品牌色。不要用红色代表负面事物。 | |
危险、降低 | 发生了负面事件,例如破坏性错误或数值下降。 | |
提醒 | 发生了非破坏性操作或错误。 | |
警告 | 立即采取行动以避免破坏性操作或错误。 | |
成功、增加 | 发生了正面事件,例如操作成功或数值增加。 | |
链接或互动 | 点击对象或文字会转至超链接或带来状态更改。 | |
信息或备注提示 | 提供了有用信息。 | |
中性 | 按钮或信息不可用或不重要。 |
色卡
我们的配色方案分为 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
无障碍
开放和友好意味着我们要创造公平且包容的体验。红帽的所有素材,包括演示文稿幻灯片、网页、产品界面、社交媒体帖子等,都应该让所有人能无障碍地使用。
在无障碍设计中,颜色扮演着关键角色,它会影响视觉障碍用户对信息的感知和理解。因此,在作品中运用颜色时,一定经过深思熟虑再做出决定。
对比度
对比度是用比率来衡量前景色和背景色在感知亮度上的差异。对比度低会使人难以阅读或辨认信息,对视力不佳的人群来说尤其如此。信息类视觉素材(即对理解内容至关重要的视觉元素),必须符合 Web 内容无障碍指南(WCAG)AA 标准的对比度要求。
对于红帽素材,小号文字(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 之类的工具来模拟色盲人士看到的效果。
除了颜色外,还可以使用标签来标识出示意图、图表和界面的不同部分。
不要只靠颜色来传达信息。色盲人士可能无法分辨不同的颜色,这会导致他们无法获取重要信息。
视觉震动
当饱和度相近的颜色搭配在一起时,会产生视觉震动效果,让边缘看起来模糊发光。这种颜色搭配会让所有人看着都很不舒服,甚至让视觉障碍人士感到刺痛。
将明亮的颜色与饱和度较低的中性色配合使用。
不要在同一区域使用强度相似的颜色。