Primare
Paleta noastră principală construiește cea mai mare parte a creației noastre și ar trebui să reprezinte cele mai puternice nuanțe din orice piesă.
Culori
Paleta noastră de culori este înrădăcinată în istoria noastră și stă la baza aspectului nostru. Aceasta poate fi folosită pentru a asigura o prezență îndrăzneață și încrezătoare sau pentru a transmite o expertiză clară.
Paleta noastră de culori a fost organizată pentru a susține o mare varietate de scenarii și medii vizuale, asigurând în același timp o coerență clară. Trebuie evitate nuanțele, transparențele sau valorile opace ale paletei. În schimb, rămâneți la nuanțele specificate.
Nuanțe
Pentru flexibilitate, cele 3 palete de culori principale sunt disponibile în diferite valori de nuanță. Nu nuanțați sau nu adăugați transparență și utilizați nuanțele ca atare.
Alb și negru
Negru
Negru 100
HEX#000000
RGB0 0 0
CMYK60 50 40 100
Alb
Alb 100
HEX#FFFFFF
RGB255 255 255
CMYK0 0 0 0
Nuanțe neutre
Neutru 1200
HEX#0C121D
RGB40 55 82
CMYK100 79 44 93
PMSNegru 6
Neutru 1100
HEX#141B27
RGB20 27 39
CMYK88 76 30 82
PMS532
Neutru 1000
HEX#172234
RGB23 34 52
CMYK95 72 15 67
PMS533
Neutru 900
HEX#24324B
RGB36 50 75
CMYK95 74 7 44
PMS534
Neutru 800
HEX#344565
RGB52 69 101
CMYK78 58 6 32
PMS0
Neutru 700
HEX#475B81
RGB79 91 129
CMYK60 40 5 20
PMS0
Neutru 600
HEX#607497
RGB96 116 151
CMYK43 25 3 8
PMS535
Neutru 500
HEX#A9B2C4
RGB169 178 196
CMYK34 17 2 7
PMS536
Neutru 400
HEX#C7CCD5
RGB199 204 213
CMYK24 12 2 6
PMS0
Neutru 300
HEX#DEE0E4
RGB222 224 228
CMYK14 7 3 5
PMS427
Neutru 200
HEX#EBECEE
RGB235 236 238
CMYK4 2 3 4
PMS427 @50%
Neutru 100
HEX#F8F9F9
RGB248 249 249
CMYK2 1 2 2
PMS427 @25%
Nuanțe de albastru
P
Miezul nopții
Albastru 1200
HEX#050F22
RGB5 15 34
CMYK100 80 0 90
PMS296
Albastru 1100
HEX#091B3B
RGB9 27 59
CMYK100 79 12 70
PMS289
P
Albastru marin
Albastru 1000
HEX#0D2654
RGB13 38 64
CMYK100 79 12 59
PMS655
Albastru 900
HEX#123D8B
RGB18 61 139
CMYK100 75 2 18
PMS287
Albastru 800
HEX#1854C3
RGB24 84 195
CMYK100 75 0 0
PMS286
P
Albastru
Albastru 700
HEX#1D6BFC
RGB29 107 252
CMYK90 48 0 0
PMS285
Albastru 600
HEX#357BFC
RGB53 123 252
CMYK88 40 0 0
PMS0
Albastru 500
HEX#5690FD
RGB86 144 253
CMYK87 30 0 0
PMS0
Albastru 400
HEX#77A6FD
RGB119 166 253
CMYK85 21 0 0
PMS2925
Albastru 300
HEX#A5C4FE
RGB165 196 254
CMYK60 6 0 0
PMS299 @70%
Albastru 200
HEX#C6DAFE
RGB195 218 254
CMYK34 3 0 0
PMS299 @40%
Albastru 100
HEX#E8F0FF
RGB232 240 255
CMYK7 1 0 0
PMS299 @8%
Accente
Pentru a accentua paleta principală, avem, de asemenea, un set de palete electrice pentru a comunica mișcarea și a atrage atenția asupra anumitor zone. Culorile de accent nu ar trebui să fie folosite niciodată ca stropi mari de culoare și ar trebui să reprezinte mai puțin de 5% din aspect.
Tehnologie teal
Teal 1200
HEX#001D1E
RGB0 29 32
CMYK100 41 35 87
PMS546
Teal 1100
HEX#013E42
RGB1 62 66
CMYK100 21 28 76
PMS548
Teal 1000
HEX#016065
RGB1 96 101
CMYK100 16 24 60
PMS0
Teal 900
HEX#018288
RGB1 130 136
CMYK100 12 21 44
PMS315
Teal 800
HEX#02A3AC
RGB2 163 172
CMYK100 10 29 20
PMS3145
Teal 700
HEX#02C5CF
RGB2 197 207
CMYK98 0 28 4
PMS7711
P
Teal
Teal 600
HEX#02E9F5
RGB2 233 245
CMYK74 0 13 0
PMS631
Teal 500
HEX#28F2FD
RGB40 242 253
CMYK62 0 8 0
PMS637
Teal 400
HEX#58F5FD
RGB88 245 253
CMYK48 0 9 0
PMS310
Teal 300
HEX#88F8FE
RGB136 248 254
CMYK36 0 9 0
PMS629
Teal 200
HEX#B8FBFE
RGB184 251 254
CMYK23 0 1 0
PMS290
Teal 100
HEX#E8FEFF
RGB232 254 255
CMYK10 2 0 0
PMS656
Verde de siguranță
Verde 1200
HEX#002318
RGB0 35 24
CMYK93 33 68 85
PMS627
Verde 1100
HEX#004832
RGB0 72 50
CMYK94 28 74 73
PMS3308
Verde 1000
HEX#006C4C
RGB0 108 76
CMYK89 19 72 60
PMS343
Verde 900
HEX#009165
RGB0 145 101
CMYK90 14 62 43
PMS568
Verde 800
HEX#00B67F
RGB0 182 127
CMYK100 5 65 26
PMS3295
Verde 700
HEX#00DA99
RGB0 218 153
CMYK99 0 69 0
PMS3278
P
Verde
Verde 600
HEX#00FFB2
RGB0 255 178
CMYK66 0 48 0
PMS3395
Verde 500
HEX#2DFFC0
RGB45 255 192
CMYK55 0 38 0
PMS0
Verde 400
HEX#59FFCD
RGB89 255 205
CMYK43 0 28 0
PMS3385
Verde 300
HEX#86FFDB
RGB134 255 219
CMYK33 0 18 0
PMS332
Verde 200
HEX#B3FFE8
RGB179 255 232
CMYK20 0 14 0
PMS573
Verde 100
HEX#DFFFF5
RGB223 255 245
CMYK17 0 12 0
PMS566
Pericol roșu
Roșu 1200
HEX#290009
RGB41 0 9
CMYK42 69 37 85
PMSNegru 5
Roșu 1100
HEX#530013
RGB83 0 19
CMYK30 85 59 70
PMS1817
Roșu 1000
HEX#7E001D
RGB126 0 29
CMYK9 100 64 48
PMS202
Roșu 900
HEX#A90027
RGB169 0 39
CMYK7 100 68 32
PMS201
Roșu 800
HEX#D40031
RGB212 0 49
CMYK3 100 70 12
PMS200
P
Roșu
Roșu 700
HEX#FF003D
RGB255 0 61
CMYK0 100 72 0
PMS199
Roșu 600
HEX#FF254A
RGB255 37 74
CMYK0 94 64 0
PMS192
Roșu 500
HEX#FF495E
RGB255 73 94
CMYK0 76 54 0
PMS1785
Roșu 400
HEX#FF6E75
RGB255 110 117
CMYK0 54 38 0
PMS177
Roșu 300
HEX#FF9392
RGB255 147 146
CMYK0 42 18 0
PMS1765
Roșu 200
HEX#FFBAB7
RGB255 186 183
CMYK0 23 6 0
PMS196
Roșu 100
HEX#FFDFDB
RGB255 223 219
CMYK0 14 5 1
PMS691
Avertisment portocaliu
Portocaliu 1200
HEX#2B0C00
RGB43 12 0
CMYK32 72 99 81
PMS2322
Portocaliu 1100
HEX#551A00
RGB85 26 0
CMYK15 67 100 65
PMS7568
Portocaliu 1000
HEX#802B00
RGB128 43 0
CMYK10 72 100 46
PMS1615
Portocaliu 900
HEX#AA3E00
RGB170 62 0
CMYK6 71 100 32
PMS1605
Portocaliu 800
HEX#D55300
RGB213 83 0
CMYK2 77 100 9
PMS1525
P
Portocaliu
Portocaliu 700
HEX#FF6B00
RGB255 107 0
CMYK0 70 100 0
PMS165
Portocaliu 600
HEX#FF8025
RGB255 128 37
CMYK0 59 80 0
PMS164
Portocaliu 500
HEX#FF954A
RGB255 149 74
CMYK0 46 70 0
PMS0
Portocaliu 400
HEX#FFAB6F
RGB255 171 111
CMYK0 33 57 0
PMS2016
Portocaliu 300
HEX#FFC094
RGB255 192 148
CMYK0 27 40 0
PMS713
Portocaliu 200
HEX#FFD6B9
RGB255 214 185
CMYK0 16 32 0
PMS2015
Portocaliu 100
HEX#FFEBDE
RGB255 235 222
CMYK0 8 16 0
PMS2015 @50%
Atenție Galben
Galben 1200
HEX#251E00
RGB37 30 0
CMYK39 43 80 91
PMSNegru 2
Galben 1100
HEX#493C00
RGB73 60 0
CMYK23 38 89 70
PMS455
Galben 1000
HEX#6D5A00
RGB109 90 0
CMYK19 37 100 59
PMS133
Galben 900
HEX#927800
RGB146 120 0
CMYK10 23 100 43
PMS456
Galben 800
HEX#B69700
RGB182 151 0
CMYK8 21 100 28
PMS111
Galben 700
HEX#DBB600
RGB219 182 0
CMYK2 22 100 8
PMS110
P
Galben
Galben 600
HEX#FFD600
RGB255 214 0
CMYK0 11 97 2
PMS7405
Galben 500
HEX#FFDC2B
RGB255 220 43
CMYK0 8 86 0
PMS7404
Galben 400
HEX#FFE355
RGB255 227 85
CMYK0 7 75 0
PMS128
Galben 300
HEX#FFEA80
RGB255 234 128
CMYK0 4 62 0
PMS127
Galben 200
HEX#FFF1AA
RGB255 241 170
CMYK0 3 43 0
PMS1205
Galben 100
HEX#FFF8D5
RGB255 248 213
CMYK0 4 27 0
PMS7401
Educație Purple
Violet 1200
HEX#170618
RGB23 6 24
CMYK100 100 10 79
PMS276
Violet 1100
HEX#290B2C
RGB41 11 44
CMYK91 100 8 59
PMS2695
P
Academie
Purple 1000
HEX#3E1142
RGB62 17 66
CMYK85 100 6 38
PMS2627
Violet 900
HEX#5E1A64
RGB94 26 100
CMYK75 100 8 26
PMS2623
Violet 800
HEX#7F2387
RGB127 35 135
CMYK67 95 4 16
PMS520
P
Violet
Violet 700
HEX#9F2CAA
RGB159 44 170
CMYK58 90 0 0
PMS2592
Violet 600
HEX#BF36CB
RGB191 54 203
CMYK51 79 0 0
PMS258
Violet 500
HEX#CA59D4
RGB202 89 212
CMYK36 60 0 0
PMS7440
Violet 400
HEX#D57CDD
RGB213 124 221
CMYK27 52 0 0
PMS7439
Violet 300
HEX#E09FE6
RGB224 159 230
CMYK26 37 0 0
PMS264
Violet 200
HEX#ECC2EF
RGB236 194 239
CMYK17 20 0 1
PMS665
Violet 100
HEX#F7E5F8
RGB247 229 248
CMYK3 6 0 2
PMS663
Utilizare și context
Selectarea atentă a culorilor și a contextului acestora este esențială pentru conturarea narațiunii creative, evocarea emoțiilor și asigurarea armoniei vizuale între elementele de design. Utilizați culoarea caracterelor pentru a crea o experiență de lectură confortabilă și utilizați culori care evocă acțiunea. Nu folosiți niciodată o culoare de acțiune ca titlu. Rezervați albastrul nostru pentru acțiune și linkuri și evitați să îl utilizați pentru tipuri statice. Asigurați-vă că consultați liniile directoare privind accesibilitatea pentru a afla cerințele privind contrastul tipografic adecvat.
Text
Grafică
Gradiente
Gradientele adaugă un sentiment de profunzime și ajută la comunicarea stratificării în cadrul compoziției. De asemenea, acestea pot fi utilizate pentru gradarea culorilor și umbrirea zonelor pentru tipografie. Utilizați culoarea gradată ca modalitate de a atrage ochiul privitorului într-o direcție prin conținut.
Atunci când creați gradienți, încercați să păstrați un efect subtil și folosiți o paletă în modul "skip-step", sărind peste o treaptă de culoare într-un grup de nuanțe pentru definire. Amestecarea grupurilor de culori poate fi o modalitate de a aduce culoare dinamică unei piese. Evitați să folosiți gradienți cu accente puternice ca stropi mari de culoare pe o piesă.
Blocarea culorilor
Text
Electric
Pentru a crea efectul nostru electric, utilizați liniile directoare de mai jos pentru a asigura un aspect consecvent în cadrul diferitelor experiențe.
Utilizați nuanțele unui grup de culori și construiți grupul dvs. de pictograme după cum se arată mai jos. Tehnici similare pot fi utilizate pentru alte forme de ilustrare, cum ar fi liniile sau marginile. Dimensiunea și opacitatea strălucirii și a luminii punctuale vor trebui să se adapteze graficului sau textului pentru a face efectul subtil și curat.
Pentru tipurile de caractere, se pot utiliza aceleași combinații de culori, dar acordați o atenție deosebită accesibilității. Evitați să folosiți această tehnică pe caractere mari, bold sau minuscule. Reglați spoturile opționale pentru a se potrivi blocului de text.
Specificațiile prezentate sunt pentru Figma. Vor trebui făcute ajustări pentru a se potrivi vizual în aplicațiile noastre.
Formula
Variații
Tip
Accesibilitate
Primare
Pentru a ne asigura că un număr cât mai mare de clienți ai noștri au parte de o experiență consistentă, ne dorim întotdeauna să rămânem cât mai accesibili posibil. Un mod în care putem face acest lucru este prin aderarea la liniile directoare WCAG 2.1 privind raporturile de contrast pentru text.
Mai jos veți vedea testarea completă a culorilor noastre utilizate cu fontul nostru la 16 pt pentru culori acceptabile de blocare a textului. Dacă este marcată cu "Atenție", înseamnă că îndeplinește doar standardele AA și ar trebui utilizată numai pentru text mare sau text cu greutate mare.
Acțiune
Culoarea noastră albastră OPSWAT este principala nuanță de culoare CTA și trebuie acordată o atenție deosebită atunci când este plasată peste blocurile noastre de culori primare.
Accente
Atunci când utilizați statutul și accentele noastre, fiți foarte atenți la accesibilitate. Dacă o culoare de font și blocarea sunt prezentate mai jos, acestea nu sunt recomandate.
Academia
Atunci când utilizați Academia noastră Purple, acordați o atenție deosebită accesibilității. Dacă o culoare de font și blocarea sunt prezentate mai jos, acestea nu sunt recomandate.
