32 Website-Farbschemata mit Hex-Codes aus We.Inc-Template-Designs, plus wie Sie ein konvertierendes Schema aufbauen: ruhige Basispalette, ein Aktionsakzent, Branchenbeispiele und Barrierefreiheitsprüfungen.
Keine einzelne Farbe ist überall überlegen. Die beste Schaltflächenfarbe ist diejenige, die einen starken Kontrast zur Seite bildet und sonst nirgends verwendet wird, sodass der Blick direkt darauf fällt.
Ein gängiger Ansatz ist eine neutrale Basis (Weiß oder Cremeweiß und eine dunkle Textfarbe), eine primäre Markenfarbe und eine Akzentfarbe für Handlungsaufforderungen. Hinzu kommen Statusfarben für Erfolg und Fehlermeldungen. Mehr Farben schwächen meist die visuelle Hierarchie.
Farbassoziationen gibt es, aber sie unterscheiden sich je nach Kultur, Branche und Kontext. Viele verbreitete Behauptungen werden übertrieben dargestellt. Nachweislich wichtig für Conversions sind Kontrast, Lesbarkeit und eine visuell klare Handlungsaufforderung.
Industriekunden legen Wert auf Klarheit und Vertrauen. Marineblau, Anthrazit und Stahlgrau mit einer einzelnen kräftigen Akzentfarbe – oft Sicherheitsorange, Gelb oder leuchtendes Blau – passen gut zur Branche. Heben Sie Datenblätter, Angebots-Schaltflächen und Telefonnummern mit dieser Akzentfarbe hervor, damit sie schnell zu finden sind.
Verwenden Sie einen Kontrastprüfer wie den von WebAIM. WCAG 2.2, Konformitätsstufe AA, verlangt mindestens 4,5:1 Kontrast für normalen Text und 3:1 für großen Text sowie wichtige Bedienelemente wie Schaltflächenränder und Formularfelder.
Keine einzelne Farbe konvertiert am besten. Entscheidend ist, wie stark eine Schaltfläche gegenüber der restlichen Seite hervorsticht. Gut konvertierende Farbschemata beruhen auf einer ruhigen, einheitlichen Basis und einer kontrastreichen Akzentfarbe, die ausschließlich für die gewünschten Aktionen reserviert ist.
Fragen Sie also nicht „Welche Farbe?“, sondern: „Sieht meine wichtigste Schaltfläche anders aus als alles andere auf der Seite?“ Dieser Leitfaden zeigt, wie Sie ein Farbschema auf dieser Idee aufbauen.
Diese Paletten stammen aus den eigenen Template-Designs von We.Inc (die vier meistverwendeten Farben der Vorschau jedes Designs, ohne die schlichten Grautöne des Vorschau-Rahmens). Es handelt sich um Template-Designs, keine Kundenseiten. Wir erheben keinen Anspruch darauf, wie gut diese konvertieren. Kopieren Sie einen Hex-Code in den Hex-Farbwähler, um ihn anzuzeigen und RGB/HSL-Werte zu erhalten. Prüfen Sie jede Text-Hintergrund-Kombination im Farbkontrast-Prüfer, bevor Sie sie verwenden.
| We.Inc-Template-Design | Stil | Farben (Hex) | Schema |
|---|---|---|---|
| Atlas Builders | Bau / Handwerk | #101d2c #0b1521 #f2a614 #d18f0a | Tiefes Marine, Bernstein als Aktionsfarbe |
| Summit Trades | Handwerk | #0e2436 #e4671e #16222e #f6eeec | Marine mit Sicherheitsorange |
| Ironpeak Roofing | Dachdeckerei | #e4671e #0e2436 #17415f #16222e | Orange-dominant, Marine-Struktur |
| Ridgewater Plumbing | Sanitär | #b08544 #d8401f #f2ede3 #c9a063 | Messing und Rot auf warmem Creme |
| Sunward Solar | Solar | #0b1f3a #f5a524 #d98a0b #fff6e6 | Mitternachtsblau und Sonnen-Gold |
| Hookline Towing | Abschleppdienst | #0e0e0e #ffc400 #f4f1ea #161616 | Schwarz und Signalgelb |
| Redline Auto Group | Autohandel | #e3262e #0e0f11 #eeeeee #17191c | Racing-Rot auf fast Schwarz |
| Maple Street Motors | Kfz-Werkstatt | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Waldgrün mit Senf |
| Freshpile Carpet Cleaning | Reinigung | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Leuchtendes Gelb auf Königsmarine |
| Tideline Pressure Washing | Außenreinigung | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Dunkelblau mit Aqua |
| Mowline Lawn Care | Rasenpflege | #eef3e6 #c6f24e #0f1410 #1a2a17 | Blassgrüne Basis, Limetten-Akzent |
| Fairway Lawn Co. | Landschaftsgestaltung | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Creme, Tiefgrün, sanftes Gold |
| Brightside Dental | Zahnarzt | #10312e #3f605c #0e5f57 #0a4841 | Ruhige Petrol-Grüntöne |
| Meadowpaw Veterinary | Tierarzt | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Gedämpftes Petrol auf blassem Mintgrün |
| Vibrant Wellness | Gesundheitszentrum | #25382c #eef2e6 #7c9a7e #3f6b4a | Salbei und Wald |
| Kinfolk Home Care | Häusliche Pflege | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Kieferngrün mit warmem Gelb |
| Lumora | Gesundheitswesen | #c8a97e #182c41 #0b1220 #0e1a26 | Mitternachtsblau mit Sandgold |
| Sterling & Vance LLP | Anwaltskanzlei | #8a93a2 #b08a4f #0b0e14 #f6eeec | Schiefer, Bronze und Tinte |
| Harborview Wealth Partners | Finanzberatung | #102a43 #b08d57 #d9bf8f #faf8f4 | Marine und Gold auf Elfenbein |
| Harborline Insurance Agency | Versicherung | #0f2742 #5fd3c9 #17a398 #0b1e33 | Marine mit Petrol |
| Larkfield Partners | Unternehmensberatung | #1f4d3f #f4f1ea #14181c #4a5560 | Flaschengrün auf Papier |
| Keystone Realty | Immobilien | #f6eeec #7a2e2a #59606b #e9f0ef | Blasse Basis mit Oxblut |
| Lucia Trattoria | Restaurant | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Warmer Sand mit Olivschwarz |
| Ember & Roast | Café / Restaurant | #ede6dc #c9642f #14100d #f6eeec | Hafer, Branntholz, Espresso |
| Kilnhouse Coffee | Coffeeshop | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Röstbraun und Terrakotta |
| Parcel No. 9 Wines | Weingut | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Weinrot mit Rose |
| Petalry Florist | Florist | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Pflaume und Staubiges Rosa |
| Hollow Oak Farm Shop | Hofmarkt | #24301f #f6f1e4 #5e7f3a #e3a33b | Moos, Creme und Honig |
| Suds & Scruff | Tier-Grooming | #3b1740 #ffd84d #ff8fab #fff8e7 | Aubergine, Gelb und Pink |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Violett mit Koralle |
| Mast Security | Sicherheit | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Graphit mit Mintgrün |
| Afterglow Sound | Events / Musik | #efeaff #f472b6 #ec4899 #8b5cf6 | Lavendel, Pink und Lila |
Ein Muster, das sich dabei zeigt: Die meisten kombinieren eine dunkle oder helle Basis mit einem gesättigten Akzent (Bernstein, Orange, Gelb, Limette oder Koralle). Das entspricht der Struktur „ruhige Basis, eine Aktionsfarbe“, die weiter unten beschrieben wird.
In Artikeln über Farbpsychologie heißt es oft, Blau stehe für Vertrauen, Rot für Dringlichkeit und Grün für Wachstum. Allgemeine Assoziationen gibt es, doch sie hängen stark von Kultur, Branche und Kontext ab. Rot ist in einem Zusammenhang ein Warnsignal, in einem anderen ein Zeichen des Feierns. Grün kann „Los“, Umweltfreundlichkeit oder Geld bedeuten.
Gut belegt ist der Isolationseffekt, auch Von-Restorff-Effekt genannt: Ein Element, das sich von seiner Umgebung unterscheidet, wird eher bemerkt und erinnert. Eine Schaltfläche in der einzigen orangefarbenen Fläche auf einer blau-weißen Seite fällt auf. Auf einer Seite voller Orange tut sie das nicht.
Daraus ergeben sich zwei branchenübergreifende Regeln:
Innenarchitekten arbeiten mit einer Aufteilung von 60-30-10. Auch auf Websites funktioniert sie gut:
| Anteil | Rolle | Typische Wahl |
|---|---|---|
| etwa 60 % | Hintergrund und Basis | Weiß, Cremeweiß, sehr helles Grau oder bei dunklen Designs ein tiefes Dunkel |
| etwa 30 % | Marke und Struktur | Primäre Markenfarbe für Kopfzeile, Navigation und Abschnittshintergründe |
| etwa 10 % | Akzent und Aktion | Schaltflächen, wichtige Links, das eine Element, das angeklickt werden soll |
Ergänzen Sie eine dunkle Textfarbe (häufig fast Schwarz oder Dunkelgrau statt reinem Schwarz) und Statusfarben: Grün für Erfolg, Rot für Fehler, Bernstein für Warnungen. Halten Sie diese Statusfarben von den wichtigsten Schaltflächen fern, damit eine Schaltfläche „Jetzt kaufen“ nicht wie eine Fehlermeldung wirkt.
Wenn Sie ein Logo haben, verwenden Sie dessen Hauptfarbe als Primärfarbe. Andernfalls wählen Sie eine Farbe, die zu Ihrer Branche passt (siehe Tabelle) und mit der Sie gern arbeiten.
Betrachten Sie den Farbkreis. Komplementärfarben, die einander gegenüberliegen, erzeugen den stärksten Kontrast: Blau und Orange, Violett und Gelb, Petrol und Koralle. Wenn Ihre Marke blau ist, hebt sich Orange oder warmes Gelb deutlich stärker ab als ein zweiter Blauton.
Wählen Sie eine Hintergrundfarbe, eine Oberflächenfarbe für Karten, ein Grau für Ränder und eine Textfarbe. Diese Farben tragen den größten Teil des Designs und sollten zurückhaltend sein.
Prüfen Sie jede Kombination aus Text und Schaltfläche mit einem Kontrastprüfer (der von WebAIM ist kostenlos). WCAG 2.2, Konformitätsstufe AA, verlangt:
Hellgrauer Text auf Weiß gehört zu den häufigsten Lesbarkeitsproblemen im Web. Wenn Menschen Ihr Angebot kaum lesen können, spielt die Farbe der Schaltfläche fast keine Rolle.
Prüfen Sie die Palette draußen auf einem Smartphone, auf einem günstigen Laptop-Bildschirm und – sofern unterstützt – im dunklen Modus. Farben, die auf einem Designmonitor edel aussehen, können anderswo blass wirken.
Das sind sinnvolle Ausgangspunkte, keine festen Regeln. Jede Kombination nutzt eine ruhige Basis und einen einzigen kontrastreichen Akzent.
| Branche | Basis und Primärfarbe | Aktionsakzent | Warum es funktioniert |
|---|---|---|---|
| Fertigung und Industrie | Marineblau, Anthrazit, Stahlgrau | Sicherheitsorange oder Gelb | Seriös und zuverlässig, mit gut sichtbarer Schaltfläche „Angebot anfordern“ |
| Gesundheitswesen und Zahnmedizin | Weiß, zartes Blau oder Petrol | Warmes Korall oder Grün | Sauber und ruhig, die Buchungsschaltfläche hebt sich ab |
| Recht und Finanzen | Tiefes Marineblau oder Waldgrün, Creme | Gold oder leuchtendes Blau | Traditionelle Vertrauenssignale mit klarer Kontaktaktion |
| Restaurants und Lebensmittel | Warme Neutraltöne, Dunkelrot oder Oliv | Leuchtendes Gelb oder Orange | Appetitlich, mit klarer Schaltfläche „Bestellen“ oder „Reservieren“ |
| SaaS und Technologie | Weiß oder fast Schwarz, Indigo oder Blau | Leuchtendes Grün, Orange oder Pink | Klar gestaltet, mit kontrastreicher Schaltfläche „Kostenlos starten“ |
| Beauty und Wellness | Altrosa, Salbeigrün, Creme | Tiefes Pflaume oder Schwarz | Sanfte Markenwirkung, selbstbewusste Buchungsschaltfläche |
| Haustechnik (Klempner, Klima, Dach) | Weiß, Dunkelblau | Rot oder Orange | Dringlich wirkende Anrufschaltfläche für Notfälle |
| E-Commerce und Mode | Überwiegend Weiß und Schwarz | Ein einzelner Markenakzent | Die Produktfotos bringen die Farbe ins Spiel |
Für Hersteller gilt besonders: Käufer landen oft auf einer Produkt- oder Leistungsseite und suchen ein Datenblatt oder ein Angebot. Verwenden Sie die Akzentfarbe auf diesen Seiten ausschließlich für „Angebot anfordern“, „Datenblatt herunterladen“ und die Telefonnummer.
Stellen Sie sich die Website eines Landschaftsbauunternehmens mit grünem Logo, grünen Überschriften, grünen Symbolen, grünem Titelbild und grüner Schaltfläche „Kostenloses Angebot anfordern“ vor. Alles passt zur Marke, aber die Schaltfläche verschwindet im Gesamtbild.
So lässt sich das ändern:
An der Marke hat sich nichts geändert; die gewünschte Aktion ist jetzt das auffälligste Element auf dem Bildschirm.
Wenn Ihre Website genug Besucher hat, können Sie die Schaltflächen- oder Akzentfarbe in einem A/B-Test prüfen. Ändern Sie jeweils nur eine Sache und lassen Sie den Test lange genug laufen, damit das Ergebnis aussagekräftig ist. Websites mit wenig Traffic erreichen häufig kein verlässliches Ergebnis. Für sie eignen sich einfache Prüfungen:
Farbe ist ein Faktor für die Conversion einer Seite. Unsere Analyse zu Landingpage-Beispielen, die konvertieren behandelt die übrigen Faktoren. Bei We.Inc können Sie das gewünschte Design im Chat beschreiben, zum Beispiel „Marineblau und Grau mit einer orangefarbenen Angebots-Schaltfläche“, Vorlagen ansehen und die Farben anschließend visuell oder im Code fein abstimmen.
Kostenlos starten · Keine Kreditkarte nötig