您絕對不能錯過的更新:Office 2016 與 Office 2019 支援終止

立即閱讀
我們利用人工智慧進行網站翻譯,雖然我們力求準確性,但它們可能並不總是 100% 精確。感謝您的理解。

顏色

我們的調色板植根於我們的歷史,也是我們外觀的基礎。它可以用來展現大膽、自信的風采,或傳達清晰的專業知識。

我們的調色板是為了支援各式各樣的視覺場景和媒介而組織的,同時又能達到明確的一致性。應避免使用調色板的色調、透明色或不透明值。反之,應堅持使用指定的色調。


初級

我們的主要調色板建立了我們大部分的創意,並應代表任何作品中最強烈的色調。


色調

為了提高靈活性,3 種主要的調色板有不同的色調值。請勿著色或增加透明度,並依原色使用。

黑與白

黑色 黑色 100
HEX000000
CMYK60 50 40 100
白色 白色 100
HEX#FFFFFF
CMYK0 0 0 0

中性色調

中性1200
HEX#0C121D
CMYK100 79 44 93
中性1100
HEX#141B27
CMYK88 76 30 82
中性1000
HEX172234
CMYK95 72 15 67
中性900
HEX#24324B
CMYK95 74 7 44
中性800
HEX344565
CMYK78 58 6 32
中性700
HEX#475B81
CMYK60 40 5 20
中性600
HEX607497
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% 以下。

技術茶色

青綠色1200
HEX#001D1E
CMYK100 41 35 87
青綠色1100
HEX#013E42
CMYK100 21 28 76
青綠色1000
HEX016065
CMYK100 16 24 60
青綠色900
HEX018288
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
HEX002318
CMYK93 33 68 85
綠色1100
HEX004832
CMYK94 28 74 73
綠色1000
HEX#006C4C
CMYK89 19 72 60
綠色900
HEX009165
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
HEX290009
CMYK42 69 37 85
紅色1100
HEX530013
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
HEX927800
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
HEX170618
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 色調,放置在主要色塊上方時應特別注意。

重點

使用我們的狀態和重音時,請格外注意無障礙使用。如果字體顏色和塊狀顯示在下方,則不建議使用。

學院

使用我們的紫光學院時,請格外注意無障礙環境。如果字體顏色和塊狀顯示如下,則不建議使用。