Farbpicker online

Über den Farbpicker online
Mit diesem Online-Farbpicker wählen Sie eine Farbe aus einem hochgeladenen Bild, vom Bildschirm, sofern Ihr Browser dies unterstützt, oder durch manuelle Eingabe eines Farbwerts. Die ausgewählte Farbe wird sofort in gängige Formate wie HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV und CMYK umgerechnet, damit Sie den benötigten Wert direkt kopieren können, ohne die Seite zu wechseln.

• Funktionen
Bild-Farbpicker: Wählen Sie ein lokales Bild aus und bewegen Sie den Mauszeiger über das Bild, um nahegelegene Pixel vorab anzuzeigen. Klicken Sie auf das Bild, um die aktuelle Farbe auszuwählen.

Bildpalette extrahieren: Nach dem Hochladen eines Bildes extrahiert das Tool eine kompakte Palette der wichtigsten Farben, die kopiert oder als aktuelle Farbe übernommen werden können.

Pixelgenaue Anpassung: Nachdem Sie eine Farbe aus einem Bild ausgewählt haben, können Sie die Position des ausgewählten Pixels mit den Pfeiltasten genauer anpassen.

Bildschirm-Farbpicker: Verwenden Sie den Farbwähler des Browsers, um eine Farbe vom Bildschirm auszuwählen, wenn diese Funktion von Ihrem Browser unterstützt wird.

Manuelle Farbeingabe: Geben Sie eine Farbe manuell über einen Farbwähler oder als HEX-/HEXA-Wert ein, zum Beispiel #2563EB oder #2563EBFF.

Mehrere Farbformate: Konvertieren Sie die ausgewählte Farbe in HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV und CMYK.

Passende Farben: Erzeugen Sie aus der aktuellen Farbe Komplementärfarben, analoge Farben, triadische Farben, sanfte Aufhellungen und gedämpfte Farbtöne.

Aufhellungen und Schattierungen: Erstellen Sie eine praktische Hell-Dunkel-Farbskala für Hintergründe, Rahmen, Hover-Zustände, Badges und UI-Komponenten.

Textkontrast und UI-Farbpaarung: Vergleichen Sie weißen und schwarzen Text anhand des WCAG-Kontrasts, zeigen Sie einen APCA-ähnlichen Wahrnehmungswert an und erhalten Sie einen komfortableren UI-Vorschlag, wenn eine stark gesättigte Farbe einen dunkleren oder helleren Hintergrund benötigt.

CSS-Variablen: Kopieren Sie sofort verwendbare CSS-Variablen für die aktuelle Farbe, helle und dunkle Varianten, eine gut lesbare Textfarbe sowie ein empfohlenes UI-Hintergrund-/Textpaar.

Verarbeitung im Browser: Bildauswertung, Farbauswahl, Palettenextraktion und Farbkonvertierung werden direkt in Ihrem Browser ausgeführt, ohne dass eine separate App installiert werden muss.

• Hinweise
Der Bildschirm-Farbpicker hängt von der Browser-Unterstützung ab. In Browsern ohne Bildschirm-Farbauswahl können Sie weiterhin die Bildauswahl oder die manuelle Eingabe verwenden.

Beim Auswählen von Farben aus einem Bild kann das Bild an die Seite angepasst skaliert werden, die gemessene Farbe wird jedoch auf die ursprüngliche Pixelposition des Bildes zurückgeführt.

Der Textkontrast wird anhand der ausgewählten Volltonfarbe berechnet. Wenn Text auf Verläufen, Fotos, Transparenzen oder strukturierten Hintergründen liegt, sollte das endgültige Design zusätzlich visuell geprüft werden.

Der APCA-ähnliche Wert dient als wahrnehmungsbezogene Referenz neben dem WCAG-Kontrast. Die WCAG-Kontrastprüfung bleibt auf dieser Seite die maßgebliche Bestanden-/Nicht-bestanden-Prüfung für Barrierefreiheit.

Bei Farben für Benutzeroberflächen, Dokumente, Bilder oder Druckmaterialien kann die endgültige Darstellung je nach Anzeigeeinstellungen, Farbprofilen, Dateiformaten und Ausgabegeräten variieren.

:wiki_link