Von der Farbinspiration zur nutzbaren Website-Palette

Beginne mit einem Markenbild oder einem Foto, dessen Stimmung zum Projekt passt. Mit der Bildfarbpipette entnimmst du die Farbe einer bestimmten Stelle. Die Farbpaletten-Extraktion fasst dagegen Bildfarben zu einer kleinen Palette zusammen. Eine extrahierte Palette bildet die Farben des Fotos ab. Sie entscheidet nicht, welche Farbe sich für Schaltflächen oder Fließtext eignet.

Für eine Café-Website kann ein warmes Foto einen cremefarbenen Hintergrund, einen kaffeebraunen Akzent und ein gedecktes Grün nahelegen. Weise diese Rollen zu, bevor du weitere Farben hinzufügst. Wenn kein Bild oder keine Markenfarbe vorhanden ist, starte mit der zufälligen Farbpalette und behalte ein vielversprechendes Farbfeld.

Im Generator für fünf Farben kannst du einzelne Farben fixieren und die übrigen neu erzeugen. Wähle einen Harmoniemodus, um verwandte oder kontrastierende Farbtöne zu entdecken. Das erste fixierte Farbfeld in der aktuellen Reihenfolge dient als Ausgangsfarbe für neue Farben. Andere fixierte Felder behalten ihre Werte, auch wenn sie nicht zu dieser Harmonie passen.

Fixiere zuerst eine Markenfarbe und vergleiche passende Hintergründe und Akzentfarben. Wenn du fixierte Farbfelder umsortierst, ändert sich möglicherweise die Ausgangsfarbe. Sind alle fünf fixiert, gib zunächst ein Feld frei, um ein anderes Ergebnis zu erhalten. Farbharmonie hilft bei der Suche, prüft aber nicht die Lesbarkeit.

1. Behalte die wichtigste Farbe und fixiere ihr Farbfeld.
2. Wähle eine Harmonie und erzeuge nur die nicht fixierten Farben neu.
3. Weise jeder beibehaltenen Farbe eine Rolle zu: Hintergrund, Fläche, Text, Akzent oder Dekoration.

Der Generator für Farbvarianten erstellt aus einer Grundfarbe Aufhellungen, Abdunklungen und Transparenzvarianten. Damit findest du beispielsweise eine helle Kartenfläche oder einen dunkleren Schaltflächenzustand, ohne einen fremden Farbton hinzuzufügen. Er zeigt auch die Kontrastverhältnisse von Schwarz und Weiß zur Grundfarbe. Das ermöglicht einen schnellen Vergleich, ersetzt aber keine umfassende Suche nach Textfarben.

Die Darstellung einer Farbe mit Alphakanal hängt vom Hintergrund ab. Prüfe das zusammengesetzte Ergebnis in deinem tatsächlichen Layout. Nutze den Farbkonverter, wenn Design-Datei und CSS verschiedene Farbformate benötigen. Halte die endgültigen Werte fest, statt dich auf die Darstellung des Farbfelds auf einem einzelnen Bildschirm zu verlassen.

Das Tool für lesbare Textfarben schlägt Vordergrundfarben für deinen eingegebenen einfarbigen Hintergrund vor. Die Zielwerte sind AA für normalen Text mit 4,5:1, AAA für normalen Text mit 7:1 und AA für großen Text mit 3:1. Prüfe ein bestehendes Farbpaar mit der Kontrastprüfung. Ein Ergebnis von 3:1 gilt für großen Text nach AA und reicht für normalen Fließtext nicht aus.

Nutze für Produktbeschreibungen den Zielwert für normalen Text und prüfe echte Inhalte in der vorgesehenen Schrift. Prüfe anschließend die Lesbarkeit von Links, Fokusmarkierungen, Fehlermeldungen und Interaktionszuständen. Die unten verlinkten W3C-Quellen erläutern die Kontrastkriterien.

Der Zufallsverlauf-Generator erstellt lineare CSS-Farbverläufe mit zwei oder drei Farben. Bearbeite Farben und Winkel, bis der Übergang zur Kopfzeile oder zum Seitenbereich passt. Kopiere anschließend das CSS oder lade es herunter. Probiere zunächst zwei zurückhaltende Farben. Ein dritter Farbstopp ist sinnvoll, wenn du eine bestimmte Zwischenfarbe möchtest.

Eine Textfarbe kann auf einer einzelnen Fläche genügend Kontrast haben und an anderen Stellen eines Verlaufs unlesbar sein. Prüfe im fertigen Layout den Hintergrund unter jedem Textbereich, auch in schmalen Mobilansichten. Wenn sich ausreichender Kontrast nicht zuverlässig halten lässt, lege den Text auf eine einfarbige Fläche und verwende den Verlauf als Dekoration darum herum.

Mit der Farbpaletten-Vorschau siehst du fünf Farben als Seitenhintergrund, Inhaltsfläche, Text, Hauptaktion und Text auf der Hauptaktion. Attraktive Farbfelder können sich in diesen Rollen sehr unterschiedlich verhalten. Vergleiche Beispielinhalte und Schaltfläche und passe bei Bedarf die Rollenfarben an.

Nutze im Generator für fünf Farben die ausdrückliche Vorschauaktion, um die aktuellen Farben in dieser Reihenfolge zu übernehmen: Hintergrund, Fläche, Text, Hauptaktion und Text auf der Hauptaktion. Das Öffnen über einen gewöhnlichen Link überträgt die Generatorpalette nicht. Die Vorschauaktion übergibt Farben innerhalb des aktuellen Browsertabs, ohne sie in die URL zu schreiben.

Kopiere die benutzerdefinierten CSS-Eigenschaften aus der Vorschau und ordne sie den passenden Rollen in deinem Stylesheet zu. Diese fünf Rollenfarben sind ein Ausgangspunkt. Sie erstellen weder automatisch ein vollständiges Theme noch prüfen sie die gesamte Barrierefreiheit. Prüfe vor der Veröffentlichung Fließtext, Schaltflächentext, Hover, Fokus und alle weiteren tatsächlich verwendeten Hintergrundkombinationen erneut.

Halte für die Palette jeweils Rolle, endgültigen Farbwert und geprüftes Text-Hintergrund-Paar fest. Unterscheide beispielsweise „Seitenhintergrund“ und „Hauptaktion“, statt eine Reihe unbeschrifteter HEX-Codes zu speichern. Sichere das CSS des Verlaufs gesondert, damit Winkel und Farbreihenfolge bei der Übergabe erhalten bleiben.

Prüfe vor der Veröffentlichung die echte Seite mit langen Texten, Hover- und Fokuszuständen sowie gegebenenfalls heller und dunkler Darstellung. Ein anderer Hintergrund oder geänderte Deckkraft können eine frühere Kontrastprüfung ungültig machen. Prüfe das endgültige Farbpaar erneut, sobald sich eine der Farben ändert.