Sơ đẳng
Bảng màu chính của chúng ta tạo nên phần lớn sự sáng tạo và phải thể hiện những sắc thái mạnh nhất trong bất kỳ tác phẩm nào.
Màu sắc
Bảng màu của chúng tôi bắt nguồn từ lịch sử và nền tảng hình ảnh của chúng tôi. Nó có thể được sử dụng để tạo nên sự hiện diện táo bạo, tự tin hoặc truyền tải sự chuyên nghiệp rõ ràng.
Bảng màu của chúng tôi được thiết kế để hỗ trợ nhiều bối cảnh và phương tiện trực quan khác nhau, đồng thời vẫn đảm bảo tính nhất quán rõ ràng. Nên tránh sử dụng các tông màu, độ trong suốt hoặc độ mờ đục của bảng màu. Thay vào đó, hãy tuân thủ các sắc thái đã chỉ định.
Sắc thái
Để linh hoạt, 3 bảng màu chính có sẵn với các giá trị sắc độ khác nhau. Không pha màu hoặc thêm độ trong suốt, hãy sử dụng các sắc thái như hiện trạng.
Đen & Trắng
Đen Đen 100
HEX # 000000
RGB0 0 0
CMYK 60 50 40 100
Trắng Trắng 100
HEX #FFFFFF
RGB255 255 255
CMYK 0 0 0 0
Sắc thái trung tính
Trung lập 1200
Mã HEX #0C121D
RGB40 55 82
CMYK 100 79 44 93
PMSĐen 6
Trung lập 1100
Mã HEX #141B27
RGB20 27 39
CMYK 88 76 30 82
PMS532
Trung lập 1000
HEX # 172234
RGB23 34 52
CMYK 95 72 15 67
PMS533
Trung lập 900
Mã HEX #24324B
RGB36 50 75
CMYK 95 74 7 44
PMS534
Trung lập 800
HEX # 344565
RGB52 69 101
CMYK 78 58 6 32
PMS0
Trung lập 700
Mã HEX #475B81
RGB79 91 129
CMYK 60 40 5 20
PMS0
Trung lập 600
HEX # 607497
RGB96 116 151
CMYK 43 25 3 8
PMS535
Trung lập 500
Mã HEX #A9B2C4
RGB169 178 196
CMYK 34 17 2 7
PMS536
Trung lập 400
Mã HEX #C7CCD5
RGB199 204 213
CMYK 24 12 2 6
PMS0
Trung lập 300
Mã HEX #DEE0E4
RGB222 224 228
CMYK 14 7 3 5
PMS427
Trung lập 200
HEX #EBECEE
RGB235 236 238
CMYK 4 2 3 4
PMS427 @50%
Trung lập 100
Mã HEX #F8F9F9
RGB248 249 249
CMYK 2 1 2 2
PMS427 @25%
Sắc thái xanh
P
Xanh nửa đêm 1200
Mã HEX #050F22
RGB5 15 34
CMYK 100 80 0 90
PMS296
Màu xanh lam 1100
Mã HEX #091B3B
RGB9 27 59
CMYK 100 79 12 70
PMS289
P
Xanh hải quân 1000
Mã HEX #0D2654
RGB13 38 64
CMYK 100 79 12 59
PMS655
Màu xanh lam 900
Mã HEX #123D8B
RGB18 61 139
CMYK 100 75 2 18
PMS287
Màu xanh lam 800
Mã HEX #1854C3
RGB24 84 195
CMYK 100 75 0 0
PMS286
P
Xanh lam Xanh lam 700
HEX #1D6BFC
RGB29 107 252
CMYK 90 48 0 0
PMS285
Màu xanh lam 600
HEX #357BFC
RGB53 123 252
CMYK 88 40 0 0
PMS0
Màu xanh lam 500
HEX #5690FD
RGB86 144 253
CMYK 87 30 0 0
PMS0
Màu xanh lam 400
HEX #77A6FD
RGB119 166 253
CMYK 85 21 0 0
PMS2925
Màu xanh lam 300
Mã HEX #A5C4FE
RGB165 196 254
CMYK 60 6 0 0
PMS299 @70%
Màu xanh lam 200
HEX #C6DAFE
RGB195 218 254
CMYK 34 3 0 0
PMS299 @40%
Màu xanh lam 100
Mã HEX #E8F0FF
RGB232 240 255
CMYK 7 1 0 0
PMS299 @8%
Dấu trọng âm
Để làm nổi bật pallet chính, chúng tôi cũng có một bộ pallet điện để truyền tải chuyển động và thu hút sự chú ý vào các khu vực cụ thể. Màu nhấn không bao giờ nên là những mảng màu lớn và chỉ nên chiếm dưới 5% tổng diện tích bố trí.
Công nghệ Teal
Màu xanh ngọc 1200
HEX #001D1E
RGB0 29 32
CMYK 100 41 35 87
PMS546
Màu xanh ngọc 1100
Mã HEX #013E42
RGB1 62 66
CMYK 100 21 28 76
PMS548
Màu xanh ngọc 1000
HEX # 016065
RGB1 96 101
CMYK 100 16 24 60
PMS0
Màu xanh ngọc 900
HEX # 018288
RGB1 130 136
CMYK 100 12 21 44
PMS315
Màu xanh ngọc 800
HEX #02A3AC
RGB2 163 172
CMYK 100 10 29 20
PMS3145
Màu xanh ngọc 700
HEX #02C5CF
RGB2 197 207
CMYK 98 0 28 4
PMS7711
P
Teal Teal 600
Mã HEX #02E9F5
RGB2 233 245
CMYK 74 0 13 0
PMS631
Màu xanh ngọc 500
HEX #28F2FD
RGB40 242 253
CMYK 62 0 8 0
PMS637
Màu xanh ngọc 400
HEX #58F5FD
RGB88 245 253
CMYK 48 0 9 0
PMS310
Màu xanh ngọc 300
HEX #88F8FE
RGB136 248 254
CMYK 36 0 9 0
PMS629
Màu xanh ngọc 200
HEX #B8FBFE
RGB184 251 254
CMYK 23 0 1 0
PMS290
Màu xanh ngọc 100
HEX #E8FEFF
RGB232 254 255
CMYK 10 2 0 0
PMS656
An toàn xanh
Màu xanh lá cây 1200
HEX # 002318
RGB0 35 24
CMYK 93 33 68 85
PMS627
Màu xanh lá cây 1100
HEX # 004832
RGB0 72 50
CMYK 94 28 74 73
PMS3308
Màu xanh lá cây 1000
Mã HEX #006C4C
RGB0 108 76
CMYK 89 19 72 60
PMS343
Màu xanh lá cây 900
HEX # 009165
RGB0 145 101
CMYK 90 14 62 43
PMS568
Màu xanh lá cây 800
Mã HEX #00B67F
RGB0 182 127
CMYK 100 5 65 26
PMS3295
Màu xanh lá cây 700
Mã HEX #00DA99
RGB0 218 153
CMYK 99 0 69 0
PMS3278
P
Xanh lá cây 600
HEX #00FFB2
RGB0 255 178
CMYK 66 0 48 0
PMS3395
Màu xanh lá cây 500
HEX #2DFFC0
RGB45 255 192
CMYK 55 0 38 0
PMS0
Màu xanh lá cây 400
HEX #59FFCD
RGB89 255 205
CMYK 43 0 28 0
PMS3385
Màu xanh lá cây 300
HEX #86FFDB
RGB134 255 219
CMYK 33 0 18 0
PMS332
Màu xanh lá cây 200
Mã HEX #B3FFE8
RGB179 255 232
CMYK 20 0 14 0
PMS573
Màu xanh lá cây 100
HEX #DFFFF5
RGB223 255 245
CMYK 17 0 12 0
PMS566
Nguy hiểm màu đỏ
Màu đỏ 1200
HEX # 290009
RGB41 0 9
CMYK 42 69 37 85
PMSĐen 5
Màu đỏ 1100
HEX # 530013
RGB83 0 19
CMYK 30 85 59 70
PMS1817
Màu đỏ 1000
HEX #7E001D
RGB126 0 29
CMYK 9 100 64 48
PMS202
Màu đỏ 900
Mã HEX #A90027
RGB169 0 39
CMYK 7 100 68 32
PMS201
Màu đỏ 800
Mã HEX #D40031
RGB212 0 49
CMYK 3 100 70 12
PMS200
P
Đỏ Đỏ 700
Mã HEX #FF003D
RGB255 0 61
CMYK 0 100 72 0
PMS199
Màu đỏ 600
Mã HEX #FF254A
RGB255 37 74
CMYK 0 94 64 0
PMS192
Màu đỏ 500
Mã HEX #FF495E
RGB255 73 94
CMYK 0 76 54 0
PMS1785
Màu đỏ 400
Mã HEX #FF6E75
RGB255 110 117
CMYK 0 54 38 0
PMS177
Màu đỏ 300
Mã HEX #FF9392
RGB255 147 146
CMYK 0 42 18 0
PMS1765
Màu đỏ 200
HEX #FFBAB7
RGB255 186 183
CMYK 0 23 6 0
PMS196
Màu đỏ 100
HEX #FFDFDB
RGB255 223 219
CMYK 0 14 5 1
PMS691
Cảnh báo màu cam
Màu cam 1200
Mã HEX #2B0C00
RGB43 12 0
CMYK 32 72 99 81
PMS2322
Màu cam 1100
HEX #551A00
RGB85 26 0
CMYK 15 67 100 65
PMS7568
Màu cam 1000
Mã HEX #802B00
RGB128 43 0
CMYK 10 72 100 46
PMS1615
Màu cam 900
Mã HEX #AA3E00
RGB170 62 0
CMYK 6 71 100 32
PMS1605
Màu cam 800
Mã HEX #D55300
RGB213 83 0
CMYK 2 77 100 9
PMS1525
P
Cam Cam 700
Mã HEX #FF6B00
RGB255 107 0
CMYK 0 70 100 0
PMS165
Màu cam 600
Mã HEX #FF8025
RGB255 128 37
CMYK 0 59 80 0
PMS164
Màu cam 500
Mã HEX #FF954A
RGB255 149 74
CMYK 0 46 70 0
PMS0
Màu cam 400
Mã HEX #FFAB6F
RGB255 171 111
CMYK 0 33 57 0
PMS2016
Màu cam 300
Mã HEX #FFC094
RGB255 192 148
CMYK 0 27 40 0
PMS713
Màu cam 200
Mã HEX #FFD6B9
RGB255 214 185
CMYK 0 16 32 0
PMS2015
Màu cam 100
HEX #FFEBDE
RGB255 235 222
CMYK 0 8 16 0
PMS2015 @50%
Thận trọng màu vàng
Màu vàng 1200
Mã HEX #251E00
RGB37 30 0
CMYK 39 43 80 91
PMSĐen 2
Màu vàng 1100
Mã HEX #493C00
RGB73 60 0
CMYK 23 38 89 70
PMS455
Màu vàng 1000
Mã HEX #6D5A00
RGB109 90 0
CMYK 19 37 100 59
PMS133
Màu vàng 900
HEX # 927800
RGB146 120 0
CMYK 10 23 100 43
PMS456
Màu vàng 800
Mã HEX #B69700
RGB182 151 0
CMYK 8 21 100 28
PMS111
Màu vàng 700
Mã HEX #DBB600
RGB219 182 0
CMYK 2 22 100 8
PMS110
P
Vàng Vàng 600
Mã HEX #FFD600
RGB255 214 0
CMYK 0 11 97 2
PMS7405
Màu vàng 500
Mã HEX #FFDC2B
RGB255 220 43
CMYK 0 8 86 0
PMS7404
Màu vàng 400
Mã HEX #FFE355
RGB255 227 85
CMYK 0 7 75 0
PMS128
Màu vàng 300
Mã HEX #FFEA80
RGB255 234 128
CMYK 0 4 62 0
PMS127
Màu vàng 200
Mã HEX #FFF1AA
RGB255 241 170
CMYK 0 3 43 0
PMS1205
Màu vàng 100
Mã HEX #FFF8D5
RGB255 248 213
CMYK 0 4 27 0
PMS7401
Giáo dục màu tím
Màu tím 1200
HEX # 170618
RGB23 6 24
CMYK 100 100 10 79
PMS276
Màu tím 1100
Mã HEX #290B2C
RGB41 11 44
CMYK 91 100 8 59
PMS2695
P
Academy Purple 1000
Mã HEX #3E1142
RGB62 17 66
CMYK 85 100 6 38
PMS2627
Màu tím 900
Mã HEX #5E1A64
RGB94 26 100
CMYK 75 100 8 26
PMS2623
Màu tím 800
Mã HEX #7F2387
RGB127 35 135
CMYK 67 95 4 16
PMS520
P
Tím Tím 700
HEX #9F2CAA
RGB159 44 170
CMYK 58 90 0 0
PMS2592
Màu tím 600
HEX #BF36CB
RGB191 54 203
CMYK 51 79 0 0
PMS258
Màu tím 500
Mã HEX #CA59D4
RGB202 89 212
CMYK 36 60 0 0
PMS7440
Màu tím 400
HEX #D57CDD
RGB213 124 221
CMYK 27 52 0 0
PMS7439
Màu tím 300
Mã HEX #E09FE6
RGB224 159 230
CMYK 26 37 0 0
PMS264
Màu tím 200
HEX #ECC2EF
RGB236 194 239
CMYK 17 20 0 1
PMS665
Màu tím 100
Mã HEX #F7E5F8
RGB247 229 248
CMYK 3 6 0 2
PMS663
Cách sử dụng & Bối cảnh
Việc lựa chọn màu sắc và bối cảnh cẩn thận đóng vai trò then chốt trong việc định hình câu chuyện sáng tạo, khơi gợi cảm xúc và đảm bảo sự hài hòa về mặt thị giác giữa các yếu tố thiết kế. Hãy sử dụng màu chữ để tạo trải nghiệm đọc thoải mái và màu sắc gợi lên hành động. Tuyệt đối không sử dụng màu hành động làm tiêu đề. Hãy giữ màu Xanh lam của chúng tôi cho hành động và liên kết, tránh sử dụng cho chữ tĩnh. Hãy đảm bảo xem lại hướng dẫn về khả năng truy cập để biết các yêu cầu về độ tương phản chữ phù hợp.
Chữ
Đồ họa
Độ dốc
Gradient tạo chiều sâu cảm giác và giúp truyền tải các lớp trong bố cục. Chúng cũng có thể được sử dụng để phân cấp màu và tạo bóng cho các vùng trong kiểu chữ. Sử dụng màu chuyển sắc như một cách để thu hút ánh nhìn của người xem theo một hướng xuyên suốt nội dung.
Khi xây dựng hiệu ứng chuyển màu, hãy cố gắng giữ hiệu ứng tinh tế và sử dụng bảng màu theo kiểu bỏ qua một bước màu trong nhóm sắc thái để tạo độ rõ nét. Việc kết hợp các nhóm màu có thể là một cách để mang lại màu sắc sống động cho tác phẩm. Tránh sử dụng hiệu ứng chuyển màu đậm làm điểm nhấn như những mảng màu lớn trên một tác phẩm.
Chặn màu
Chữ
Điện
Để tạo hiệu ứng điện, hãy sử dụng các hướng dẫn bên dưới để đảm bảo giao diện nhất quán trong nhiều trải nghiệm khác nhau.
Sử dụng các sắc thái của một nhóm màu và xây dựng nhóm biểu tượng như minh họa bên dưới. Các kỹ thuật tương tự có thể được sử dụng cho các hình dạng minh họa khác, chẳng hạn như đường thẳng hoặc đường viền. Kích thước và độ mờ của hiệu ứng phát sáng và điểm sáng cần được điều chỉnh theo đồ họa hoặc văn bản để tạo hiệu ứng tinh tế và rõ nét.
Về kiểu chữ, có thể sử dụng các kết hợp màu tương tự nhưng hãy chú ý đến khả năng tiếp cận. Tránh sử dụng kỹ thuật này trên phông chữ lớn, đậm hoặc chữ nhỏ. Điều chỉnh đèn chiếu sáng tùy chọn sao cho vừa vặn với khối văn bản.
Thông số kỹ thuật hiển thị là của Figma. Chúng tôi sẽ cần điều chỉnh để phù hợp với ứng dụng của bạn.
Công thức
Biến thể
Kiểu
Khả năng tiếp cận
Sơ đẳng
Để đảm bảo càng nhiều khách hàng càng tốt có được trải nghiệm nhất quán, chúng tôi luôn muốn duy trì khả năng tiếp cận dễ dàng nhất có thể. Một cách để thực hiện điều này là tuân thủ các hướng dẫn WCAG 2.1 về tỷ lệ tương phản cho văn bản.
Dưới đây, bạn sẽ thấy toàn bộ quá trình kiểm tra màu sắc được sử dụng với phông chữ 16 pt của chúng tôi đối với các màu chặn văn bản được chấp nhận. Nếu được đánh dấu là "Caution" (Thận trọng), điều đó có nghĩa là phông chữ chỉ đáp ứng tiêu chuẩn AA và chỉ nên sử dụng cho văn bản có kích thước lớn hoặc đậm.
Hoạt động
Của chúng tôi OPSWAT Màu xanh là tông màu CTA chính của chúng tôi và cần đặc biệt chú ý khi đặt lên các khối màu chính.
Dấu trọng âm
Khi sử dụng trạng thái và dấu trọng âm, hãy đặc biệt cẩn thận để đảm bảo khả năng truy cập. Nếu màu phông chữ và khối chữ hiển thị bên dưới, chúng tôi không khuyến khích bạn sử dụng.
Academy
Khi sử dụng của chúng tôi Academy Màu tím cần đặc biệt cẩn thận để tránh bị chặn. Nếu màu phông chữ và khối chữ hiển thị bên dưới thì không nên sử dụng.
