Deine Farbpalette
Passe hier die globalen Farben deiner Website an
Global: Du bearbeitest die Farbe an einer Stelle, und die Änderung wird quer über die gesamte Website wirksam – überall dort, wo die globale Farbe im Einsatz war. So kannst du mit wenigen Klicks die komplette Farbwelt der Website anpassen.
Hauptfarbe: Wenn du nur mit einer Hauptfarbe arbeitest, verwende bei Hauptfarbe 1 und Hauptfarbe 2 den selben HEX-Code.
Typo-Farbe (Schriftfarbe): Als Schriftfarbe (hell/dunkel) wird für ein einheitliches Erscheinungsbild meist die Hintergrundfarbe (hell/dunkel) verwendet. Nichts desto trotz ist es sinnvoll, die Schriftfarbe als separates globales Farbfeld zu führen, damit man ggf. Anpassungen an der Schriftfarbe machen kann, ohne dabei
gleichzeitig die Hintergrundfarben zu verändern.
Hover-Farbe: Als Hover- oder Mouseover-Effekt bezeichnet man einen Effekt, der ausgelöst wird, wenn man mit der Maus über ein Element fährt. Dieser Effekt wird oft bei Links oder Buttons benutzt, um anzuzeigen, dass hier eine Interaktion möglich ist. In deinem Template sind die Buttons mit Hover-Effekt versehen – die Hover-Farbe sollte jeweils einen Tick dunkler als die Basisfarbe sein.
Default: Standard-Einstellung für die gesamte Website, nutze hier Hauptfarbe 2 (oder Hauptfarbe 1, wenn du mit einer Hauptfarbe arbeitest).
Hauptfarbe(n) und Hintergrundfarben
Hauptfarbe 1
#FED8C7
Hauptfarbe 2
#F4EFE6
BG Light (Hintergrund Hell)
#B7B7A4
BG Dark ( Hintergrund Dunkel)
#C1C5CC
Schrift/Typo
Typo Light (Schriftfarbe Hell)
#ffffff
Typo Dark (Schriftfarbe Dunkel)
#000000
Typo Link (Linkfarbe)
#5E6C5B
Hover
Hauptfarbe 1 | HOVER
#FCC1A8
Hauptfarbe 2 | HOVER
#E4E0D9
BG Light (Hintergrund Hell) | HOVER
#AAAA97
BG Dark (Hintergrund Dunkel) | HOVER
#a8afba
Design-Check
Deine Farben in Action
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.
Background = Haupt 1 cTA
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Background = Haupt 2
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Background = weiß
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Background = DARK
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Background = Light
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Background = Weiß
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Background = BG Dark
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Background = BG Light
Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, Textlink Farbe und Design. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.