Webseiten-Styleguide: Farben

Hauptfarben

Primary
(News)
#04558B

Secondary
(Pages)
#599DC0

Tertiary
(Projekte)
#D14751

Base
(Seitenhintergrund)
#ffffff

Contrast
(Textfarbe)
#333B42

Accentfarben

Accent 1
(Projekttag)
#4DB3AA

Accent 2
(Fortbildung)
#6A609F

Accent 3
(Beratung)
#C6395C

Accent 8 *
(Sonstiges)
#629f59

|

Accent 4
(Handreichung)
#9A99E5

Accent 5
(Podcast)
#F6DB79

Accent 6
(Erklärfilm)
#FC6B61

Accent 7
(Broschüre & Flyer)
#79D2C0

Accent 4 bis 7 nutzen als Textfarbe:

Black 60%

* Der Bedarf für diese Akzentfarbe ergab sich zu einem fortgeschrittenen Zeitpunkt. Deswegen bricht es als „Nummer 8“ etwas aus der Reihe.


Weiss Abstufungen

Als Hintergrundfarbe auf bereits farbigen Hintergrund

White 85%

White 80%

White 75%

White 70%

White 50%

White 001

Als Text auf Farbe

White 85%

White 80%

White 75%

White 70%

White 50%

White 001

Schwarz Abstufungen

Als Hintergrundfarbe auf bereits farbigen Hintergrund

Black 60%

Black 50%

Black 40%

Black 25%

Black 001

Als Text auf Farbe

Black 60%

Black 50%

Black 40%

Black 25%

Black 001

Als Hintergrundfarbe auf weißen Hintergrund (achtet bitte auf den Wechsel der Textfarbe für Kontrast bzw. Lesbarkeit)

Black 60%

Black 50%

Black 40%

Black 25%

Black 001

Als Text auf weißen Hintergrund

Black 60%

Black 50%

Black 40%

Black 25%

Black 001


Sonstige Farben

Green

Das „Häkchen“ bei Projekten nutzt diese Farbe.
Ist eigentlich nur in der Programmierung relevant.

Transparent

Eventuell nützlich wenn ihr einen unsichtbaren Hintergrund braucht.
Ist eigentlich nur in der Programmierung relevant.