Bild-Farbwähler
Wähle Farben direkt aus einem hochgeladenen Bild aus und kopiere die Werte als HEX, RGB oder HSL. Eine Lupe erleichtert die genaue Auswahl einzelner Pixel.
Lokale VerarbeitungFarb- und Kontrast-Konverter
Über dieses Tool
Gib eine Farbe als HEX-, RGB-, HSL- oder HSV-Wert ein und zeige die entsprechenden Werte in den anderen Formaten an. Vergleiche außerdem Vorder- und Hintergrundfarben, um zu prüfen, ob der Kontrast die Anforderungen von WCAG AA oder AAA für normalen und großen Text erfüllt.
Funktionen
- Farben zwischen HEX, RGB, HSL und HSV umwandeln
- Sofortige Farbvorschau
- Kontrastverhältnis nach WCAG berechnen
- Ergebnisse für AA und AAA anzeigen
- Farbwerte mit einem Klick kopieren
Anleitung
- Farbe eingeben: Gib einen HEX-, RGB-, HSL- oder HSV-Wert ein oder verwende den Farbwähler.
- Werte kopieren: Kopiere das benötigte Format für CSS oder deine Gestaltungsrichtlinien.
- Kontrast prüfen: Wähle Text- und Hintergrundfarbe aus und prüfe deren Lesbarkeit.
Beispiele
- Kontrast einer Markenfarbpalette nach WCAG AA prüfen
- HEX-Farbwerte aus Figma in hsl()-Werte für CSS-Variablen umwandeln
- Textfarben für eine dunkle Darstellung überprüfen
- Farbabstufungen eines Gestaltungssystems dokumentieren
Einschränkungen
- Transparenz kann bei der Kontrastvorschau nur eingeschränkt berücksichtigt werden
- Die Genauigkeit des Farbwählers hängt von der Kalibrierung des Bildschirms ab
- Die eingegebenen Farbwerte werden direkt im Browser verarbeitet und nicht an einen Server gesendet.
FAQ
- Welches Kontrastverhältnis erfüllt WCAG AA?
- Normaler Text braucht 4,5:1; großer Text (18pt+ oder 14pt fett) braucht 3:1.
- HSL vs. HSV?
- HSL-Helligkeit unterscheidet sich von HSV-Wert; beide werden angezeigt, passend zur jeweiligen Konvention.
- Beeinflusst Transparenz das Kontrastverhältnis?
- Teilweise transparente Texte müssen zusammen mit dem tatsächlichen Hintergrund bewertet werden. Die einfache Vorschau geht von vollständig deckenden Farben aus.