不容错过的更新:Office 2016 与 Office 2019 支持终止

立即阅读
我们利用人工智能进行网站翻译,虽然我们力求准确,但不一定总是 100%精确。感谢您的理解。

颜色

我们的调色板植根于我们的历史,也是我们外观的基础。它可以用来展现大胆、自信的风采,也可以用来传达明确的专业知识。

我们的调色板可以支持各种视觉场景和媒介,同时保持清晰的一致性。应避免使用调色板的色调、透明色或不透明色。而应坚持使用指定的色调。


小学

我们的主要调色板是创意的基础,应代表所有作品中最强烈的色调。


色调

为灵活起见,3 种主要色板有不同的色调值可供选择。请勿着色或添加透明度,请按原样使用。

黑与白

黑色 黑色 100
HEX#000000
CMYK60 50 40 100
White White 100
HEX#FFFFFF
CMYK0 0 0 0

中性色调

中性 1200
HEX#0C121D
CMYK100 79 44 93
中性 1100
HEX#141B27
CMYK88 76 30 82
中性 1000
HEX#172234
CMYK95 72 15 67
中性900
HEX#24324B
CMYK95 74 7 44
中性 800
HEX#344565
CMYK78 58 6 32
中性700
HEX#475B81
CMYK60 40 5 20
中性600
HEX#607497
CMYK43 25 3 8
中性500
HEX#A9B2C4
CMYK34 17 2 7
中性 400
HEX#C7CCD5
CMYK24 12 2 6
中性 300
HEX#DEE0E4
CMYK14 7 3 5
中性 200
HEX#EBECEE
CMYK4 2 3 4
中性 100
HEX#F8F9F9
CMYK2 1 2 2

蓝色色调

P
午夜 蓝 1200
HEX#050F22
CMYK100 80 0 90
蓝色 1100
HEX#091B3B
CMYK100 79 12 70
P
海军蓝 蓝色 1000
HEX#0D2654
CMYK100 79 12 59
蓝色900
HEX#123D8B
CMYK100 75 2 18
蓝色 800
HEX#1854C3
CMYK100 75 0 0
P
蓝色 蓝色700
HEX#1D6BFC
CMYK90 48 0 0
蓝色 600
HEX#357BFC
CMYK88 40 0 0
蓝色 500
HEX#5690FD
CMYK87 30 0 0
蓝色 400
HEX#77A6FD
CMYK85 21 0 0
蓝色 300
HEX#A5C4FE
CMYK60 6 0 0
蓝色 200
HEX#C6DAFE
CMYK34 3 0 0
蓝色 100
HEX#E8F0FF
CMYK7 1 0 0

装饰

为了突出主调色板,我们还使用了一组电动调色板来传达动感,并吸引人们对特定区域的注意。强调色切忌大面积使用,在版面中所占比例不应超过 5%。

技术 Teal

青绿色 1200
HEX#001D1E
CMYK100 41 35 87
青绿色 1100
HEX#013E42
CMYK100 21 28 76
青绿色 1000
HEX#016065
CMYK100 16 24 60
青绿色 900
HEX#018288
CMYK100 12 21 44
青绿色 800
HEX#02A3AC
CMYK100 10 29 20
青绿 700
HEX#02C5CF
CMYK98 0 28 4
P
绿松石色 绿松石 600
HEX#02E9F5
CMYK74 0 13 0
青绿 500
HEX#28F2FD
CMYK62 0 8 0
青绿色 400
HEX#58F5FD
CMYK48 0 9 0
青绿色 300
HEX#88F8FE
CMYK36 0 9 0
青绿 200
HEX#B8FBFE
CMYK23 0 1 0
青绿色 100
HEX#E8FEFF
CMYK10 2 0 0

安全绿色

绿色 1200
HEX#002318
CMYK93 33 68 85
绿色 1100
HEX#004832
CMYK94 28 74 73
绿色 1000
HEX#006C4C
CMYK89 19 72 60
绿色 900
HEX#009165
CMYK90 14 62 43
绿色 800
HEX#00B67F
CMYK100 5 65 26
绿色700
HEX#00DA99
CMYK99 0 69 0
P
绿色 绿色 600
HEX#00FFB2
CMYK66 0 48 0
绿色500
HEX#2DFFC0
CMYK55 0 38 0
绿色 400
HEX#59FFCD
CMYK43 0 28 0
绿色 300
HEX#86FFDB
CMYK33 0 18 0
绿色 200
HEX#B3FFE8
CMYK20 0 14 0
绿色 100
HEX#DFFFF5
CMYK17 0 12 0

危险红色

红色 1200
HEX#290009
CMYK42 69 37 85
红色 1100
HEX#530013
CMYK30 85 59 70
红色 1000
HEX#7E001D
CMYK9 100 64 48
红色 900
HEX#A90027
CMYK7 100 68 32
红色 800
HEX#D40031
CMYK3 100 70 12
P
红色700
HEX#FF003D
CMYK0 100 72 0
红色 600
HEX#FF254A
CMYK0 94 64 0
红色 500
HEX#FF495E
CMYK0 76 54 0
红色400
HEX#FF6E75
CMYK0 54 38 0
红色 300
HEX#FF9392
CMYK0 42 18 0
红色 200
HEX#FFBAB7
CMYK0 23 6 0
红色 100
HEX#FFDFDB
CMYK0 14 5 1

橙色警告

橙色 1200
HEX#2B0C00
CMYK32 72 99 81
橙色 1100
HEX#551A00
CMYK15 67 100 65
橙色 1000
HEX#802B00
CMYK10 72 100 46
橙色900
HEX#AA3E00
CMYK6 71 100 32
橙色800
HEX#D55300
CMYK2 77 100 9
P
橙色 橙色 700
HEX#FF6B00
CMYK0 70 100 0
橙色600
HEX#FF8025
CMYK0 59 80 0
橙色500
HEX#FF954A
CMYK0 46 70 0
橙色 400
HEX#FFAB6F
CMYK0 33 57 0
橙色 300
HEX#FFC094
CMYK0 27 40 0
橙色 200
HEX#FFD6B9
CMYK0 16 32 0
橙色 100
HEX#FFEBDE
CMYK0 8 16 0

黄色警告

黄 1200
HEX#251E00
CMYK39 43 80 91
黄 1100
HEX#493C00
CMYK23 38 89 70
黄色 1000
HEX#6D5A00
CMYK19 37 100 59
黄900
HEX#927800
CMYK10 23 100 43
黄色 800
HEX#B69700
CMYK8 21 100 28
黄700
HEX#DBB600
CMYK2 22 100 8
P
黄色 黄600
HEX#FFD600
CMYK0 11 97 2
黄500
HEX#FFDC2B
CMYK0 8 86 0
黄400
HEX#FFE355
CMYK0 7 75 0
黄色 300
HEX#FFEA80
CMYK0 4 62 0
黄 200
HEX#FFF1AA
CMYK0 3 43 0
黄色 100
HEX#FFF8D5
CMYK0 4 27 0

紫色教育

紫色 1200
HEX#170618
CMYK100 100 10 79
紫色 1100
HEX#290B2C
CMYK91 100 8 59
P
学院 紫色1000
HEX#3E1142
CMYK85 100 6 38
紫色 900
HEX#5E1A64
CMYK75 100 8 26
紫色 800
HEX#7F2387
CMYK67 95 4 16
P
紫色 紫色 700
HEX#9F2CAA
CMYK58 90 0 0
紫色 600
HEX#BF36CB
CMYK51 79 0 0
紫色 500
HEX#CA59D4
CMYK36 60 0 0
紫色 400
HEX#D57CDD
CMYK27 52 0 0
紫色 300
HEX#E09FE6
CMYK26 37 0 0
紫色 200
HEX#ECC2EF
CMYK17 20 0 1
紫色 100
HEX#F7E5F8
CMYK3 6 0 2

用法与背景

精心选择色彩及其背景对于塑造创意叙事、唤起情感以及确保各设计元素之间的视觉和谐至关重要。使用字体颜色创造舒适的阅读体验,使用颜色唤起行动。切勿将行动色用作标题。将蓝色用于动作和链接,避免用于静态字体。请务必查看可访问性指南,了解适当的字体对比度要求。

文本

图形


梯度

渐变增加了层次感,有助于表达构图中的层次。渐变色还可用于对排版区域进行色彩分级和阴影处理。使用渐变色可以将观众的视线引向内容的某个方向。

在制作渐变时,尽量保持微妙的效果,并以跳步的方式使用调色板,跳过一个色组中的一个色阶,以获得清晰的效果。混合色组可以为作品带来动态色彩。避免在作品中使用大面积的重色渐变。

色块

文本


电动

要创建我们的电动效果,请使用以下指南,以确保不同体验的外观保持一致。

如下图所示,使用颜色组的色调来构建图标组。类似的技术也可用于其他插图形状,如线条或边框。辉光和聚光灯的大小和不透明度需要与图形或文字的大小相适应,以使效果细腻简洁。

对于字体,也可以使用相同的颜色组合,但要密切注意易读性。避免在大字体、粗体字或小字体上使用该技术。调整可选的聚光灯,使其与文本块相匹配。

所示规格为 Figma 规格。在我们的应用中,需要进行调整才能在视觉上与之匹配。

计算公式

变化

类型


无障碍环境

小学

为确保尽可能多的客户获得一致的体验,我们始终希望尽可能保持无障碍。其中一种方法就是遵守 WCAG 2.1 关于文字对比度的指导原则。

下面是我们对 16 pt 字体可接受的文字色块颜色的全面测试。如果标记为 "注意",则表示仅符合 AA 级标准,只能用于大号或加粗文字。

行动

我们的OPSWAT 蓝色是主要的 CTA 色调,放置在主要色块上时应特别注意。

装饰

在使用我们的状态和重音符号时,请格外注意无障碍使用。如果字体颜色和字体块显示在下方,则不建议使用。

学院

在使用我们的紫光学院时,请格外注意无障碍环境。如果字体颜色和字体块显示在下方,则不建议使用。