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
#4a808c
Hauptfarbe 2
#f4eee4
BG Light (Hintergrund Hell)
#D9C091
BG Dark ( Hintergrund Dunkel)
#A4947C
Schrift/Typo
Typo Light (Schriftfarbe Hell)
#e9e7e3 #f4eee4
Typo Dark (Schriftfarbe Dunkel)
#593B2A
Typo Link (Linkfarbe)
#958b7a
Hover
Hauptfarbe 1 | HOVER
#0d545d
Hauptfarbe 2 | HOVER
#ded6c8
BG Light (Hintergrund Hell) | HOVER
#ded6c8
BG Dark (Hintergrund Dunkel) | HOVER
#A4947C
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
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.