Website-Farbpalette als Vorschau
Wende fünf Farben auf einen Website-Entwurf an, prüfe Textkontraste und exportiere semantische CSS-Variablen.
Das könnte dir auch helfen: Lesbare Textfarben finden , Zufällige Farbverläufe erstellen , Generator für 5-Farben-Paletten und weitere
Weise deine fünf Farben zu
Verwende deckende sRGB-HEX-Farben mit 3 oder 6 Stellen, mit oder ohne #. Änderungen erscheinen sofort im Entwurf.
Trenne Farben durch Leerzeichen, Kommas oder Semikolons. Reihenfolge: Seitenhintergrund, Kartenhintergrund, Seitentext, Schaltflächenhintergrund, Schaltflächentext. Genau fünf gültige Farben werden sofort angewendet. Tausche danach bei Bedarf die Rollen.
Live-Websitevorschau
Dieser Entwurf zeigt deine Palette auf typischen Website-Elementen. Die Beispielnavigation und die Schaltfläche dienen nur der Darstellung.
Schaffe Platz für deine nächste Idee.
Sieh, wie deine Farben auf einer Seite zusammenspielen, bevor du sie auf einer Website, in einem Portfolio oder Dashboard einsetzt.
Eine kleine Idee, klar präsentiert
Bündele nützliche Details in Karten. Prüfe, ob Fließtext sowohl auf dem Seiten- als auch auf dem Kartenhintergrund lesbar bleibt.
Projekt entdeckenTextkontrast der angezeigten Farbpaare
Seitentext / Seitenhintergrund
#1E293B / #F1F5F9
Kontrast: 13.35:1
- Normaler Text AA (4,5:1): Erfüllt
- Normaler Text AAA (7:1): Erfüllt
- Großer Text AA (3:1): Erfüllt
Kartentext / Kartenhintergrund
#1E293B / #FFFFFF
Kontrast: 14.63:1
- Normaler Text AA (4,5:1): Erfüllt
- Normaler Text AAA (7:1): Erfüllt
- Großer Text AA (3:1): Erfüllt
Schaltflächentext / Schaltflächenhintergrund
#FFFFFF / #1D4ED8
Kontrast: 6.70:1
- Normaler Text AA (4,5:1): Erfüllt
- Normaler Text AAA (7:1): Nicht erfüllt
- Großer Text AA (3:1): Erfüllt
Prüft drei einfarbige Text-Hintergrund-Paare mit WCAG-2-sRGB-Verhältnissen. Die Bewertung nutzt ungerundete Werte, die Anzeige zwei Nachkommastellen. Große Schrift beginnt bei 24 CSS-Pixeln in normaler Stärke oder 18⅔ CSS-Pixeln in Fettschrift.
Palette als CSS-Variablen exportieren
Diese fünf benutzerdefinierten Eigenschaften entsprechen den Vorschaufarben. Füge sie deinem Stylesheet hinzu und verwende var(--palette-background), var(--palette-surface), var(--palette-text), var(--palette-primary) und var(--palette-on-primary).
So erstellst du eine Website-Farbvorschau
- Gib fünf HEX-Farben einzeln ein, füge eine Liste mit fünf Farben ein oder öffne eine Palette aus dem Fünf-Farben-Generator.
- Weise Farben der Seite, den Karten, dem Text und der Schaltfläche zu. Teste über die Tauschmenüs verschiedene Rollen.
- Prüfe den Entwurf und die drei Kontrastpaare. Kopiere die CSS-Variablen oder lade die .css-Datei für dein Projekt herunter.
So testest du deine Website-Farben
- Probiere für eine Unternehmenswebsite den hellen Seitenhintergrund, die weißen Karten, den dunklen Text und die blaue Schaltfläche des Beispiels aus.
- Tausche Seiten- und Textfarbe, um eine dunkle Website-Palette zu testen. Prüfe anschließend erneut den Karten- und Schaltflächenkontrast.
- Übernimm fünf Farben aus einem Bild oder einer Markenpalette, weise sie Oberflächenrollen zu und prüfe die Lesbarkeit der Textpaare.
Häufige Fragen
Wie unterscheidet sich das von einem Farbton-Generator?
Dieses Werkzeug wendet deine fünf Farben auf Seitenrollen und einen Website-Entwurf an. Es erzeugt keine helleren oder dunkleren Farbtöne. Mit den Tauschfunktionen prüfst du, wie eine vorhandene Palette in einem echten Layout wirkt.
Welche Farben vergleicht die Kontrastprüfung?
Sie prüft Seitentext gegen Seitenhintergrund, Seitentext gegen Kartenhintergrund und Schaltflächentext gegen Schaltflächenhintergrund. Jedes Paar erhält getrennte Ergebnisse für normalen Text nach AA und AAA sowie für großen Text nach AA.
Warum kann ein angezeigtes Verhältnis von 4,50:1 AA trotzdem verfehlen?
Die Anzeige rundet auf zwei Nachkommastellen, die Prüfung verwendet aber das vollständige berechnete Verhältnis. Ein Wert knapp unter 4,5:1 erfüllt AA für normalen Text auch dann nicht, wenn die gerundete Anzeige 4,50:1 lautet.
Gestaltet der CSS-Export meine Website automatisch?
Exportiere fünf CSS-Variablen und verwende sie in den Hintergrund-, Text- und Schaltflächenstilen deiner Website.
Werden meine Farben gespeichert oder hochgeladen?
Änderungen bleiben in diesem Browser-Tab und werden nicht in Analyseereignisse aufgenommen. Die Vorschau aus dem Palettengenerator nutzt einen temporären Sitzungsspeicher im selben Tab. Die Vorschau entfernt die gültige Übertragung nach dem Lesen. Kopiere oder lade die Farben herunter, um sie zu behalten.
Deine Palette wird in diesem Browser-Tab verarbeitet. Farben werden nicht in Analyseereignisse oder URLs aufgenommen. Eine ausdrücklich vom Generator gesendete Palette wird über einen temporären Sitzungsspeicher im selben Tab übertragen und beim Laden entfernt. Kopiere oder lade deine Palette herunter, um sie zu behalten.
Ist dieses Tool hilfreich? Teile es mit deinem Team und beschleunige eure Arbeit.
Gefällt es dir, tippe auf . Braucht es Verbesserungen, tippe auf , damit wir Updates priorisieren können.