Primäre
Unsere primäre Palette bildet den Großteil unserer kreativen Arbeit und sollte die stärksten Farbtöne in jedem Stück darstellen.
Farben
Unsere Farbpalette ist in unserer Geschichte verwurzelt und bildet die Grundlage für unser Erscheinungsbild. Sie kann eingesetzt werden, um einen mutigen, selbstbewussten Auftritt zu zeigen oder eine klare Expertise zu vermitteln.
Unsere Farbpalette wurde so gestaltet, dass sie eine Vielzahl von visuellen Szenarien und Medien unterstützt und dabei eine klare Konsistenz aufweist. Tönungen, Transparenzen oder opake Werte der Palette sollten vermieden werden. Halten Sie sich stattdessen an die angegebenen Farbtöne.
Schattierungen
Für mehr Flexibilität sind die 3 Hauptfarbpaletten in verschiedenen Farbwerten erhältlich. Verwenden Sie die Farbtöne so, wie sie sind, ohne sie abzutönen oder Transparenz hinzuzufügen.
Schwarz & Weiß
Schwarz
Schwarz 100
HEX#000000
CMYK60 50 40 100
Weiß
Weiß 100
HEX#FFFFFF
CMYK0 0 0 0
Neutrale Farbtöne
Neutral 1200
HEX#0C121D
CMYK100 79 44 93
Neutral 1100
HEX#141B27
CMYK88 76 30 82
Neutral 1000
HEX#172234
CMYK95 72 15 67
Neutral 900
HEX#24324B
CMYK95 74 7 44
Neutral 800
HEX#344565
CMYK78 58 6 32
Neutral 700
HEX#475B81
CMYK60 40 5 20
Neutral 600
HEX#607497
CMYK43 25 3 8
Neutral 500
HEX#A9B2C4
CMYK34 17 2 7
Neutral 400
HEX#C7CCD5
CMYK24 12 2 6
Neutral 300
HEX#DEE0E4
CMYK14 7 3 5
Neutral 200
HEX#EBECEE
CMYK4 2 3 4
Neutral 100
HEX#F8F9F9
CMYK2 1 2 2
Blaue Farbtöne
P
Mitternacht
Blau 1200
HEX#050F22
CMYK100 80 0 90
Blau 1100
HEX#091B3B
CMYK100 79 12 70
P
Marineblau
Blau 1000
HEX#0D2654
CMYK100 79 12 59
Blau 900
HEX#123D8B
CMYK100 75 2 18
Blau 800
HEX#1854C3
CMYK100 75 0 0
P
Blau
Blau 700
HEX#1D6BFC
CMYK90 48 0 0
Blau 600
HEX#357BFC
CMYK88 40 0 0
Blau 500
HEX#5690FD
CMYK87 30 0 0
Blau 400
HEX#77A6FD
CMYK85 21 0 0
Blau 300
HEX#A5C4FE
CMYK60 6 0 0
Blau 200
HEX#C6DAFE
CMYK34 3 0 0
Blau 100
HEX#E8F0FF
CMYK7 1 0 0
Akzente
Zur Akzentuierung unserer primären Palette haben wir auch eine Reihe von elektrischen Paletten, um Bewegung zu vermitteln und die Aufmerksamkeit auf bestimmte Bereiche zu lenken. Akzentfarben sollten nie als große Farbkleckse verwendet werden und weniger als 5 % des Layouts ausmachen.
Technologie Teal
Teal 1200
HEX#001D1E
CMYK100 41 35 87
Teal 1100
HEX#013E42
CMYK100 21 28 76
Teal 1000
HEX#016065
CMYK100 16 24 60
Teal 900
HEX#018288
CMYK100 12 21 44
Teal 800
HEX#02A3AC
CMYK100 10 29 20
Teal 700
HEX#02C5CF
CMYK98 0 28 4
P
Teal
Teal 600
HEX#02E9F5
CMYK74 0 13 0
Teal 500
HEX#28F2FD
CMYK62 0 8 0
Teal 400
HEX#58F5FD
CMYK48 0 9 0
Teal 300
HEX#88F8FE
CMYK36 0 9 0
Teal 200
HEX#B8FBFE
CMYK23 0 1 0
Teal 100
HEX#E8FEFF
CMYK10 2 0 0
Sicherheit Grün
Grün 1200
HEX#002318
CMYK93 33 68 85
Grün 1100
HEX#004832
CMYK94 28 74 73
Grün 1000
HEX#006C4C
CMYK89 19 72 60
Grün 900
HEX#009165
CMYK90 14 62 43
Grün 800
HEX#00B67F
CMYK100 5 65 26
Grün 700
HEX#00DA99
CMYK99 0 69 0
P
Grün
Grün 600
HEX#00FFB2
CMYK66 0 48 0
Grün 500
HEX#2DFFC0
CMYK55 0 38 0
Grün 400
HEX#59FFCD
CMYK43 0 28 0
Grün 300
HEX#86FFDB
CMYK33 0 18 0
Grün 200
HEX#B3FFE8
CMYK20 0 14 0
Grün 100
HEX#DFFFF5
CMYK17 0 12 0
Gefahr Rot
Rot 1200
HEX#290009
CMYK42 69 37 85
Rot 1100
HEX#530013
CMYK30 85 59 70
Rot 1000
HEX#7E001D
CMYK9 100 64 48
Rot 900
HEX#A90027
CMYK7 100 68 32
Rot 800
HEX#D40031
CMYK3 100 70 12
P
Rot
Rot 700
HEX#FF003D
CMYK0 100 72 0
Rot 600
HEX#FF254A
CMYK0 94 64 0
Rot 500
HEX#FF495E
CMYK0 76 54 0
Rot 400
HEX#FF6E75
CMYK0 54 38 0
Rot 300
HEX#FF9392
CMYK0 42 18 0
Rot 200
HEX#FFBAB7
CMYK0 23 6 0
Rot 100
HEX#FFDFDB
CMYK0 14 5 1
Warnung Orange
Orange 1200
HEX#2B0C00
CMYK32 72 99 81
Orange 1100
HEX#551A00
CMYK15 67 100 65
Orange 1000
HEX#802B00
CMYK10 72 100 46
Orange 900
HEX#AA3E00
CMYK6 71 100 32
Orange 800
HEX#D55300
CMYK2 77 100 9
P
Orange
Orange 700
HEX#FF6B00
CMYK0 70 100 0
Orange 600
HEX#FF8025
CMYK0 59 80 0
Orange 500
HEX#FF954A
CMYK0 46 70 0
Orange 400
HEX#FFAB6F
CMYK0 33 57 0
Orange 300
HEX#FFC094
CMYK0 27 40 0
Orange 200
HEX#FFD6B9
CMYK0 16 32 0
Orange 100
HEX#FFEBDE
CMYK0 8 16 0
Vorsicht Gelb
Gelb 1200
HEX#251E00
CMYK39 43 80 91
Gelb 1100
HEX#493C00
CMYK23 38 89 70
Gelb 1000
HEX#6D5A00
CMYK19 37 100 59
Gelb 900
HEX#927800
CMYK10 23 100 43
Gelb 800
HEX#B69700
CMYK8 21 100 28
Gelb 700
HEX#DBB600
CMYK2 22 100 8
P
Gelb
Gelb 600
HEX#FFD600
CMYK0 11 97 2
Gelb 500
HEX#FFDC2B
CMYK0 8 86 0
Gelb 400
HEX#FFE355
CMYK0 7 75 0
Gelb 300
HEX#FFEA80
CMYK0 4 62 0
Gelb 200
HEX#FFF1AA
CMYK0 3 43 0
Gelb 100
HEX#FFF8D5
CMYK0 4 27 0
Bildung Lila
Purple 1200
HEX#170618
CMYK100 100 10 79
Purple 1100
HEX#290B2C
CMYK91 100 8 59
P
Akademie
Purple 1000
HEX#3E1142
CMYK85 100 6 38
Purple 900
HEX#5E1A64
CMYK75 100 8 26
Purple 800
HEX#7F2387
CMYK67 95 4 16
P
Lila
Lila 700
HEX#9F2CAA
CMYK58 90 0 0
Purple 600
HEX#BF36CB
CMYK51 79 0 0
Purple 500
HEX#CA59D4
CMYK36 60 0 0
Purple 400
HEX#D57CDD
CMYK27 52 0 0
Purple 300
HEX#E09FE6
CMYK26 37 0 0
Lila 200
HEX#ECC2EF
CMYK17 20 0 1
Lila 100
HEX#F7E5F8
CMYK3 6 0 2
Verwendung und Kontext
Die sorgfältige Auswahl der Farbe und ihres Kontexts ist entscheidend für die Gestaltung der kreativen Erzählung, das Hervorrufen von Emotionen und die Gewährleistung der visuellen Harmonie zwischen den Designelementen. Verwenden Sie die Schriftfarbe, um ein angenehmes Leseerlebnis zu schaffen, und verwenden Sie Farben, die zum Handeln anregen. Verwenden Sie niemals eine Aktionsfarbe als Überschrift. Reservieren Sie Blau für Aktionen und Links und vermeiden Sie die Verwendung für statische Schriften. Beachten Sie die Zugänglichkeitsrichtlinien für den richtigen Schriftkontrast.
Text
Grafiken
Farbverläufe
Farbverläufe verleihen ein Gefühl von Tiefe und tragen dazu bei, eine Schichtung innerhalb der Komposition zu vermitteln. Sie können auch zur Farbabstufung und Schattierung von Bereichen für die Typografie verwendet werden. Verwenden Sie Farbverläufe, um das Auge des Betrachters in eine bestimmte Richtung durch den Inhalt zu lenken.
Beim Aufbau von Farbverläufen sollten Sie versuchen, den Effekt dezent zu halten und eine Palette schrittweise zu verwenden, indem Sie eine Farbstufe in einer Farbgruppe zur Definition überspringen. Das Mischen von Farbgruppen kann eine Möglichkeit sein, dynamische Farben in ein Werk zu bringen. Vermeiden Sie akzentreiche Farbverläufe als große Farbkleckse auf einem Stück.
Farbblockierung
Text
Elektrisch
Um unseren elektrischen Effekt zu erzeugen, sollten Sie die folgenden Richtlinien befolgen, um ein einheitliches Erscheinungsbild über verschiedene Erlebnisse hinweg zu gewährleisten.
Verwenden Sie die Schattierungen einer Farbgruppe und bauen Sie Ihre Symbolgruppe wie unten gezeigt auf. Ähnliche Techniken können für andere Illustrationsformen wie Linien oder Rahmen verwendet werden. Die Größe und Deckkraft von Glow und Spotlight muss mit der Grafik oder dem Text skaliert werden, damit der Effekt subtil und sauber ist.
Für die Schrift können dieselben Farbkombinationen verwendet werden, aber achten Sie genau auf die Zugänglichkeit. Vermeiden Sie es, die Technik auf große, fette Schrift oder kleine Schrift anzuwenden. Passen Sie optionale Scheinwerfer an die Form des Textblocks an.
Die angegebenen Spezifikationen gelten für Figma. Es müssen Anpassungen vorgenommen werden, damit sie in unseren Anwendungen visuell übereinstimmen.
Formel
Variationen
Typ
Erreichbarkeit
Primäre
Um sicherzustellen, dass möglichst viele unserer Kunden eine einheitliche Erfahrung machen, wollen wir immer so zugänglich wie möglich bleiben. Eine Möglichkeit, dies zu erreichen, ist die Einhaltung der WCAG 2.1-Richtlinien für das Kontrastverhältnis von Text.
Unten sehen Sie den vollständigen Test unserer Farben, die mit unserer Schriftart in 16 pt für akzeptable Textblockierungsfarben verwendet werden. Wenn die Farbe als "Vorsicht" markiert ist, bedeutet dies, dass sie nur AA-Standards erfüllt und nur für großen oder fett gedruckten Text verwendet werden sollte.
Aktion
Unser OPSWAT ist unser Haupt-CTA-Farbton und sollte besonders sorgfältig über unseren primären Farbblöcken platziert werden.
Akzente
Achten Sie bei der Verwendung unserer Status und Akzente besonders auf die Barrierefreiheit. Wenn eine Schriftfarbe und eine Blockierung unten angezeigt werden, sind sie nicht empfehlenswert.
Akademie
Achten Sie bei der Nutzung unserer Academy Purple besonders auf die Barrierefreiheit. Wenn eine Schriftfarbe und eine Blockierung unten angezeigt werden, sind sie nicht empfehlenswert.
