Farben
Basisfarben
Die Basisfarben der WKO sind Rot, Weiß und Grau. Rot und Weiß abgleitet von der österreichischen Flagge. Sie unterstreichen die staatstragende Bedeutung der Organisation.
WKO Rot
#E20613
$wko-red
CMYK 0/100/100/0
Pantone 485 C
HKS 14
RAL 3020 Verkehrsrot
Weiß
#FFFFFF
CMYK 0/0/0/0
WKO Rot sowie Weiß werden verwendet in der Marke WKO, für die Sparte Handel und die AUSSENWIRTSCHAFT AUSTRIA, sowie Junge Wirtschaft, Frau in der Wirtschaft, Gründerservice.
WKO Grau
#666666
CMYK 0/0/0/75
Pantone 425 C
HKS 92
RAL 7005 Mausgrau
Wird verwendet in der Unterzeile der Marke
Spartenfarben
Die Spartenfarben im 4. Quadrat der Spartenlogos können als Schmuckfarbe für die Kommunikation der Sparten und Fachorganisationen verwendet werden.
Bank und Versicherung
#3D5E6C
CMYK 45/0/0/70
Pantone 5405
HKS 38
RAL 5023 Fernblau/
5008 Graublau
#D4DEE3
CMYK 9/0/0/14
Pantone 5405 20%
HKS 38 20%
RAL 7035 Lichtgrau
Gewerbe und Handwerk
#008BCF
CMYK 100/20/0/0
Pantone PROCESS BLUE
HKS 47
RAL 5015 Himmelblau
#D4E7F5
CMYK 20/4/0/0
Pantone
PROCESS BLUE 20 %
HKS 47 20 %
Der Handel
#E20613
CMYK 0/100/100/0
Pantone 485 C
HKS 14
RAL 3020 Verkehrsrot
Die Industrie
#0057A2
CMYK 100/65/0/0
Pantone REFLEX BLUE
HKS 42
RAL 5002 Ultramarinblau
#D3D9EC
CMYK 20/13/0/0
Pantone REFLEX BLUE 20%
HKS 42 20 %
Information und Consulting
#666666
CMYK 0/0/0/75
Pantone 425 C
HKS 92
RAL 7005 Mausgrau
#CCCCCC
CMYK 0/0/0/15
Pantone 425 C 20%
HKS 92 20%
RAL 7047
Tourismus und Freizeit
#007734
CMYK 100/30/100/0
Pantone 356 C
HKS 57
RAL 6029 Minzgrün
#D6E0D1
CMYK 20/6/20/0
Pantone 356 C 20%
HKS 57 20%
RAL 9002 Grauweiß
Transport und Verkehr
#2B982D
CMYK 80/10/100/0
Pantone 368
HKS 60
RAL 6018 Gelbgrün
#DFEAD6
CMYK 16/2/20/0
Pantone 368 20%
HKS 60 20%
RAL 6019 Weißgrün
Sonderdienststellen
WIFI
#339900
RGB 51/153/0
CMYK 75/0/100/0
Pantone 361
HKS 65
RAL 6018
#666666
CMYK 0/0/0/75
Pantone 425 C
HKS 92
RAL 7005 Mausgrau
#C6C6C6
RGB 198/198/198
CMYK 0/0/0/30
RAL 7044
WKO.at
Schwarz, Weiß und modernen Pastell-Paletten: Das sind die Farben von WKO.at. Die Reihenfolge spielt keine Rolle, denn es gibt hier keine Hierarchie. Entscheidend ist, dass die Farben die Botschaft unterstützen und das Gesamtlayout nicht zu bunt ist.
Klassen
Mithilfe von Klassen können den Elementen Farbwerte zugeordnet werden. Zusammengesetzt aus einem speziellen Prefix und der Variable des Farbwertes greift das entsprechende Styling.
Präfixe:
bg-- für Hintergrundfarbe
c-- für Schriftfarbe
bc-- für Rahmenfarbe
bl-- für Rahmenfarbe links
Beispiel: Eine Card mit der Klasse bg—purple-primary hat eine Hintergrundfarbe mit dem primären Lavender Ton.
Schatten
0px 3px 6px #000029
Styling Variable: $shadow
Systemfarben
Die Systemfarben werden gleichwertig und ausschließlich als Vollton eingesetzt. Sie dürfen weder abgedunkelt, aufgehellt noch transparent dargestellt werden.
Schwarz
#000000
$black
#FFFFFF
$white
Nebelgrau
#DDDDDD
$fog-grey
Focus
#0875E2
$focus
Textlink
#3D3F8C
$text-link
Textlink visited
#686DAF
$text-link-visited
Textlink Hintergrund
#EBEBF3
$text-link-bg
Text Label
#4D4D4D
$text-label
Erfolg
#167441
$success
Erfolg Benachrichtigung
#E7F1EB
$success-notification
Fehler
#BB0D3B
$error
Fehler Hintergrund
#FCF2F5
$error-bg
Hellgrau Primär
#718597
$bright-grey-primary
Hellgrau Primär 30%
#D4DAE0
$bright-grey-primary-30
Hellgrau Primär 15%
#EAEDF0
$bright-grey-primary-15
Hellgrau
#F6F6F6
$bright-grey
Webinar
#1B4BAF
$webinar
Webinar Sekundär
#7D99D0
$webinar-blue-secondary
Funktionale Pastellfarben
Thematisch zusammengehörige Bereiche werden einheitlich gestaltet, so kann es die User-Experience erheblich verbessern. Lavender wird in den Bereichen Unternehmen, Personal verwendet. Das Warm Grey ist für das Thema Wirtschaft und alles was eine Organisationseinheit darstellt, also Branchen und die Außenwirtschaft.
Lavender
Thematisch in den Bereichen Unternehmen, Personal. Wird auch in der Servicekommunikation zu diesen Themen eingesetzt.
Primary
#686DAF
$lavender-primary
RGB 104-109-175
CMYK 68-58-0-0
Primary 40%
#C2C4DF
$lavender-primary-40
RGB 194-196-223
CMYK 27-22-4-0
Secondary
#F0F0F5
$lavender-secondary
RGB 240-240-245
CMYK 7-5-3-0
Secondary 30%
#F9F9FB
$lavender-secondary-30
RGB 249-249-251
CMYK 2-2-1-0
Warm Grey
Die Farbe “Warm Grey” wird thematisch in den Bereichen Wirtschaft sowie in Organisationseinheiten wie Branchen und der Außenwirtschaft verwendet. Sie findet auch Anwendung in der Servicekommunikation zu diesen Themen. Darüber hinaus ist “Warm Grey” eine allgemeine Unternehmensfarbe für die WKO und kann sowohl für externe als auch für interne Anwendungen, wie beispielsweise der Themenradar, genutzt werden.
Primary
#8A7D60
$warm-grey-primary
RGB 138-125-96
CMYK 51-50-68-0
Primary 40%
#DCD8CF
$warm-grey-primary-40
RGB 220-216-207
CMYK 16-13-19-0
Secondary
#F2F0EA
$warm-grey-secondary
RGB 242-240-234
CMYK 6-5-9-0
Secondary 30%
#FAF9F7
$warm-grey-secondary-30
RGB 250-249-247
CMYK 2-2-3-0
Veranstaltungen (Duck Egg Green)
Wird für den Bereich der Veranstaltungen verwendet. Wird auch in der Servicekommunikation zu diesem Thema eingesetzt.
Primary
#527B6B
$duck-egg-green-primary
RGB 82-123-107
CMYK 69-33-57-18
Primary 40%
#B9CAC4
$duck-egg-green-primary-40
RGB 185-202-196
CMYK 32-13-24-1
Secondary
#D6E2DF
$duck-egg-green-secondary
RGB 214-226-223
CMYK 20-6-14-0
Secondary 30%
#F3F6F5
$duck-egg-green-secondary-30
RGB 243-246-245
CMYK 6-2-5-0
Startseite (Cold Grey)
Wird auf den Startseiten der WKx verwendet
Primary
#718597
$cold-grey-primary
RGB 113-133-151
CMYK 59-38-29-11
Primary 40%
#D4DAE0
$cold-grey-primary-40
RGB 212-218-224
CMYK 20-11-10-0
Secondary
#EAEDF0
$cold-grey-secondary
RGB 234-237-240
CMYK 10-5-5-0
Secondary 30%
#F6F6F6
$cold-grey-secondary-30
RGB 246-246-246
CMYK 4-3-4-0
Artikel merken (Happy Sun)
Ist für externe Applikationen, die sich nicht unter wko.at befinden, vorgesehen. Wie z.B. der Webshop, Das Firmen A–Z, Bildungspfade, Karriere-Portal, …
Primary
#DBB948
$happy-sun-primary
RGB 219-185-72
CMYK 16-24-80-0
Primary 40%
#F8F3D5
$happy-sun-primary-40
RGB 248-243-213
CMYK 4-3-22-0
Secondary
#FFF5BF
$happy-sun-secondary
RGB 255-245-191
CMYK 0-0-34-0
Secondary 30%
#FFFBE5
$happy-sun-secondary-30
RGB 255-251-229
CMYK 0-0-13-0
Widgets (Dusty Peach)
Thematisch den eServices zugeordnet
Primary
#EE9A89
$dusty-peach-primary
RGB 238-154-137
CMYK 0-49-41-0
Primary 40%
#F8D6D0
$dusty-peach-primary-40
RGB 248-214-208
CMYK 0-22-16-0
Secondary
#FCEADF
$dusty-peach-secondary
RGB 252-234-223
CMYK 0-11-13-0
Secondary 30%
#FEF9F5
$dusty-peach-secondary-30
RGB 254-249-245
CMYK 0-3-4-0
Spezialthemen (Fresh Mint)
Kommt zum Einsatz bei speziellen und zeitlich aktuellen Themen (z.B. Corona, Energiekrise, Ukraine …). Wird auch in der Servicekommunikation zu diesen Themen eingesetzt.
Primary
#598852
$fresh-mint-primary
RGB 88-136-82
CMYK 74-12-79-19
Primary 40%
#CDDBCA
$fresh-mint-primary-40
RGB 205-219-202
CMYK 24-7-24-0
Secondary
#E4F0E1
$fresh-mint-secondary
RGB 228-240-225
CMYK 13-0-16-0
Secondary 30%
#F7FBF6
$fresh-mint-secondary-30
RGB 247-251-246
CMYK 4-0-5-0
Video (Santorin)
Diese Farbe ist als Präsentationsfläche für Videos vorgesehen.
Primary
#181C31
$santorin-primary
RGB 24-48-49
CMYK 97-86-47-63
Primary 40%
#B9BAC0
$santorin-primary-40
RGB 185-186-192
CMYK 31-23-20-3
Secondary
#C8D1E4
$santorin-secondary
RGB 200-209-228
CMYK 25-15-6-0
Secondary 30%
#EEF0F7
$santorin-secondary-30
RGB 238-240-247
CMYK 8-5–0-0
Reserve (Fresh Breeze)
Farbe wird aktuell bei der zentralen Newslettervorlage verwendet
Primary
#4C81C6
$fresh-breeze-primary
RGB 76-129-198
CMYK 73-44-0-0
Primary 40%
#C0CDDE
$fresh-breeze-primary-40
RGB 192-205-222
CMYK 29-15-9-0
Secondary
#EDF3FA
$fresh-breeze-secondary
RGB 237-243-250
CMYK 9-3-0-0
Secondary 30%
#FAFCFE
$fresh-breeze-secondary-30
RGB 250-252-254
CMYK 2-0-0-0
Powder Blue
Wird bei der Login Schleife und für das neue Benutzerkonto verwendet.
Primary
#30798D
$powder-blue-primary
RGB 48-121-141
CMYK 78-35-33-15
Primary 40%
#ABCBD2
$powder-blue-primary-40
RGB 171-203-210
CMYK 38-10-17-0
Secondary
#B8E3E9
$powder-blue-secondary
RGB 184-227-233
CMYK 32-0-11-0
Secondary 30%
#EAF7F8
$powder-blue-secondary-30
RGB 234-247-248
CMYK 11-0-4-0