Farbwähler
WCAG-Kontrast prüfen, CSS-Verläufe erstellen und Farbpaletten erzeugen.
Musst du nur eine Farbe wählen oder HEX ↔ RGB ↔ HSL konvertieren (mit Pipette)? Nutze den HEX-RGB-Konverter.
Beispiele
Kontrastprüfung
Eingabe
#1A1A1A auf #F5F5F5
Ausgabe
≈ 16:1 — besteht AA & AAA
CSS-Verlauf
Eingabe
#3B82F6 → #9333EA, 90°
Ausgabe
background: linear-gradient(90deg, #3B82F6, #9333EA);
Palette
Eingabe
#3B82F6
Ausgabe
Abstufungen + Komplementär-, Analog-, Triadenfarben
Über dieses Tool
Dieses kostenlose Online-Farbstudio vereint drei Grundlagen: einen WCAG-Kontrastprüfer mit AA/AAA-Bestanden-Nicht-bestanden und Live-Textvorschau; einen CSS-Verlaufsbuilder mit kopierfertiger Deklaration; und einen Palettengenerator für Abstufungen sowie Komplementär-, Analog- und Triadenfarben. Jeder Tab hat einen eingebauten Farbwähler, und alles läuft in deinem Browser ohne Upload. Für reine HEX-↔-RGB-↔-HSL-Konvertierung und eine Bildschirm-Pipette nutze den {link}.
So funktioniert's
- Kontrast: Text- und Hintergrundfarbe festlegen, um die WCAG-Barrierefreiheit zu prüfen.
- Verlauf: zwei Farben und einen Winkel wählen, dann das CSS kopieren.
- Palette: eine Basisfarbe eingeben und eine beliebige Fläche zum Kopieren anklicken.
Für wen es ist
Designer und Entwickler, die Barrierefreiheit prüfen, CSS-Hintergründe bauen und stimmige Paletten erstellen — ohne mit mehreren Tools zu jonglieren.
Häufig gestellte Fragen
Was kann dieses Farbtool?
Drei Dinge an einem Ort: WCAG-Kontrast zwischen zwei Farben prüfen, einen CSS-Verlauf bauen und Abstufungs- und Harmoniepaletten aus einer Basisfarbe erzeugen. Jeder Tab hat einen eingebauten Farbwähler.
Ist es kostenlos?
Ja — komplett kostenlos ohne Anmeldung, und alles läuft in deinem Browser ohne Upload.
Wie funktioniert die Kontrastprüfung?
Gib eine Text- und eine Hintergrundfarbe ein, und es zeigt das WCAG-Kontrastverhältnis plus Bestanden/Nicht bestanden für AA und AAA bei normalem und großem Text, mit Live-Vorschau.
Welches Kontrastverhältnis brauche ich?
WCAG AA braucht mindestens 4,5:1 für normalen und 3:1 für großen Text; AAA braucht 7:1 bzw. 4,5:1. Die Prüfung markiert jede Stufe für dich.
Kann ich den CSS-Verlauf und die Palettenfarben kopieren?
Ja. Der Verlaufs-Tab gibt eine fertige background:-Deklaration zum Kopieren, und jede Palettenfläche kopiert ihr Hex per Klick.
Wo wähle ich eine Farbe oder konvertiere HEX/RGB/HSL?
Nutze den dedizierten HEX-RGB-Konverter — er wählt eine Farbe (mit Bildschirm-Pipette in Chrome/Edge) und zeigt HEX, RGB und HSL. Dieses Studio konzentriert sich darauf, was du mit Farben tust: Kontrast, Verläufe und Paletten.
Kann ich eine Farbe von einer Webseite oder einem Bild greifen?
Ja — nutze die Pipette des HEX-RGB-Konverters (und sein Bookmarklet), um in Chrome und Edge eine Farbe von überall auf dem Bildschirm zu erfassen, und bring das Hex hierher.
Ähnliche Tools