Farbpipette für Bilder

Farbwähler aus Bild: exakte Farbe und Palette auswählen

Verwenden Sie diesen Farbwähler für Bilder, um exakte Werte aus einem lokalen Foto, Screenshot, einer Illustration oder einer Aufnahme einer Benutzeroberfläche zu entnehmen. Jeder Klick in der Vorschau entspricht dem exakten Quellpixel und gibt dessen HEX-, RGB-, HSL-, Alpha-Werte und Koordinaten zurück. So funktioniert das Werkzeug als Farbwähler aus Bild und HEX-Farbwähler aus Bild für Aufgaben wie Bild-zu-HEX, HEX-Code aus Bild und das Ermitteln von Farbcodes aus Bildern – ganz ohne Server-Upload. Derselbe Arbeitsablauf dient auch als Foto-Farbwähler, Bild-Farbwähler, Farbpipette für Bilder oder Farbauswahl für Bilder.

Wie man einen HEX-Code aus einem Bild erhält

1. Wählen Sie ein lokales Bild aus, ziehen Sie es hierher oder fügen Sie es ein, oder beginnen Sie mit dem mitgelieferten Beispiel.
2. Klicken oder tippen Sie auf ein Pixel, oder geben Sie die exakten Quellkoordinaten ein und verwenden Sie die Lupe für eine pixelgenaue Steuerung.
3. Kopieren Sie den HEX-Code aus dem Bild, wählen Sie eine dominante Palettenfarbe oder exportieren Sie die Palette als CSS-Variablen oder JSON-Tokens.

Exakte Pixel-Abtastung mit Quellkoordinaten

Die skalierte Leinwand ändert das Quellkoordinatensystem nicht. Die Steuerung per Zeiger, Touch, Tastatur und numerischer Koordinateneingabe greift für die Abtastung auf das vom Browser dekodierte Quellbild zu. Die Lupe verwendet Nearest-Neighbor-Rendering, damit der mittlere Pixel sichtbar bleibt, einschließlich transparenter und teilweise transparenter Pixel.

Eine Farbpalette aus einem Bild erstellen

Die Farbpalette aus dem Bild wird aus einem begrenzten Downsample in einem Browser-Worker extrahiert, sodass große Bilder keinen Farbscan in voller Auflösung im Haupt-UI-Thread erfordern. Sechs deterministische, dominante Farben werden zu einer Farbpalette aus dem Foto, einer Bildfarbpalette, dem Ergebnis eines Palettenextraktors, einem CSS-Block für benutzerdefinierte Eigenschaften (Custom Properties) oder einer JSON-Token-Datei, was das Tool auch zu einem praktischen Generator für Farbschemata aus Fotodateien macht. Vollständig transparente Pixel werden ignoriert und partielle Alpha-Werte tragen proportional bei.

Nächste Schritte: Prüfen Sie den Kontrast dieser Palette anhand der WCAG-Schwellenwerte oder wandeln Sie eine ausgewählte Farbe in eine vollständige Palette mit Aufhellungen, Abdunklungen und Tailwind-Werten um.

HEX-, RGB-, HSL-, CSS- und JSON-Ausgabe

Ein abgetasteter Pixel kann als HEX oder HEXA, RGB oder RGBA und HSL oder HSLA kopiert werden. Die dominante Palette kann als CSS-Variablen für eine Webseite oder als JSON-Farb-Tokens für ein Design-System kopiert oder heruntergeladen werden. Animierte GIFs verwenden den vom Browser dekodierten Frame, und die angezeigten Werte können sich von denen einer anderen App unterscheiden, wenn die Handhabung von Farbprofilen abweicht.

Private lokale Bildverarbeitung

Bilddekodierung, Pixel-Abtastung, Vergrößerung, Palettenextraktion und Export finden lokal in diesem Browser statt. Das Tool hat kein Feld für Remote-URLs und sendet keine Bildinhalte, Dateinamen, Abmessungen, Koordinaten, exakten Farben, Paletten oder generierten Dateien an Analysedienste. Das Ersetzen eines Bildes gibt die vorherige lokale Objekt-URL frei.

Häufig gestellte Fragen

Wie wähle ich eine Farbe aus einem Bild aus?

Öffnen, ziehen oder fügen Sie ein Bild ein und klicken oder tippen Sie dann auf das gewünschte Pixel. Das Tool zeigt die genaue Quellkoordinate und die passenden HEX-, RGB-, HSL- und Alpha-Werte an.

Kann ich eine Farbpalette aus einem Foto erhalten?

Ja. Nachdem das Bild dekodiert wurde, extrahiert der Browser sechs deterministische, dominante Farben. Wählen Sie ein beliebiges Farbfeld aus, kopieren Sie die Palette oder laden Sie CSS-Variablen oder JSON-Token herunter.

Werden transparente Pixel unterstützt?

Ja. Die exakte Pixelabtastung erhält den Alpha-Wert und identifiziert vollständig transparente Pixel. Die Palettenextraktion ignoriert vollständig transparente Pixel und gewichtet teilweise transparente Pixel nach ihrem Alpha-Wert.

Wird mein Bild hochgeladen?

Nein. Ihr Bild wird lokal in diesem Browser dekodiert und untersucht. Es gibt keine API zum Hochladen von Bildern oder einen Abruf von Remote-URLs, und Bilddaten sind von der Analyse ausgeschlossen.

Warum zeigt eine andere App möglicherweise eine leicht abweichende Farbe an?

Browser und Grafikanwendungen können eingebettete Farbprofile, Animationsframes und Rundungen bei der Konvertierung unterschiedlich behandeln. Dieses Tool meldet die Pixel, die vom Decoder Ihres Browsers erzeugt werden.