Farbe aus Bild bestimmen: den HEX-Code jeder Farbe finden

Fügen Sie das Bild hinzu und klicken Sie auf die gewünschte Stelle. Der Hex-Code erscheint sofort neben einem großen Farbmuster, bereit zum Einfügen in eine Design-App, eine Website oder eine Nachricht.

Bei einem einfarbigen Pixel entspricht der Code genau diesem Wert. Er wird aus dem Originalbild in voller Auflösung ausgelesen, nie aus einer verkleinerten Vorschau, sodass auch ein winziges Detail in einem 12-MP-Foto seine wahre Farbe behält.

Das ist wichtig, weil Fotos verrauscht sind. Zwei nebeneinanderliegende Pixel können sich um ein paar Nuancen unterscheiden, selbst bei klarem blauem Himmel. Die Lupe markiert das mittlere Pixel, damit Sie vor dem Klick wissen, welchen Code Sie bekommen.

In einem PNG-Screenshot teilen sich die Pixel in einer flächigen Zone wie einem Button meist einen Code. In einem JPG sollten Sie abseits von Kanten und Text wählen, wo Kompression Farben am stärksten verschiebt.

Jeder Code ist ein sRGB-Wert, der Standard für Web-Farben. Manche iPhone-Fotos haben einen breiteren Farbraum. Diese werden in sRGB umgerechnet, sodass ein sehr kräftiger Ton einen etwas matteren Code erhalten kann.

Klicken Sie in Chrome, Edge oder Opera auf einem Computer auf Vom Bildschirm auswählen. Ihr Mauszeiger wird zur Pipette, die jeden Pixel auf Ihrem Bildschirm erfasst, etwa auf einer Website, in einer App oder einem Dokument. Klicken Sie auf eine Stelle, und die Codes werden hier wie bei jeder anderen Auswahl angezeigt.

Firefox, Safari und Handy-Browser können den Bildschirm so nicht auslesen, daher erscheint die Schaltfläche dort nicht. Machen Sie stattdessen einen Screenshot, fügen Sie ihn hier mit Strg+V (Cmd+V auf dem Mac) ein und wählen Sie daraus.

Auf dem Handy machen Sie einen Screenshot und fügen ihn aus Ihren Fotos hinzu. So oder so ist keine Browser-Erweiterung oder Desktop-App nötig.

Jede Auswahl zeigt dieselbe Farbe in fünf Formaten, jeweils mit eigener Kopieren-Schaltfläche. Hier ein violettes Pixel:

• HEX: #8338ec, der kurze Code, den die meisten Websites und Design-Apps verwenden
• RGB: rgb(131 56 236), die Anteile von Rot, Grün und Blau, von 0 bis 255
• HSL: hsl(265 83% 57%), Farbton, Sättigung und Helligkeit
• HSV: Farbton 265°, Sättigung 76% und Hellwert 93%, das Modell, das viele Design-Apps in ihren Farbpickern verwenden
• CMYK: 44% Cyan, 76% Magenta, 0% Gelb und 7% Schwarz, als Schätzung für den Druck

Die HEX-, RGB- und HSL-Codes sind gültiges CSS und lassen sich direkt in ein Stylesheet einfügen. Ist ein Pixel teilweise transparent, etwa am weichen Rand eines PNG-Logos, bleibt diese Transparenz in den Codes erhalten, und die Farbe wird so genau erfasst, wie es der Browser erlaubt.

Den Namen einer Farbe finden

Jede Auswahl erhält auch einen Namen. Der Picker findet den nächstgelegenen der 148 CSS-Farbnamen und zeigt ihn als Ähnlich zu an, sodass dieses violette Pixel als Ähnlich zu: blueviolet angezeigt wird. Nutzen Sie den Namen, um eine Farbe in Worten zu beschreiben, oder fügen Sie ihn direkt so in CSS ein.

Welchen Farbcode sollten Sie verwenden?

Nutzen Sie HEX für die meisten Aufgaben, da Websites und die meisten Design-Apps ihn akzeptieren. Die anderen Codes helfen in bestimmten Fällen:

• RGB, wenn eine App getrennte Rot-, Grün- und Blau-Werte verlangt
• HSL oder HSV, wenn Sie eine Farbe per Hand heller, dunkler oder gedämpfter machen möchten
• CMYK als grober Ausgangspunkt für den Druck. Er stammt aus einer einfachen Formel, nicht aus einem Druckerprofil, lassen Sie die endgültige Farbe daher von Ihrer Druckerei abgleichen

Jedes Bild funktioniert, vom Handyfoto bis zum Screenshot einer Webseite. Übliche Anwendungen:

• Screenshots: einen Screenshot kopieren und hier einfügen, um eine Farbe von einer Website oder App zu greifen
• Logos: eine Markenfarbe aus einer Logodatei wählen, wenn kein Styleguide der Marke vorliegt
• Fotos: die Farbe eines Himmels, eines Kleides oder einer gestrichenen Wand aus einem Bild erhalten

Gewählte Farben speichern

Jede Auswahl wird zu Ihre Farben hinzugefügt, neueste zuerst, mit Platz für 24. Kopieren oder entfernen Sie jede Farbe, oder leeren Sie die Liste. Exportieren Sie die gesamte Liste anschließend als:

• CSS-Variablen zum Einfügen in ein Stylesheet
• Ein Tailwind-Konfigurationsschnipsel
• JSON mit HEX, RGB und HSL jeder Farbe
• Ein PNG-Bild Ihrer Farbmuster zum Teilen

Die Liste wird in Ihrem Browser gespeichert, sie bleibt also nach einem Neuladen oder beim Öffnen eines anderen Bildes erhalten. Sie enthält nur die Farbcodes, nie Ihre Bilder. Ist die Liste voll, fällt die älteste Farbe heraus.

Die Hauptfarben Ihres Bildes sehen

Der Picker zeigt außerdem die 6 Hauptfarben Ihres Bildes. Klicken Sie auf eine, um sie zu Ihre Farben hinzuzufügen. Um die Hauptfarben des gesamten Bildes als Palette zu erhalten, mit 4 bis 12 Farben, öffnen Sie den Paletten-Extraktor.

Dieser Farbpicker ist kostenlos, ohne Anmeldung und ohne Konto, auch zum Exportieren Ihrer Farben. Ihre Bilder öffnen sich auf Ihrem Handy oder Computer und werden nie hochgeladen. Er läuft im Browser, es gibt also keine App zum Herunterladen.

• Funktioniert auf Handys, Tablets und Computern. Auf einem Touchscreen sitzt die Lupe über Ihrem Finger, sodass Ihr Finger das Pixel nie verdeckt.
• Funktioniert auch mit Tastatur. Tabben Sie zum Bild, bewegen Sie das Fadenkreuz mit den Pfeiltasten (Shift bewegt um 10 px) und drücken Sie Enter zum Auswählen.
• Öffnet JPG-, PNG-, WebP-, AVIF-, GIF-, BMP-, SVG-, HEIC-, HEIF- und TIFF-Dateien bis 50 MB. Ein GIF verwendet seinen ersten Frame.
• iPhone-HEIC-Fotos öffnen sich wie sie sind, ohne vorherige Konvertierung.
• Funktioniert jeweils mit einem Bild. Öffnen Sie ein anderes, bleibt Ihre Farben unverändert.