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
#E8B466
Hauptfarbe 2
#E8B466
BG Light (Hintergrund Hell)
#E8B466
BG Dark ( Hintergrund Dunkel)
#845C2A
Schrift/Typo
Typo Light (Schriftfarbe Hell)
#E8B466
Typo Dark (Schriftfarbe Dunkel)
#845C2A
Typo Link (Linkfarbe)
#CC5A18
Hover
Hauptfarbe 1 | HOVER
#E8B466
Hauptfarbe 2 | HOVER
#E8B466
BG Light (Hintergrund Hell) | HOVER
#f0d9b2
BG Dark (Hintergrund Dunkel) | HOVER
#a68760
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.