Website-Farbpalette wählen: 5-Schritt-Prozess (2026)

# Wie du eine Website-Farbpalette wählst (Schritt für Schritt mit Beispielen)

Eine Website-Farbpalette ist die kleine Gruppe an Farben, die über die Benutzeroberfläche einer Website hinweg verwendet werden — Hintergrund, Fließtext, Links, Buttons, Akzente, Rahmen und Statusfarben wie Erfolg oder Fehler. Sie ist nicht dasselbe wie eine Marken-Farbpalette. Eine Markenpalette muss auf einer Plakatwand, einer Kaffeetasse, einer gedruckten Broschüre und einem winzigen Favicon funktionieren. Eine Website-Farbpalette muss nur auf Bildschirmen funktionieren, aber sie muss Hürden meistern, denen diese anderen Oberflächen nie begegnen: Barrierefreiheitsgesetze, Dark Mode, Farbenblindheit und die wilde Bandbreite der Monitore, die Leute tatsächlich nutzen.

Dieser Leitfaden führt dich durch einen wiederholbaren Prozess zur Wahl einer Website-Farbpalette 2026. Wähle eine Primärfarbe. Bau eine neutrale Skala. Füge einen Akzent hinzu. Lege semantische Farben drüber. Verifiziere jedes Text-auf-Hintergrund-Paar gegen WCAG-Kontrastregeln. Dann übersetze die Palette in CSS-Variablen, die deine Entwickler direkt in den Code einbauen können. Am Ende hast du eine Palette, die ausgeliefert wird, kein Pinterest-Board.

Wenn du zuerst die breitere Theorie willst — Farbkreise, Harmonien, warum bestimmte Kombinationen sich richtig anfühlen — lies unseren Farbtheorie-Hub. Wenn du strategischen Rat für eine ganze Marke willst (Logos, Verpackung, Werbung), siehe Marken-Farbpalette. Dieser Artikel ist speziell für die Website.

Die 60-30-10 Web-Design-Regel

Die 60-30-10-Regel ist der älteste, zuverlässigste Startpunkt für eine Website-Palette. Sie kommt aus der Innenarchitektur, lässt sich aber sauber auf Web-Layouts übertragen.

Hier ist die Aufschlüsselung:

• 60 % dominante Farbe. Das ist fast immer der Hintergrund. Es kann ein Off-White sein, ein sehr blasser Tint oder im Dark Mode ein Beinahe-Schwarz. Die 60 %-Farbe setzt die Stimmung und gibt deinen Augen einen Ort zum Ausruhen.
• 30 % Sekundärfarbe. Diese unterstützt die dominante Farbe. Denk an Sidebars, Karten, alternierende Sektionen, Footer. Sie ist oft ein Tint oder Shade der primären Markenfarbe oder ein leicht anderer Neutraler.
• 10 % Akzentfarbe. Das ist die Farbe, die Aufmerksamkeit zieht. CTAs, Links, Badges, Alarm-Highlights. Die 10 % sollten laut genug sein, um das Auge zu ziehen, aber sparsam genutzt werden, damit sie nie ignoriert werden.

Der große Fehler ist, den Akzent auf 30 % oder 40 % anschwellen zu lassen. Wenn alles laut ist, ist nichts laut. Die meisten Landingpages, die chaotisch wirken, haben invertierte Verhältnisse — zu viel Akzent, nicht genug Atemraum.

Eine schnelle Plausibilitätsprüfung: Mach einen Screenshot deiner Homepage, blure ihn stark und schau dir die Farbverteilung an. Der dominante Ton sollte gewinnen. Der Akzent sollte als kleine helle Punkte erscheinen, nicht als große Flächen.

Die 7-Farben-Website-Palettenstruktur

Sobald du die 60-30-10-Regel akzeptierst, ist die nächste Frage, wie viele unterschiedliche Farben du tatsächlich brauchst. Die ehrliche Antwort für die meisten Websites ist sieben.

Hier ist die Struktur, die ich für eine arbeitende Website-Palette empfehle:

1. Primär — die Markenfarbe. Verwendet für Buttons, Links, Schlüssel-UI-Elemente.
2. Sekundär — ein komplementärer oder analoger Akzent. Verwendet für Highlights, Badges, Hover-Zustände.
3. Tertiär — dekorativ. Charts, Illustrationen, Marketing-Oberflächen. Optional.
4. Text-primär — die Hauptfarbe für Fließtext. Meist ein sehr dunkles Grau, kein reines Schwarz.
5. Text-sekundär — Bildunterschriften, Hinweise, deaktivierte Zustände. Ein mittleres Grau.
6. Hintergrund-hell — die Leinwand im Light Mode. Ein Off-White oder sehr blasser Tint.
7. Hintergrund-dunkel — die Leinwand im Dark Mode. Ein Beinahe-Schwarz, oft leicht getönt.

Manche Teams erweitern das mit Oberflächenfarben (Karten, Modale) und semantischen Farben (Erfolg, Warnung, Fehler, Info), und das ist okay. Der Punkt ist, dass die dekorativen Farben klein bleiben, während die funktionalen Farben — Text, Hintergrund und Primär — die meiste Arbeit machen.

Wenn dein Design-Team dir eine 16-Farben-Markenpalette übergibt, ist es dein Job als Web-Designer, die sieben zu wählen, die tatsächlich übersetzen. Der Rest wird für anderswo archiviert.

Wähle zuerst deine Primärfarbe

Starte mit einer Farbe. Es ist meist die Markenfarbe, und falls noch keine Markenfarbe existiert, ist hier der Punkt, an dem du dich festlegst. Alles andere baut darum herum.

Drei Regeln zum Wählen einer Web-Primärfarbe:

• Vermeide volle Sättigung. Reine 100 %-Sättigungsfarben wie #FF0000 oder #0000FF wirken auf Bildschirmen hart und kollidieren mit Fotografien. Zieh die Sättigung zurück in den 60-80 %-Bereich.
• Teste sie zuerst in kleinen Größen. Eine Farbe, die in einem 400-px-Swatch super aussieht, kann in einem 14-px-Button verschwinden. Schau dir den Swatch auf einem echten Button an, bevor du dich festlegst.
• Wähle eine Farbe, mit der du leben kannst. Diese Farbe taucht in jedem Link, jedem CTA, jedem Fokus-Ring auf. Wenn du sie nach einer Woche satt hast, geht es dem Publikum auch so.

Sobald du die Primärfarbe hast, generiere Varianten. Die meisten Designsysteme definieren 9 oder 11 Stufen von sehr hell zu sehr dunkel — wie Tailwinds 50, 100, 200, ..., 900, 950-Skala. Das ist im Wesentlichen eine monochromatische Palette deiner Primärfarbe, und dieselben Tints/Shades/Tones-Regeln gelten. Nutze unseren Farbpaletten-Generator, um diese Skala aus einem einzigen Hex-Wert zu erzeugen, und stupse dann jede Stufe von Hand an, falls nötig.

Farben wählen, die auf Bildschirmen funktionieren

Web-Farben leben im sRGB-Farbraum. Das ist der kanonische Farbraum des modernen Webs — jeder Browser, jedes Betriebssystem, jeder Monitor kalibriert sich gegen ihn als Basis. Wenn du #3B82F6 wählst, löst sich dieser Hex-Code in spezifische RGB-Werte innerhalb von sRGB auf.

Warum ist das wichtig? Weil Print-Designer oft in CMYK arbeiten, und eine CMYK-Farbe, die in RGB konvertiert wird, landet selten dort, wo du es erwartest. Wenn dein Markenbuch "Pantone 286 C" sagt, kannst du nicht einfach einen Pantone-Code in CSS einfügen. Du konvertierst ihn in sein sRGB-Hex-Äquivalent und akzeptierst die kleine Verschiebung.

Ein paar Format-Notizen:

• HEX ist das kanonische Web-Format. #3B82F6. Sechs Zeichen, leicht zu merken, überall unterstützt. Lies unseren Hex-Farbcodes-Leitfaden für eine vollständige Einführung.
• RGB ist das, was HEX unter der Haube wird. rgb(59, 130, 246). Verwende es, wenn du einen Alpha-Kanal brauchst: rgba(59, 130, 246, 0.5).
• HSL ist Hex' schlauerer Cousin: hsl(217, 91%, 60%). Hue, Saturation, Lightness. Der riesige Vorteil ist, dass du die Helligkeit anpassen kannst, ohne den Farbton neu auszuwählen. Um einen Hover-Zustand zu machen, drop die Helligkeit um 5 %. Fertig.
• OKLCH ist der neue Junge. Es ist ein perzeptuell uniformer Farbraum, in modernen Browsern seit 2023 unterstützt. Wenn du 2026 ein neues Designsystem startest, schau es dir ernsthaft an.

Für die meisten Teams: HEX im Design-Tool, HSL oder OKLCH im CSS. Die Konvertierung ist ein Klick in jedem modernen Color Picker.

Barrierefreiheit — die Killer-Beschränkung des Webs

Print-Designer können jede Farbkombination wählen, die sie wollen. Web-Designer können das nicht. Das Web hat eine gesetzliche Untergrenze für Farbkontrast, und sie zu ignorieren ist der häufigste Grund, warum Websites Barrierefreiheits-Audits scheitern.

Die Regeln aus den W3C-WCAG-2.1-Richtlinien sind einfach zu merken:

• 4,5:1 Mindest-Kontrastverhältnis für normalen Fließtext gegen seinen Hintergrund (AA-Stufe).
• 3:1 Minimum für großen Text (18pt oder 14pt fett) und für UI-Komponenten wie Icons, Fokus-Ringe und Formular-Rahmen.
• 7:1 für Fließtext auf AAA-Stufe — empfohlen für Sites mit älterem Publikum oder kritischem Inhalt.

Hellgrauer Text auf Weiß war vor einem Jahrzehnt ein Design-Trend. Es ist jetzt in vielen Jurisdiktionen ein Klage-Risiko. Der Americans with Disabilities Act wurde in Klägerprozessen gegen Websites verwendet, die WCAG AA scheitern, und der European Accessibility Act trat 2025 in Kraft.

Die Lösung ist einfach: Validiere jedes Text-auf-Hintergrund-Paar, bevor du ausspielst. Unser Farbkontrast-Checker nimmt zwei Hex-Werte und spuckt das Verhältnis plus Pass/Fail-Badges für AA und AAA bei normalen und großen Textgrößen aus. Browser-DevTools zeigen Kontrast inline, wenn du Text in Chrome und Firefox inspizierst, was der schnellste Weg ist, Probleme während der Entwicklung zu fangen.

Für die tiefere Betrachtung — einschließlich, warum "sieht für mich okay aus" kein Ersatz für die Mathematik ist — lies unseren WCAG-Farbkontrast-Leitfaden.

Eine pragmatische Regel, die ich nutze: Wenn eine Farbkombination knapp 4,5:1 schafft, drück den Kontrast härter. Echte Nutzer haben ältere Monitore, Blendung von Fenstern, Anti-Reflex-Folie, Müdigkeit und Bifokalbrillen. Die Mathematik ist eine Untergrenze, kein Ziel.

Dark-Mode-Planung

2026 braucht jede Website einen Dark Mode. Betriebssysteme stellen ihn nachts standardmäßig ein. Browser respektieren die Systempräferenz. Power User leben drin. Wenn deine Site sie nachts um 23 Uhr in einen grellen weißen Hintergrund zurückzwingt, gehen sie.

Es gibt zwei Wege, eine Dark-Palette zu bauen:

Der Inverse-Ansatz. Nimm deine Light-Palette und tausche helle Werte gegen dunkle. Hintergrund wird Beinahe-Schwarz, Text wird Beinahe-Weiß, und die Akzente bleiben grob gleich. Das ist schnell und funktioniert für inhaltlastige Sites. Der Nachteil ist, dass manche Akzentfarben, die auf Weiß poppen, auf Schwarz ausgewaschen wirken, und du sie sowieso anpassen musst.

Der zweckgebaute Ansatz. Behandle Dark Mode als eigene Palette mit eigenen Entscheidungen. Entsättige die Akzente leicht. Verwende ein getöntes Beinahe-Schwarz statt reinem Schwarz (reines #000000 wirkt neben heller UI zu aggressiv). Füge einen separaten Satz Oberflächenfarben für Karten und Modale hinzu, damit sie Hierarchie ohne helle Schatten haben.

Notion, GitHub und Linear nutzen alle den zweckgebauten Ansatz. Schau dir jeden gut gemachten Dark Mode an und du wirst bemerken, dass der dunkle Hintergrund kein reines Schwarz ist — er ist meist ein sehr dunkles Schiefer oder Beinahe-Schwarz mit einem Hauch Blau oder warmem Grau. Dieser Hauch Farbe weicht den Kontrast auf und reduziert die Augenbelastung.

Der Implementierungs-Hook ist die CSS-Media-Query prefers-color-scheme:

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0F172A;
    --color-text-primary: #F1F5F9;
  }
}

Paare das mit einem manuellen Toggle, damit Nutzer den System-Default überschreiben können. Speichere die Präferenz in localStorage und wende sie beim Seitenladen vor dem ersten Paint an, um den gefürchteten Flash des falschen Themes zu verhindern.

Workflow von Farbpalette zu CSS

Sobald die Palette beschlossen ist, muss sie irgendwo leben, wo deine Entwickler sie nutzen können. Die Standardantwort 2026 sind CSS Custom Properties — auch CSS-Variablen genannt.

Ein sauberes Setup sieht so aus:

:root {
  /* Primary scale */
  --color-primary-50: #EFF6FF;
  --color-primary-500: #3B82F6;
  --color-primary-900: #1E3A8A;

  /* Neutrals */
  --color-text-primary: #0F172A;
  --color-text-secondary: #64748B;
  --color-background: #FFFFFF;
  --color-surface: #F8FAFC;

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
}

Dann in deinem Stylesheet referenzierst du var(--color-primary-500) statt Hex-Werte hartzucodieren. Wenn sich eine Farbe ändert, änderst du eine Zeile oben in der Datei und die ganze Site aktualisiert sich. Lies die MDN-Referenz zu Custom Properties für die volle Syntax.

Wenn du Tailwind CSS nutzt, definiere diese in deiner tailwind.config.js, damit Utility-Klassen wie bg-primary-500 funktionieren. Der Tailwind-Leitfaden zum Anpassen von Farben führt durch die exakte Syntax. Wenn du eine Komponentenbibliothek wie Chakra UI oder Material UI nutzt, haben die ihre eigenen Theme-Objekte, die derselben Idee folgen — Design-Tokens oben, Referenzen im Code.

Material Design 3 treibt die Design-Token-Idee noch weiter mit rollenbasierten Namen (surface, surface-container, on-surface) statt wörtlichen Farbnamen. Diese zusätzliche Abstraktion zahlt sich auf großen Multi-Produkt-Teams aus, aber für eine einzelne Produkt-Website ist es übertrieben.

Eine weitere Regel: Paare Farbe immer mit einem anderen visuellen Signal. Eine rote Fehlermeldung sollte auch ein Icon und das Wort "Fehler" haben. Ein Pflichtfeld in einem Formular sollte ein Sternchen haben, nicht nur einen roten Rahmen. Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbenblindheit, und sie können sich nicht allein auf Farbe verlassen. Teste deine Palette in unserem Farbenblindheit-Simulator, um zu sehen, wie deine Oberfläche für einen Nutzer mit Deuteranopie oder Protanopie aussieht.

Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 39 $, für immer deins.

Sieh, was es kann

Tools-Workflow

Der End-to-End-Workflow für eine Website-Palette nutzt mehrere Tools nacheinander. Hier ist die Kette:

1. Inspiration. Browse kuratierte Paletten für Ideen — unsere Farbpaletten-Ideen-Liste ist ein solider Startpunkt mit kategorisierten Beispielen. Speichere fünf oder sechs, die zur Markenstimmung passen.

1. Aus einem Referenzbild extrahieren. Wenn der Kunde ein Moodboard, Foto oder bestehendes Markenasset liefert, jag es durch unseren Farbpaletten-Extraktor, um die dominanten Farben als Hex-Codes zu ziehen.

1. Varianten generieren. Sobald du eine Primärfarbe hast, baut unser Farbpaletten-Generator passende Skalen — analog, komplementär, triadisch — und produziert eine vollständige 9-Stufen-Tint-Skala mit einem Klick.

1. Barrierefreiheit validieren. Pipe jedes Text-auf-Hintergrund-Paar durch unseren Farbkontrast-Checker. Repariere alles, was AA scheitert. Dieser Schritt ist nicht verhandelbar.

1. Exakte Hex-Werte aus echten Designs picken. Wenn du finale Mockups freigibst, nutze unseren Color Picker, um Werte aus Screenshots zu greifen und zu bestätigen, dass sie der Palettenspezifikation entsprechen.

1. Verläufe sparsam einsetzen. Verläufe sind eine modische Web-Behandlung. Generiere webfreundliche Verläufe mit unserem Verlaufsgenerator und lies unseren Verlaufshintergründe-Leitfaden für Platzierungs- und Performance-Tipps.

1. Auf Farbenblindheit testen. Lass die finalen Designs durch unseren Farbenblindheit-Simulator laufen. Wenn ein Status-Badge für einen Deuteranopen unlesbar ist, gestalte ihn neu.

Diese Pipeline verwandelt ein vages "wir wollen eine blaue Website"-Briefing in eine dokumentierte, barrierefreie, ausliefer-bereite Palette an einem Nachmittag.

Berühmte Website-Paletten — analysiert

Anzuschauen, wie erfolgreiche Websites Farbe nutzen, ist der schnellste Weg, Instinkt aufzubauen. Hier sind sechs moderne Websites mit starken Paletten, aufgeschlüsselt.

Stripe

Stripe ist das Lehrbuch-Beispiel einer kontrollierten, geschichteten Palette. Primäres Blau (#635BFF), warme graue Neutrale (statt der gängigeren kühlen Grautöne), weiße Hintergründe und ein Magenta-Pink-Akzent, der in Verläufen auf Marketing-Seiten erscheint. Fließtext ist ein Beinahe-Schwarz, nie reines Schwarz. Das Ergebnis wirkt modern, premium und selbstbewusst — und altert gut, was die meisten reinen Trend-Paletten nicht tun.

Linear

Linear ist der moderne minimalistische Maßstab. Nativer Dark Mode ist Standard. Primäres Lila (#5E6AD2) geschichtet über einen dunklen Schiefer-Hintergrund (#1A1A1A-Bereich). Spärliche Verwendung von Farbe insgesamt — der Großteil des Bildschirms ist Grautöne, mit dem Lila, das nur in interaktiven Elementen und Markenoberflächen erscheint. Die Lehre: Eine großartige Palette kann zu 90 % aus Neutralen bestehen.

Notion

Notion geht in die entgegengesetzte Richtung wie Linear — reine weiße Hintergründe, Beinahe-Schwarz-Text und eine breite rotierende Palette von Akzenten, weil nutzergenerierter Inhalt (Seiten-Emoji, Callouts, Tags) viele Farben braucht. Das Geheimnis ist, dass Notions Chrome — die Sidebar, der Header, die Buttons — fast keine Farbe nutzt. Die Akzente kommen von Nutzerinhalten, nicht von der UI selbst.

Apple

Apple ist die Meisterklasse in Zurückhaltung. Weiße Hintergründe, schwarzer Text und Akzentfarben, die aus Produktfotografie statt aus einer festen Markenpalette geliehen werden. Wenn das iPhone gold ist, ist die Seite gold. Wenn es silber ist, ist die Seite silber. Das erfordert selbstbewusste Produktfotografie und starke Typografie, um das Gewicht zu tragen, das Farbe normalerweise trägt.

GitHub

GitHub liefert sowohl einen polierten Light Mode als auch einen polierten Dark Mode aus, mit einem primären Blau (#0969DA im hellen, heller im dunklen) für Links, und semantischen Farben (Grün für hinzugefügte Zeilen, Rot für entfernte) ins Produkt selbst eingebacken. Die Palette muss für Syntax-Hervorhebung, Diff-Visualisierung und Marketing-Seiten funktionieren — eine viel härtere Beschränkung als eine typische SaaS-Site.

Vercel

Vercel ist die extremste Schwarz-Weiß-Site der modernen Ära. Die Primärpalette ist buchstäblich Schwarz, Weiß und ein kleiner Satz Grautöne. Farbe erscheint nur, wenn das Produkt selbst sie zeigt — Deployment-Status-Indikatoren, Verläufe auf Demo-Bildschirmen. Mutige Wahl, gut umgesetzt und unverwechselbar.

Das Muster über alle sechs hinweg: Der Großteil der Palette ist Neutrale. Farbe erscheint, wo sie muss, nicht überall, wo sie könnte.

Häufige Website-Palette-Fehler

Nach dem Audit Dutzender Sites tauchen dieselbe Handvoll Fehler immer wieder auf.

Zu viele Akzentfarben. Eine Website ist kein Farbkarten-Katalog. Wenn du fünf Akzente hast und sie alle auf derselben Seite nutzt, bedeutet keiner etwas. Wähle einen Akzent für primäre Aktionen, vielleicht einen zweiten für Warnungen oder Highlights. Spar den Rest für Charts und Illustrationen.

Unzureichender Kontrast bei Fließtext. Hellgrauer Text auf Weiß ist das häufigste Versagen. Wenn dein Fließtext-Kontrastverhältnis unter 4,5:1 liegt, repariere es vor allem anderen.

Markenpalette ohne Anpassung übertragen. Eine Logo-Farbe, die auf einer Visitenkarte funktioniert, funktioniert vielleicht nicht als Button-Hintergrund. Gesättigte Farben wirken im Druck okay und auf Bildschirmen hart. Passe Sättigung und Helligkeit fürs Web an.

Kein Dark-Mode-Plan. 2026 ist das auffällig. Auch wenn du Dark Mode nicht sofort ausspielen kannst, gestalte die Palette so, dass sie später invertiert werden könnte. Vermeide, dich in Light-Mode-only-Farben einzusperren.

Farbenblindheit ignorieren. Eine rote Fehler- und grüne Erfolgsmeldung sehen für einen Deuteranopen identisch aus. Paare jede Statusfarbe mit einem Icon und einem Wort.

Reines Schwarz für Text nutzen. #000000 auf #FFFFFF ist ein Kontrastverhältnis von 21:1 — viel mehr als nötig, und visuell wirkt es schwer. Die meisten gut gestalteten Sites nutzen ein Beinahe-Schwarz wie #1A1A1A oder #0F172A für Fließtext. Die Seite wirkt weicher, ohne Lesbarkeit zu verlieren.

Den Design-Token-Schritt überspringen. Wenn Farben als Hex-Literale über hunderte CSS-Dateien verstreut sind, werden zukünftige Paletten-Änderungen zu einem Such-und-Ersetzen-Albtraum. Definiere Tokens oben, referenziere überall.

Veraltete Farbtrends. Neon-Verläufe, brutalistisches Rot-auf-Blau, Glasmorphismus. Trends sind Spaß für Portfolio-Sites und riskant für Produkte, die fünf Jahre halten müssen. Die Websites im Abschnitt "Berühmte Paletten" oben sehen meist aus, wie sie vor drei Jahren aussahen, und das ist der Punkt.

Für laufende Farbinspiration und Fallstudien ist Smashing Magazines Farbkategorie eine stetige Quelle gut begründeter Artikel.

Durchgespieltes Beispiel: SaaS-Landingpage-Palette in 5 Schritten

Hier ist der Prozess, angewendet auf ein imaginäres SaaS-Produkt namens Metric — ein Entwickler-fokussiertes Analytics-Tool.

1. Wähle die Primärfarbe. Marken-Briefing sagt "vertrauenswürdig, technisch, modern". Das deutet auf ein tiefes Blau. Wir wählen #2563EB — gesättigt genug, um modern zu wirken, dunkel genug, um vertrauenswürdig zu wirken. Wir testen es auf einem 16-px-Button mit weißem Text — Kontrastverhältnis ist 4,7:1 gegen Weiß. Besteht AA.

1. Bau die neutrale Skala. Generiere eine 9-Stufen-Grauskala von #F8FAFC (am hellsten) zu #0F172A (am dunkelsten). Leichter Blau-Tint, um mit der Primärfarbe zu harmonieren. Text-primär wird #0F172A, Text-sekundär wird #64748B.

1. Wähle den Akzent. Wir brauchen eine Farbe, die auf einer blauen Button-lastigen Oberfläche heraussticht. Orange #F97316 ist das Komplement — gegenüberliegend auf dem Rad, viel Kontrast. Verwendet nur für Upgrade-CTAs und Free-Trial-Badges.

1. Füge semantische Farben hinzu. Erfolg #10B981 (Smaragd), Warnung #F59E0B (Amber), Fehler #EF4444 (Rot), Info #06B6D4 (Cyan). Alle vier bestehen AA gegen weißen Hintergrund und Dark-Mode-Hintergrund.

1. Verifiziere alle Kombinationen. Lass jedes Text-auf-Hintergrund-Paar durch den Kontrast-Checker laufen. Repariere die zwei Fehlschläge (Text-sekundär auf Hintergrund-hell-Oberfläche muss dunkler nachjustiert werden). Dokumentiere finale Hex-Codes in der Design-Tokens-Datei.

Gesamtzeit: etwa drei Stunden für einen Designer, der den Workflow kennt. Ergebnis: eine dokumentierte, barrierefreie, ausliefer-bereite Palette.

Durchgespieltes Beispiel: E-Commerce-Shop-Palette

Derselbe Prozess, anderes Briefing — eine handwerkliche Kaffeerösterei.

1. Primärfarbe. Warmes erdiges Braun #8B4513 — zieht am visuellen Eindruck gerösteter Bohnen.

1. Neutrale. Cremegetönte Skala. Hintergrund-hell ist #FAF7F2 (warmes Off-White), Text-primär ist #2A1F1A. Die ganze Site fühlt sich wie eine Papiertüte an.

1. Akzent. Verbranntes Orange #D2691E für "In den Warenkorb"-Buttons — analog zum Braun, aber heller.

1. Semantisch. Erfolg nutzt ein leicht gedämpftes Waldgrün, damit es nicht mit der warmen Palette kollidiert. Fehler bleibt ein klares Rot.

1. Verifiziere. Fließtext besteht 7:1 — AAA. Buttons gegen Creme bestehen. Fertig.

Zwei verschiedene Briefings, dieselben fünf Schritte. Der Prozess ist das Produkt.

Finale Vor-Launch-Checkliste

Bevor du ausspielst, geh diese Liste durch:

• Jedes Text-auf-Hintergrund-Paar gegen WCAG-4,5:1-Minimum getestet.
• UI-Elemente (Icons, Fokus-Ringe, Formular-Rahmen) gegen 3:1 getestet.
• Dark-Mode-Palette gebaut und in DevTools umgeschaltet.
• Farbenblindheit-Simulation auf jeder Schlüsselseite gelaufen.
• Design-Tokens in CSS oder dem Designsystem dokumentiert.
• Akzentfarben-Nutzung bleibt unter 10 % jeder gegebenen Seite.
• Jede Statusfarbe mit einem Icon oder Text-Label gepaart.
• Markenfarbe in kleinen Größen (12-px-Text, 14-px-Button) getestet.

Wenn alle acht bestehen, ist die Palette bereit.

Für letzte Schliffe an Assets ist unser Bild-Annotations-Tool nützlich, um Screenshots während Design-Reviews zu markieren.

Häufig gestellte Fragen

Was ist die beste Farbpalette für eine Website?

Es gibt keine einzige beste Palette — die richtige passt zu Marke, Publikum und Produkt. Davon abgesehen nutzen die erfolgreichsten modernen Websites 90 % Neutrale (Weißtöne, Off-Whites, Grautöne, Beinahe-Schwarz) mit einer einzigen Primärfarbe für interaktive Elemente und einer Akzentfarbe für hochpriorisierte CTAs. Stripe, Linear und Vercel folgen alle diesem Muster. Starte dort, bevor du mehr hinzufügst.

Wie viele Farben sollte eine Website nutzen?

Sieben ist eine gute Arbeitszahl: eine Primärfarbe, eine Sekundärfarbe, eine Tertiärfarbe (optional), vier Neutrale (Text-primär, Text-sekundär, Hintergrund-hell, Hintergrund-dunkel). Füge semantische Farben (Erfolg, Warnung, Fehler, Info) obendrauf hinzu. Viel über zehn unterschiedliche Farben hinaus wird die Palette schwer konsistent anzuwenden.

Sollte jede Website Dark Mode haben?

2026, ja — minimal plane dafür, auch wenn du es nicht am ersten Tag ausspielst. Betriebssysteme stellen Dark Mode nachts standardmäßig ein, Browser respektieren die Systempräferenz, und einem Nutzer um 23 Uhr einen grellen weißen Bildschirm aufzwingen ist Reibung. Bau die Palette von Anfang an mit hellen und dunklen Varianten, auch wenn du nur mit hell startest.

Wie mache ich meine Website-Palette barrierefrei?

Drei Regeln. Erstens, jedes Fließtext-auf-Hintergrund-Paar muss ein Kontrastverhältnis von 4,5:1 treffen (WCAG AA). Zweitens, UI-Elemente wie Icons und Fokus-Ringe brauchen 3:1. Drittens, verlasse dich nie allein auf Farbe — paare Statusfarben mit Icons und Text. Validiere jede Kombination mit einem Farbkontrast-Checker, bevor du ausspielst.

Was ist der Unterschied zwischen einer Markenpalette und einer Website-Palette?

Eine Markenpalette deckt jede Oberfläche ab, auf der die Marke erscheint — Druck, Verpackung, Beschilderung, Merchandise, Digital. Eine Website-Palette ist eine Untermenge, speziell für Bildschirme gebaut. Die Website-Version ist meist eingeschränkter (weniger Farben, getestet auf Kontrast und Dark Mode) und übersetzt vielleicht Markenfarben in webtaugliche Äquivalente — zum Beispiel wird ein gesättigtes CMYK-Rot zu einem leicht entsättigten Hex-Wert, der in einem Button richtig aussieht. Siehe unseren Marken-Farbpalette-Leitfaden für die volle Strategie-Seite.

Sollte ich HEX oder HSL in CSS nutzen?

Beide sind valide. HEX ist kompakter und universell unterstützt. HSL ist von Hand leichter zu manipulieren, weil Hue, Saturation und Lightness dem entsprechen, wie du über Farbe denkst — um einen Hover-Zustand zu machen, drop einfach die Helligkeit um 5 %. Die meisten modernen Designsysteme definieren Farben in HSL oder OKLCH auf Token-Level und exportieren dann Hex-Codes für Designer. Wähl eines für deinen Codebase und bleib konsistent.

Wie oft sollte ich meine Website-Palette aktualisieren?

Die meisten Paletten halten drei bis fünf Jahre, wenn sie auf soliden Neutralen und einer sinnvollen Primärfarbe gebaut sind. Große Rebrands rechtfertigen eine vollständige Auffrischung; kleine Drift (Tönungen verfeinern, semantische Farben hinzufügen, Dark Mode verbessern) kann jährlich passieren. Vermeide, Farbtrends nachzujagen — Sites, die 2022 Neon-Verläufe übernahmen, verbrachten 2024 damit, sie wieder rauszureißen.