透過資料二極體傳送日誌、警示與遙測資料

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

顏色

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

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


初級

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


色調

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

黑與白

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

中性色調

中性1200
HEX#0C121D
RGB40 55 82
CMYK100 79 44 93
PMS黑色 6
中性1100
HEX#141B27
RGB20 27 39
CMYK88 76 30 82
PMS532
中性1000
HEX172234
RGB23 34 52
CMYK95 72 15 67
PMS533
中性900
HEX#24324B
RGB36 50 75
CMYK95 74 7 44
PMS534
中性800
HEX344565
RGB52 69 101
CMYK78 58 6 32
中性700
HEX#475B81
RGB79 91 129
CMYK60 40 5 20
中性600
HEX607497
RGB96 116 151
CMYK43 25 3 8
PMS535
中性500
HEX#A9B2C4
RGB169 178 196
CMYK34 17 2 7
PMS536
中性400
HEX#C7CCD5
RGB199 204 213
CMYK24 12 2 6
中性300
HEX#DEE0E4
RGB222 224 228
CMYK14 7 3 5
PMS427
中性200
HEX#EBECEE
RGB235 236 238
CMYK4 2 3 4
PMS427 @50%
中性100
HEX#F8F9F9
RGB248 249 249
CMYK2 1 2 2
PMS427 @25%

藍色調

P
午夜 藍 1200
HEX#050F22
RGB5 15 34
CMYK100 80 0 90
PMS296
藍色1100
HEX#091B3B
RGB9 27 59
CMYK100 79 12 70
PMS289
P
海軍藍 藍色 1000
HEX#0D2654
RGB13 38 64
CMYK100 79 12 59
PMS655
藍色900
HEX#123D8B
RGB18 61 139
CMYK100 75 2 18
PMS287
藍色800
HEX#1854C3
RGB24 84 195
CMYK100 75 0 0
PMS286
P
藍色 藍色 700
HEX#1D6BFC
RGB29 107 252
CMYK90 48 0 0
PMS285
藍色600
HEX#357BFC
RGB53 123 252
CMYK88 40 0 0
藍色500
HEX#5690FD
RGB86 144 253
CMYK87 30 0 0
藍色400
HEX#77A6FD
RGB119 166 253
CMYK85 21 0 0
PMS2925
藍色300
HEX#A5C4FE
RGB165 196 254
CMYK60 6 0 0
PMS299 @70%
藍色200
HEX#C6DAFE
RGB195 218 254
CMYK34 3 0 0
PMS299 @40%
藍色100
HEX#E8F0FF
RGB232 240 255
CMYK7 1 0 0
PMS299 @8%

重點

為了強調我們的主要調色板,我們還有一套電動調色板,用來傳達動態和吸引對特定區域的注意。重點顏色絕不應該作為大面積的顏色來使用,而且應該只佔版面的 5% 以下。

技術茶色

青綠色1200
HEX#001D1E
RGB0 29 32
CMYK100 41 35 87
PMS546
青綠色1100
HEX#013E42
RGB1 62 66
CMYK100 21 28 76
PMS548
青綠色1000
HEX016065
RGB1 96 101
CMYK100 16 24 60
青綠色900
HEX018288
RGB1 130 136
CMYK100 12 21 44
PMS315
青綠色800
HEX#02A3AC
RGB2 163 172
CMYK100 10 29 20
PMS3145
青綠色700
HEX#02C5CF
RGB2 197 207
CMYK98 0 28 4
PMS7711
P
青綠色 青綠 600
HEX#02E9F5
RGB2 233 245
CMYK74 0 13 0
PMS631
青綠色500
HEX#28F2FD
RGB40 242 253
CMYK62 0 8 0
PMS637
青綠色400
HEX#58F5FD
RGB88 245 253
CMYK48 0 9 0
PMS310
青綠色300
HEX#88F8FE
RGB136 248 254
CMYK36 0 9 0
PMS629
青綠色200
HEX#B8FBFE
RGB184 251 254
CMYK23 0 1 0
PMS290
青綠色100
HEX#E8FEFF
RGB232 254 255
CMYK10 2 0 0
PMS656

安全綠色

綠色1200
HEX002318
RGB0 35 24
CMYK93 33 68 85
PMS627
綠色1100
HEX004832
RGB0 72 50
CMYK94 28 74 73
PMS3308
綠色1000
HEX#006C4C
RGB0 108 76
CMYK89 19 72 60
PMS343
綠色900
HEX009165
RGB0 145 101
CMYK90 14 62 43
PMS568
綠色800
HEX#00B67F
RGB0 182 127
CMYK100 5 65 26
PMS3295
綠色700
HEX#00DA99
RGB0 218 153
CMYK99 0 69 0
PMS3278
P
綠色 綠色 600
HEX#00FFB2
RGB0 255 178
CMYK66 0 48 0
PMS3395
綠色500
HEX#2DFFC0
RGB45 255 192
CMYK55 0 38 0
綠色400
HEX#59FFCD
RGB89 255 205
CMYK43 0 28 0
PMS3385
綠色300
HEX#86FFDB
RGB134 255 219
CMYK33 0 18 0
PMS332
綠色200
HEX#B3FFE8
RGB179 255 232
CMYK20 0 14 0
PMS573
綠色100
HEX#DFFFF5
RGB223 255 245
CMYK17 0 12 0
PMS566

危險紅色

紅色1200
HEX290009
RGB41 0 9
CMYK42 69 37 85
PMS黑色 5
紅色1100
HEX530013
RGB83 0 19
CMYK30 85 59 70
PMS1817
紅色1000
HEX#7E001D
RGB126 0 29
CMYK9 100 64 48
PMS202
紅色900
HEX#A90027
RGB169 0 39
CMYK7 100 68 32
PMS201
紅色800
HEX#D40031
RGB212 0 49
CMYK3 100 70 12
PMS200
P
紅 700
HEX#FF003D
RGB255 0 61
CMYK0 100 72 0
PMS199
紅色600
HEX#FF254A
RGB255 37 74
CMYK0 94 64 0
PMS192
紅色500
HEX#FF495E
RGB255 73 94
CMYK0 76 54 0
PMS1785
紅色400
HEX#FF6E75
RGB255 110 117
CMYK0 54 38 0
PMS177
紅色300
HEX#FF9392
RGB255 147 146
CMYK0 42 18 0
PMS1765
紅色200
HEX#FFBAB7
RGB255 186 183
CMYK0 23 6 0
PMS196
紅色100
HEX#FFDFDB
RGB255 223 219
CMYK0 14 5 1
PMS691

橙色警告

橙色1200
HEX#2B0C00
RGB43 12 0
CMYK32 72 99 81
PMS2322
橙色1100
HEX#551A00
RGB85 26 0
CMYK15 67 100 65
PMS7568
橙色1000
HEX#802B00
RGB128 43 0
CMYK10 72 100 46
PMS1615
橙色900
HEX#AA3E00
RGB170 62 0
CMYK6 71 100 32
PMS1605
橙色800
HEX#D55300
RGB213 83 0
CMYK2 77 100 9
PMS1525
P
橘色 橙色 700
HEX#FF6B00
RGB255 107 0
CMYK0 70 100 0
PMS165
橙色600
HEX#FF8025
RGB255 128 37
CMYK0 59 80 0
PMS164
橙色500
HEX#FF954A
RGB255 149 74
CMYK0 46 70 0
橙色400
HEX#FFAB6F
RGB255 171 111
CMYK0 33 57 0
PMS2016
橙色300
HEX#FFC094
RGB255 192 148
CMYK0 27 40 0
PMS713
橙色200
HEX#FFD6B9
RGB255 214 185
CMYK0 16 32 0
PMS2015
橙色100
HEX#FFEBDE
RGB255 235 222
CMYK0 8 16 0
PMS2015 @50%

注意 黃色

黃色1200
HEX#251E00
RGB37 30 0
CMYK39 43 80 91
PMS黑色 2
黃色1100
HEX#493C00
RGB73 60 0
CMYK23 38 89 70
PMS455
黃色1000
HEX#6D5A00
RGB109 90 0
CMYK19 37 100 59
PMS133
黃色900
HEX927800
RGB146 120 0
CMYK10 23 100 43
PMS456
黃色800
HEX#B69700
RGB182 151 0
CMYK8 21 100 28
PMS111
黃色700
HEX#DBB600
RGB219 182 0
CMYK2 22 100 8
PMS110
P
黃色 黃色 600
HEX#FFD600
RGB255 214 0
CMYK0 11 97 2
PMS7405
黃色500
HEX#FFDC2B
RGB255 220 43
CMYK0 8 86 0
PMS7404
黃色400
HEX#FFE355
RGB255 227 85
CMYK0 7 75 0
PMS128
黃色300
HEX#FFEA80
RGB255 234 128
CMYK0 4 62 0
PMS127
黃色200
HEX#FFF1AA
RGB255 241 170
CMYK0 3 43 0
PMS1205
黃色100
HEX#FFF8D5
RGB255 248 213
CMYK0 4 27 0
PMS7401

教育紫

紫色1200
HEX170618
RGB23 6 24
CMYK100 100 10 79
PMS276
紫色1100
HEX#290B2C
RGB41 11 44
CMYK91 100 8 59
PMS2695
P
學院 紫色 1000
HEX#3E1142
RGB62 17 66
CMYK85 100 6 38
PMS2627
紫色900
HEX#5E1A64
RGB94 26 100
CMYK75 100 8 26
PMS2623
紫色800
HEX#7F2387
RGB127 35 135
CMYK67 95 4 16
PMS520
P
紫色 紫色 700
HEX#9F2CAA
RGB159 44 170
CMYK58 90 0 0
PMS2592
紫色600
HEX#BF36CB
RGB191 54 203
CMYK51 79 0 0
PMS258
紫色500
HEX#CA59D4
RGB202 89 212
CMYK36 60 0 0
PMS7440
紫色400
HEX#D57CDD
RGB213 124 221
CMYK27 52 0 0
PMS7439
紫色300
HEX#E09FE6
RGB224 159 230
CMYK26 37 0 0
PMS264
紫色200
HEX#ECC2EF
RGB236 194 239
CMYK17 20 0 1
PMS665
紫色100
HEX#F7E5F8
RGB247 229 248
CMYK3 6 0 2
PMS663

用法與背景

謹慎選擇顏色及其上下文對於塑造創意敘事、喚起情感以及確保設計元素之間的視覺和諧性至關重要。使用字體顏色來創造舒適的閱讀體驗,並使用顏色來喚起行動。切勿將行動色用作標題。將藍色用於動作和連結,避免用於靜態類型。請務必參閱可讀性指南,以瞭解適當的字型對比要求。

正文

圖形


漸層

漸層增加了深度感,有助於溝通構圖中的層次感。漸層也可以用來對排版區域進行顏色分級和陰影處理。使用漸層顏色來吸引觀眾的視線,讓觀眾的視線從某個方向穿過內容。

在建立漸層時,嘗試保持微妙的效果,並以跳步方式使用調色板,跳過顏色群中的一個顏色步驟,以獲得清晰度。混合色群可以為作品帶來動感的色彩。避免使用重點漸層作為作品上的大塊顏色。

色塊

正文


電氣

若要創造我們的電氣效果,請使用下列指引,以確保不同體驗的外觀一致。

使用顏色群組的色調,如下圖所示建立您的圖示群組。類似的技巧也可用於其他插圖形狀,例如線條或邊框。光暈和聚光燈的大小和不透明度需要隨著圖形或文字的大小而調整,使效果細膩而乾淨。

對於字體,可以使用相同的顏色組合,但要密切注意可觸及性。避免在大字體、粗體字或小字體上使用此技術。調整可選的聚光燈,使其符合文字區塊的形式。

所示規格為 Figma 的規格。在我們的應用程式中,需要進行調整才能在視覺上匹配。

公式

變化

類型


無障礙

初級

為了確保盡量多的客戶擁有一致的體驗,我們始終希望盡可能保持無障礙。其中一個方法就是遵守 WCAG 2.1 有關文字對比的指引。

以下您將看到我們的顏色與 16 pt 字型搭配使用的完整測試結果,以瞭解可接受的文字遮蔽顏色。如果標示為「注意」,表示僅符合 AA 級標準,只能用於大字體或粗體文字。

行動

我們的OPSWAT 藍色是我們主要的 CTA 色調,放置在主要色塊上方時應特別注意。

重點

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

學院

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