Farbwähler
Kostenloser Online-Farbwähler — wähle visuell eine Farbe und erhalte sofort HEX-, RGB-, HSL-, HSV- und CMYK-Codes. Schattierungen, Töne, Farbharmonien und...
Aktualisiert Mai 2026
Geprüft von Rafael Duarte
This color meets WCAG 2.1 AA standards for normal text (4.5:1) on at least one background.
Shades & Tints
Color Harmonies
So funktioniert's
Visuelles Farbfeld, fünf Formate live
1. Klicken oder ziehen im Farbfeld
Sättigung liegt auf der X-Achse, Helligkeit auf der Y-Achse — den Farbton stellst du über den Regenbogen-Schieberegler darunter ein.
2. Oder Hex-Code direkt eingeben
Einen beliebigen 6-stelligen Code einfügen, und der Picker springt sofort zu dieser Farbe.
3. Kopieren und Varianten erkunden
HEX, RGB oder HSL mit einem Klick kopieren; Schattierungen, Tönungen und Harmonien in den Panels darunter durchsehen.
Was dieses Tool kann
Fünf Farbformate, Schattierungen, Tönungen und WCAG-Prüfung
HEX, RGB, HSL, HSV und CMYK
Dazu LAB, Dezimalwert und Web-safe-Variante — alle Werte werden gleichzeitig live aktualisiert.
Schattierungen und Tönungen
10 dunklere und 10 hellere Abstufungen ausgehend von der gewählten Farbe.
5 Farbharmonien
Komplementär, analog, triadisch, split-komplementär und tetradisch.
WCAG-Kontrastprüfung
Zeigt, ob die Farbe das 4.5:1-Verhältnis der Stufe AA erreicht — seit dem Barrierefreiheitsstärkungsgesetz (BFSG) für viele Websites nicht mehr nur eine Empfehlung.
Nächster CSS-Farbname
Berechnet die euklidische Distanz im RGB-Raum, um das ähnlichste CSS-Schlüsselwort vorzuschlagen.
100% im Browser
Keine Registrierung, keine Installation — jede Berechnung läuft lokal auf deinem Gerät.
Umwandlungsbeispiele
Wann du das brauchst
Die häufigsten Einsatzszenarien
Webentwicklung und UI
HEX oder RGB direkt ins CSS, die Tailwind-Konfiguration oder in Design-Tokens kopieren.
Barrierefreiheits-Audit
Der WCAG-Prüfer deckt Kontrastprobleme auf, bevor sie in Produktion landen — seit dem BFSG für viele Websites verpflichtend relevant.
Aufbau von Design Systems
Mit dem Panel für Schattierungen und Tönungen eine vollständige Farbrampe erstellen.
Vorbereitung für den Druck
Die CMYK-Werte zeigen, wie sich deine Bildschirmfarbe in Druckfarbe übersetzt.
Farbe von jeder Bildschirmstelle aufnehmen
Mit der Pipette (Eye Dropper) die exakte Farbe aus einem Bild, einer Website oder einer im Browser geöffneten App übernehmen — ganz ohne externen Screenshot.
Häufige Fehler
HSL mit HSV verwechseln
Beide teilen sich Farbton und Sättigung, aber die dritte Achse unterscheidet sich — siehe Vergleich unten.
Den nächsten CSS-Namen für eine exakte Übereinstimmung halten
Es ist das ähnlichste Schlüsselwort nach RGB-Distanz, nicht zwangsläufig dieselbe Farbe.
Erwarten, dass CMYK die Bildschirmfarbe exakt wiedergibt
Manche kräftigen Blau- und Grüntöne liegen außerhalb des druckbaren Farbraums.
Die Pipette in Firefox oder Safari nutzen wollen
Der Eye-Dropper-Button hängt von der nativen EyeDropper-API des Browsers ab, die derzeit nur in Chrome, Edge und anderen Chromium-Browsern verfügbar ist.
Annehmen, dass gespeicherte Palette und Verlauf einen Neustart überstehen
Gespeicherte Farben und der Auswahlverlauf liegen nur im Arbeitsspeicher des aktuellen Tabs — Codes vor dem Schließen oder Neuladen der Seite sichern.
Glauben, "Web Safe" sei heute noch Pflicht
Ein Überbleibsel der 216-Farben-Palette für 8-Bit-Monitore der 1990er — moderne Displays zeigen Millionen Farben ohne diese Einschränkung.
Warum dieses Tool
Vereint Formatumwandlung, Schattierungen/Tönungen, Harmonie-Exploration und WCAG-Kontrastprüfung auf einer einzigen Seite — die meisten Farbwähler können nur konvertieren.
Zeigt HSL und HSV gleichzeitig an, damit du nicht raten musst, was CSS erwartet und was Photoshop intern verwendet.
Zusätzlich lässt sich mit der Pipette jede Bildschirmfarbe aufnehmen, bis zu 20 Farben in einer Palette speichern und der Verlauf der letzten Auswahlen einsehen — alles ohne die Seite zu verlassen.
HSL vs. HSV
Die ersten zwei Achsen sind gleich, die dritte unterscheidet sich
Häufig gestellte Fragen
Eine 6-stellige hexadezimale Darstellung einer RGB-Farbe (#RRGGBB). Jedes Zeichenpaar steht für einen Kanal — RR für Rot, GG für Grün, BB für Blau, jeweils von 00 bis FF.
Weiterführende Links
Vollständige Referenz aller CSS-Farbformate.
Offizielle Dokumentation zur 4.5:1-Kontrastanforderung.
Erklärt das LAB-Modell aus dem Reiter für technische Spezifikationen und warum es perzeptuell gleichmäßiger ist als RGB.
Verwandte Tools
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind Design Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
