Farben

Unsere Farbpalette ist sorgfältig ausgewählt, um Emotionen zu wecken und eine konsistente Markenerfahrung zu schaffen.

Markenfarben

Die vier Markenfarben bilden die visuelle Basis für alle Kommunikationsmittel – von digital bis Print.

Primär

Pink

  • HEX #E12D64
  • RGB 225, 45, 100
  • CMYK 3-92-37-0

Hauptaktionen, Primärfarbe

Sekundär

Gelb

  • HEX #FFBE13
  • RGB 255, 190, 19
  • CMYK 0-29-91-0

Akzente, Highlights

Tertiär

Lila

  • HEX #A03F88
  • RGB 160, 63, 136
  • CMYK 44-86-8-0

Sekundäre Aktionen

Tertiär

Blau

  • HEX #3BABCC
  • RGB 59, 171, 204
  • CMYK 70-12-15-0

Informationen, Links

Farbfächer

Abstufungen der Markenfarben in 10%-Schritten.

#E12D64
#E44274
#E75783
#EA6C93
#ED81A2
#F096B2
#F3ABC1
#F6C0D1
#F9D5E0
#FCEAF0
#FFBE13
#FFC52B
#FFCB42
#FFD25A
#FFD871
#FFDF89
#FFE5A1
#FFECB8
#FFF2D0
#FFF9E7
#A03F88
#AA5294
#B365A0
#BD79AC
#C68CB8
#D09FC4
#D9B2CF
#E3C5DB
#ECD9E7
#F6ECF3
#3BABCC
#4FB3D1
#62BCD6
#76C4DB
#89CDE0
#9DD5E6
#B1DDEB
#C4E6F0
#D8EEF5
#EBF7FA

Neutralfarben

Neutrale Farben sorgen für Balance, Struktur und Lesbarkeit in allen Kommunikationsmitteln der Marke.

Wortmarke

  • HEX #282828
  • RGB 40, 40, 40
  • CMYK 68-56-51-72

Wortmarke, Logoschrift

Texte

  • HEX #000000
  • RGB 0, 0, 0
  • CMYK 40-0-0-100

Überschriften, Fließtext

Invertiert

  • HEX #ffffff
  • RGB 255, 255, 255
  • CMYK 0-0-0-0

Helle Hintergründe, invertierte Elemente

Farbverläufe

Kombinationen der Markenfarben als Verläufe. Klick auf den CSS-Code zum Kopieren.

Mono Pink

Für Print-Anwendungen:

#82123D #C81F5F #E12D64

Hero-Bereiche, Header

Gelb zu Pink

Für Print-Anwendungen:

#FFBE13 #E96697 #CB1F5F

Akzente, Feature-Bereiche

Verwendungsrichtlinien

Erlaubt
Primärfarbe für wichtige Aktionen

Setze die Primärfarbe gezielt für CTAs, Links und Hauptelemente ein.

Sekundärfarben für Akzente

Nutze Sekundärfarben zur Unterstützung und Differenzierung von Inhaltsbereichen.

Farbverläufe für Hintergrundflächen

Setze Verläufe gezielt für große Flächen wie Hero-Bereiche und Section-Hintergründe ein.

Abstufungen für Hintergründe und Hover

Helle Tints (10%–30%) eignen sich für Hintergründe, Container und Hover-Zustände.

Kontrastverhältnisse einhalten (WCAG AA)

Mindest-Kontrast 4,5:1 für Normaltexte, 3:1 für große Texte.

Nicht erlaubt
Zu viele Farben gleichzeitig mischen

Mehr als zwei Farben nebeneinander verwässern die Markenwirkung.

Eigene Farbtöne außerhalb des Systems

Verwende ausschließlich die definierten CSS-Variablen des Farbsystems.

Farbverläufe auf kleinen Elementen

Verläufe nicht für Buttons, Icons oder Inline-Texte verwenden – nur für großflächige Hintergründe.

Barrierefreiheits-Standards ignorieren

Farbe darf nicht das einzige Mittel zur Informationsübertragung sein.