Farben
Umfangreiche Farbauswahl (ab 5.2.5)
Dein Snackys-Template hat nun eine noch größere Farbauswahl. Mach deinen Shop mit der neuen, umfangreichen Farbauswahl einzigartig. Passe alles genau nach deinen Wünschen an – der Kreativität sind keine Grenzen gesetzt!
Du wurdest etwas überkreativ und möchtest wieder zurück zum Standard? Oder du suchst nach einem Update welche Farben wohin übertragen wurden? Dann hilft dir die nachfolgende Tabelle sicher weiter
| Gruppe | Farbname | Standardwert (Neuinstallation) | Geerbt von (bei Update) |
|---|---|---|---|
| General | Firmenfarbe | #F96058 | Brand / Firmenfarbe |
| General | Preise | #F96058 | Brand / Firmenfarbe |
| General | Seiten-Hintergrund | #ffffff | #fff |
| General | Hintergrund (Akzent) | #f6f6f6 | #f6f6f6 |
| General | Texte | #555555 | Textfarbe |
| General | Texte (leicht) | #888888 | Textfarbe hell |
| General | Text (fett) | #333333 | Textfarbe dunkel |
| General | Link | #444444 | Textfarbe |
| General | Link (mouse-over) | #F96058 | Brand / Firmenfarbe |
| General | Trennlinien | #dddddd | Rahmenfarbe standard |
| General | Trennlinien (hell) | #eeeeee | Rahmenfarbe hell |
| General | Icons | #000000 | #000000 |
| Text | Überschrift 1 | #333333 | Textfarbe dunkel |
| Text | Überschrift 2 | #333333 | Textfarbe dunkel |
| Text | Überschrift 3 | #333333 | Textfarbe dunkel |
| Text | Überschrift 4 | #333333 | Textfarbe dunkel |
| Text | Überschrift 5 | #333333 | Textfarbe dunkel |
| Text | Überschrift 6 | #333333 | Textfarbe dunkel |
| Text | Text (Gefahr) | #FF5042 | Hintergrund Achtung |
| Text | Text (Erfolg) | #04D06C | Hintergrund Erfolg |
| Text | Text (Warning) | #FFC041 | Hintergrund Warnung |
| Text | Text (Info) | #6FA6FF | Hintergrund Info |
| Alerts | Normal - Hintergrund | #EEEEEE | Hinweisbox: Hintergrund |
| Alerts | Normal - Rahmen | #EEEEEE | Hinweisbox: Hintergrund |
| Alerts | Normal - Text | #333333 | Hinweisbox: Text |
| Alerts | Erfolg - Hintergrund | #90DFB8 | Hinweisbox Erfolg: Hintergrund |
| Alerts | Erfolg - Rahmen | #90DFB8 | Hinweisbox Erfolg: Hintergrund |
| Alerts | Erfolg - Text | #333333 | Hinweisbox Erfolg: Text |
| Alerts | Warnung - Hintergrund | #FFD47D | Hinweisbox Warnung: Hintergrund |
| Alerts | Warnung - Rahmen | #FFD47D | Hinweisbox Warnung: Hintergrund |
| Alerts | Warnung - Text | #333333 | Hinweisbox Warnung: Text |
| Alerts | Info - Hintergrund | #CFE2FF | Hinweisbox Info: Hintergrund |
| Alerts | Info - Rahmen | #CFE2FF | Hinweisbox Info: Hintergrund |
| Alerts | Info - Text | #333333 | Hinweisbox Info: Text |
| Alerts | Gefahr - Hintergrund | #FFBAB5 | Hinweisbox Achtung: Hintergrund |
| Alerts | Gefahr - Rahmen | #FFBAB5 | Hinweisbox Achtung: Hintergrund |
| Alerts | Gefahr - Text | #333333 | Hinweisbox Achtung: Text |
| Promotionbar | Hintergrund | #F96058 | Hintergrund Promotion-Leiste |
| Promotionbar | Text | #ffffff | #ffffff |
| Promotionbar | Icon | #ffffff | #ffffff |
| Benefits | Hintergrund | #eeeeee | #eeeeee |
| Benefits | Text | #555555 | Textfarbe |
| Benefits | Icon | #555555 | Textfarbe |
| Topbar | Hintergrund | #ffffff | #ffffff |
| Topbar | Link | #444444 | Textfarbe |
| Topbar | Link - Hover | #F96058 | Brand / Firmenfarbe |
| Topbar | Rahmen | #eeeeee | Rahmenfarbe hell |
| Header | Hintergrund | #ffffff | #ffffff |
| Header | Icons | #000000 | #000000 |
| Header | Icons - Hover | #F96058 | Brand / Firmenfarbe |
| Header: Search-Input | Hintergrund | #EEEEEE | Hintergrund hell |
| Header: Search-Input | Hintergrund - Bei Eingabe | #DDDDDD | Hintergrund grau |
| Header: Search-Input | Rahmen | #EEEEEE | Hintergrund hell |
| Header: Search-Input | Text | #555555 | Textfarbe |
| Header: Search-Input | Suche-Icon | #555555 | Textfarbe |
| Header: Category menu | Hintergrund | #F96058 | Brand / Firmenfarbe |
| Header: Category menu | Rahmen | #F96058 | Brand / Firmenfarbe |
| Header: Category menu | Links | #ffffff | Textfarbe auf Hintergrund |
| Header: Category menu | Link - Hover | #ffffff | Textfarbe auf Hintergrund |
| Header: Category menu | Link - Hintergrund - Hover | rgba(255, 255, 255, 0.2) | rgba(255, 255, 255, 0.2) |
| Header: Megamenu | Hintergrund | #ffffff | #ffffff |
| Header: Megamenu | Text | #555555 | Textfarbe |
| Header: Megamenu | Link | #555555 | Textfarbe |
| Header: Megamenu | Link - Hover | #F96058 | Brand / Firmenfarbe |
| Header: Megamenu | Rahmen | #F96058 | Brand / Firmenfarbe |
| Breadcrumb | Hintergrund | #EEEEEE | Hintergrund hell |
| Breadcrumb | Rahmen | #EEEEEE | Hintergrund hell |
| Breadcrumb | Link | #555555 | Textfarbe |
| Breadcrumb | Link - Hover | #F96058 | Brand / Firmenfarbe |
| Category Header | Hintergrund | #f6f6f6 | #f6f6f6 |
| Category Header | Text | #555555 | Textfarbe |
| Category Header | Überschrift | #333333 | Textfarbe dunkel |
| Category Header | Link | #555555 | Textfarbe |
| Category Header | Link - Hover | #F96058 | Brand / Firmenfarbe |
| Dropdowns | Menü - Hintergrund | #ffffff | #ffffff |
| Dropdowns | Menü - Rahmen | #ffffff | #ffffff |
| Dropdowns | Menü - Text | #555555 | Textfarbe |
| Dropdowns | Menü - Link | #555555 | Textfarbe |
| Dropdowns | Menü - Link - Hover | #F96058 | Brand / Firmenfarbe |
| Dropdowns | Button - Hintergrund | #ffffff | #ffffff |
| Dropdowns | Button - Hintergrund - Hover | #ffffff | #ffffff |
| Dropdowns | Button - Text | #555555 | Textfarbe |
| Dropdowns | Button - Text - Hover | #555555 | Textfarbe |
| Dropdowns | Button - Rahmen | #eeeeee | Rahmenfarbe hell |
| Dropdowns | Button - Rahmen - Hover | #eeeeee | Rahmenfarbe hell |
| Popups | Hintergrund | #ffffff | #ffffff |
| Popups | Text | #555555 | Textfarbe |
| Popups | Header - Hintergrund | #eeeeee | Hintergrund hell |
| Boxes | Hintergrund | #f6f6f6 | #f6f6f6 |
| Boxes | Rahmen | #f6f6f6 | #f6f6f6 |
| Boxes | Text | #555555 | Textfarbe |
| Boxes | Link | #555555 | Textfarbe |
| Boxes | Link - Hover | #F96058 | Brand / Firmenfarbe |
| Cards | Rahmen | #eeeeee | Rahmenfarbe hell |
| Cards | Header - Hintergrund | #f6f6f6 | #f6f6f6 |
| Forms | Hintergrund | #ffffff | #ffffff |
| Forms | Hintergrund - Focus | #ffffff | #ffffff |
| Forms | Rahmen | #dddddd | Rahmenfarbe standard |
| Forms | Rahmen - Focus | #dddddd | Rahmenfarbe standard |
| Forms | Text | #555555 | Textfarbe |
| Forms | Text - Focus | #555555 | Textfarbe |
| Forms | Label | #333333 | Textfarbe dunkel |
| Button - Default | Hintergrund | #eeeeee | Hintergrund hell |
| Button - Default | Hintergrund - Hover | #dddddd | Hintergrund grau |
| Button - Default | Rahmen | #eeeeee | Hintergrund hell |
| Button - Default | Rahmen - Hover | #dddddd | Hintergrund grau |
| Button - Default | Text | #555555 | Textfarbe |
| Button - Default | Text - Hover | #555555 | Textfarbe |
| Button - Primary | Hintergrund | #F96058 | Brand / Firmenfarbe |
| Button - Primary | Hintergrund - Hover | #F96058 | Brand / Firmenfarbe |
| Button - Primary | Rahmen | #F96058 | Brand / Firmenfarbe |
| Button - Primary | Rahmen - Hover | #F96058 | Brand / Firmenfarbe |
| Button - Primary | Text | #ffffff | Textfarbe auf Hintergrund |
| Button - Primary | Text - Hover | #ffffff | Textfarbe auf Hintergrund |
| Button - Warning | Hintergrund | #FFC041 | Hintergrund Warnung |
| Button - Warning | Hintergrund - Hover | #FFC041 | Hintergrund Warnung |
| Button - Warning | Rahmen | #FFC041 | Hintergrund Warnung |
| Button - Warning | Rahmen - Hover | #FFC041 | Hintergrund Warnung |
| Button - Warning | Text | #ffffff | Textfarbe auf Hintergrund |
| Button - Warning | Text - Hover | #ffffff | Textfarbe auf Hintergrund |
| Button - Info | Hintergrund | #6FA6FF | Hintergrund Info |
| Button - Info | Hintergrund - Hover | #6FA6FF | Hintergrund Info |
| Button - Info | Rahmen | #6FA6FF | Hintergrund Info |
| Button - Info | Rahmen - Hover | #6FA6FF | Hintergrund Info |
| Button - Info | Text | #ffffff | Textfarbe auf Hintergrund |
| Button - Info | Text - Hover | #ffffff | Textfarbe auf Hintergrund |
| Button - Danger | Hintergrund | #FF5042 | Hintergrund Achtung |
| Button - Danger | Hintergrund - Hover | #FF5042 | Hintergrund Achtung |
| Button - Danger | Rahmen | #FF5042 | Hintergrund Achtung |
| Button - Danger | Rahmen - Hover | #FF5042 | Hintergrund Achtung |
| Button - Danger | Text | #ffffff | Textfarbe auf Hintergrund |
| Button - Danger | Text - Hover | #ffffff | Textfarbe auf Hintergrund |
| Button - Success | Hintergrund | #04D06C | Hintergrund Erfolg |
| Button - Success | Hintergrund - Hover | #04D06C | Hintergrund Erfolg |
| Button - Success | Rahmen | #04D06C | Hintergrund Erfolg |
| Button - Success | Rahmen - Hover | #04D06C | Hintergrund Erfolg |
| Button - Success | Text | #ffffff | Textfarbe auf Hintergrund |
| Button - Success | Text - Hover | #ffffff | Textfarbe auf Hintergrund |
| Productbox | Produkttitel | #555555 | Textfarbe |
| Productbox | Produkttitel - Hover | #555555 | Textfarbe |
| Productbox | Preis | #F96058 | Brand / Firmenfarbe |
| Productbox | Bild - Hintergrund | #ffffff | #ffffff |
| Productbox | Bild - Rahmen | #eeeeee | Rahmenfarbe hell |
| Productbox | Bild - Rahmen - Hover | #F96058 | Brand / Firmenfarbe |
| Productbox | Countdown - Hintergrund | rgba(21, 21, 21, 0.7) | rgba(21, 21, 21, 0.7) |
| Productbox | Countdown - Text | #333333 | Textfarbe dunkel |
| Productbox | Variation-Hover - Hintergrund | #ffffff | #ffffff |
| Hotstock Alert | Hintergrund | #FFD47D | Knapper Bestand: Hintergrund |
| Hotstock Alert | Text | #333333 | Knapper Bestand: Text |
| Productnaviagtion | Hintergrund | #333333 | Hintergrund dunkel |
| Productnaviagtion | Icon | #ffffff | #ffffff |
| Variations - Swatches | Hintergrund | transparent | transparent |
| Variations - Swatches | Hintergrund - Hover | transparent | transparent |
| Variations - Swatches | Rahmen | #dddddd | Rahmenfarbe standard |
| Variations - Swatches | Rahmen - Hover | #F96058 | Brand / Firmenfarbe |
| Variations - Swatches | Text | #555555 | Textfarbe |
| Variations - Swatches | Text - Hover | #555555 | Textfarbe |
| Scrollbars | Hintergrund | #eeeeee | #eeeeee |
| Scrollbars | Scroll-Leiste | #666666 | #666666 |
| Tags | Standard - Hintergrund | #999999 | #999999 |
| Tags | Standard - Text | #ffffff | #ffffff |
| Tags | Primär - Hintergrund | #F96058 | Brand / Firmenfarbe |
| Tags | Primär - Text | #ffffff | #ffffff |
| Badges | Hintergrund | #F96058 | Brand / Firmenfarbe |
| Badges | Text | #ffffff | #ffffff |
| Controls | Hintergrund | #ffffff | #ffffff |
| Controls | Hintergrund - Hover | #F96058 | Brand / Firmenfarbe |
| Controls | Rahmen | #dddddd | Rahmenfarbe standard |
| Controls | Icon | #f6f6f6 | #f6f6f6 |
| Progressbar | Hintergrund | #DDDDDD | Hintergrund grau |
| Progressbar | Hintergrund - Hover | #333333 | Hintergrund dunkel |
| Boxed Layout | Hintergrund-Farbe | #EEEEEE | Seitenhintergrund Boxed Layout |
| Boxed Layout | Rahmen | #dddddd | Rahmenfarbe standard |
| Manufacturer Images | Hintergrund | #ffffff | #ffffff |
| Manufacturer Images | Rahmen | #dddddd | Rahmenfarbe standard |
| Sidebar | Hintergrund | #ffffff | #ffffff |
| Slider | Pfeile - Hintergrund | #eeeeee | Hintergrund hell |
| Slider | Pfeile - Hintergrund - Hover | #dddddd | Hintergrund grau |
| Slider | Pfeile - Icon | #333333 | #333333 |
| Tables | Hintergrund | #ffffff | #ffffff |
| Tables | Hintergrund (2te Zeile) | #f6f6f6 | #f6f6f6 |
| Tables | Rahmen | #ffffff | #ffffff |
| Tables | Strong Text | #333333 | Textfarbe dunkel |
| Tables | Text | #555555 | Textfarbe |
| Consent Manager | Modal - Hintergrund | #ffffff | #ffffff |
| Consent Manager | Modal - Hintergrund (akzent) | #f5f7fa | #f5f7fa |
| Consent Manager | Modal - Rahmen | #dddddd | Rahmenfarbe standard |
| Consent Manager | Modal - Text | #555555 | Textfarbe |
| Consent Manager | Modal - Strong Text | #333333 | Textfarbe dunkel |
| Consent Manager | Modal - Link | #555555 | Textfarbe |
| Consent Manager | Modal - Link - Hover | #F96058 | Brand / Firmenfarbe |
| Consent Manager | Button - Akzeptieren - Hintergrund | #333333 | #333333 |
| Consent Manager | Button - Akzeptieren - Hintergrund - Hover | #333333 | #333333 |
| Consent Manager | Button - Akzeptieren - Link | #ffffff | #ffffff |
| Consent Manager | Button - Akzeptieren - Link - Hover | #ffffff | #ffffff |
| Consent Manager | Button - Akzeptieren - Rahmen | #333333 | #333333 |
| Consent Manager | Button - Akzeptieren - Rahmen - Hover | #333333 | #333333 |
| Consent Manager | Button - Ablehnen - Hintergrund | #ffffff | #ffffff |
| Consent Manager | Button - Ablehnen - Hintergrund - Hover | #ffffff | #ffffff |
| Consent Manager | Button - Ablehnen - Link | #555555 | Textfarbe |
| Consent Manager | Button - Ablehnen - Link - Hover | #555555 | Textfarbe |
| Consent Manager | Button - Ablehnen - Rahmen | #dddddd | Rahmenfarbe standard |
| Consent Manager | Button - Ablehnen - Rahmen - Hover | #dddddd | Rahmenfarbe standard |
| Consent Manager | Switch - Hintergrund | #dddddd | Hintergrund grau |
| Consent Manager | Switch - Hintergrund - Aktiv | #F96058 | Brand / Firmenfarbe |
| Footer | Hintergrund | #ffffff | #ffffff |
| Footer | Trennlinien | #eeeeee | Rahmenfarbe hell |
| Footer | Text | #555555 | Textfarbe |
| Footer | Strong Text | #333333 | Textfarbe dunkel |
| Footer | Link | #555555 | Textfarbe |
| Footer | Link - Hover | #F96058 | Brand / Firmenfarbe |
| Close Button | Hintergrund | #eeeeee | #eeeeee |
| Close Button | Hintergrund - Hover | #eeeeee | #eeeeee |
| Close Button | Icon | #ffffff | #ffffff |
Infos zu älternen Versionen
Styling Vorteile Header
Wähle hier zwischen einem von drei Designs für deine Vorteilsleiste. Du kannst zwischen den Varianten Default, Light und Dark wählen. Die Vorteilsleiste aktivierst du im Tab Gestaltung.
Farbwähler
Über den Farbwähler hast du die Möglichkeit, deine gewünschte Farbe direkt über ein Colorwheel auszuwählen. Bestätige deine Auswahl über den Button unten rechts. Alternativ kannst du deine Frabe auch direkt in einem gültigen CSS-Wert eintragen (HEX, RGB, RGBA).
Verlauf Hintergrund
Trage hier einen Farbverlauf als kompletten CSS-Code ein. Wenn du hier einen Verlauf eingegeben hast, wird dieser bei allen Primär-Elementen als Hintergrund festgelegt. Dies sind unter anderem primäre Buttons, Badges und die Shopnavigation (je nach Header-Version).
Einen Generator für CSS-Farbverläufe findest du hier: https://mycolor.space/gradient
Wenn du die Einstellung leer lässt, wird stattdessen die Firmenfarbe verwendet.