Auf einer Website hat jede Farbe eine Aufgabe: Hintergrund, Text, Buttons, Links und Hinweise. Diese 12 Farbpaletten sind genau dafür gemacht, mit hellem oder dunklem Hintergrund, gut lesbarer Textfarbe und einem Akzent für Buttons. Kopiere die HEX-Codes direkt in dein CSS oder deinen Website-Baukasten.
Klares SaaS-Blau
Fast weißer Hintergrund, sehr dunkelblauer Text und leuchtend blaue Buttons.
Dezentes Corporate
Für Kanzleien, Beratungen oder Industrieunternehmen.
Warmer Onlineshop
Orange lässt die Kaufen-Buttons auf warmem Grund hervorstechen.
Dark Mode mit Grün
Gestufte dunkle Hintergründe, heller Text und ein grüner Akzent für Aktionen.
Natürlich und bio
Für Naturkostläden, Höfe oder Wellness-Marken.
Freundliches Pastell
Nahbar; das dunkle Blaugrau hält den Text gut lesbar.
Editorial mit Rot
Für Blogs, Magazine und Medien; Rot markiert Links und Überschriften.
Tech-Lila
Verbreitet bei digitalen Produkten, Onlinekursen und KI-Tools.
Türkis und Koralle
Zwei Komplementärakzente: einer für Buttons, einer für Hinweise.
Dunkler Luxus
Für Hotels, Restaurants oder Premiummarken, bei denen die Fotos führen.
Gesundheit und Wohlbefinden
Klar und ruhig; gut für Praxen und Therapieangebote.
Sand und Petrol
Warm und doch seriös; für Reisen, Immobilien oder Cafés.
Tippe auf eine Farbe, um ihren HEX-Code zu kopieren. Das Stift-Symbol öffnet die Farbpalette im Editor, wo du sie ändern kannst.
Wende die 60-30-10-Regel an
Nutze die dominante Farbe (meist den Hintergrund) auf etwa 60 % der Seite, eine Nebenfarbe auf 30 % (Abschnitte, Karten, Header) und den Akzent auf den restlichen 10 %. Heb dir den Akzent für Buttons und Links auf, damit Nutzer wissen, wo sie klicken sollen.
Prüfe den Textkontrast
Die Barrierefreiheitsrichtlinien WCAG verlangen für normalen Text einen Kontrast von mindestens 4,5:1. Hellgrau auf Weiß wirkt elegant, ist aber schwer lesbar, vor allem auf dem Handy in der Sonne. Nutze vor dem Veröffentlichen einen Kontrastprüfer.
Leg Farben für Zustände und Hinweise fest
Neben deiner Markenpalette braucht eine Website Farben für Fehler (Rot), Erfolg (Grün) und Warnungen (Gelb oder Orange). Wähle Varianten, die zu deiner Palette passen, und nutze sie einheitlich in Formularen und Meldungen.
Drei oder vier reichen meist: ein Hintergrund, eine Textfarbe, eine Hauptfarbe und ein Akzent, dazu die Farben für Hinweise.
Welche Farbe ist die beste für Buttons auf einer Website?
Die eine beste Farbe gibt es nicht; wichtig ist, dass sich der Button vom Hintergrund abhebt und die Farbe sonst nirgends auf der Seite verwendet wird.
Wie füge ich eine Farbpalette in meine Website ein?
Kopiere die HEX-Codes in die Farbvariablen deines CSS oder in die globalen Farbeinstellungen deines Baukastens, etwa WordPress, Wix oder Shopify.