Farbe aus Bild bestimmen: HEX, RGB, HSL und Palette

Jedes Pixel eines digitalen Bildes speichert eine Farbe als drei Zahlen: Rot, Grün und Blau. Ein Farbwähler liest diese Zahlen an der gewählten Stelle und zeigt sie in den Formaten, die Designer und Entwickler nutzen. So lässt sich ein exakter Farbton aus einem Foto, Logo oder Screenshot wiederverwenden, statt ihn nach Augenmaß zu schätzen.

Das Auge lässt sich von umgebenden Farben und der Bildschirmhelligkeit leicht täuschen – zwei Töne, die gleich aussehen, können im Code recht verschieden sein. Die Farbe direkt aus der Datei aufzunehmen, beendet das Raten.

Drei Schreibweisen für eine Farbe

Bei HEX vs. RGB vs. HSL gilt: Alle beschreiben dieselbe Farbe. HEX ist ein kompakter sechsstelliger Code, der im Webdesign und in den meisten Design-Tools genutzt wird. RGB nennt die Werte für Rot, Grün und Blau von 0 bis 255. HSL beschreibt Farbton, Sättigung und Helligkeit – das einfachste Format, um eine Farbe in CSS heller oder dunkler zu machen und ihren Charakter zu bewahren.

Fügen Sie ein Bild hinzu, indem Sie es in das Feld ziehen, auswählen oder einen Screenshot einfügen. Bewegen Sie den Zeiger über das Bild: Die Farbe darunter wird live angezeigt. Klicken Sie, um sie zu übernehmen. Die gewählte Farbe erscheint mit großem Farbfeld und ihren HEX-, RGB- und HSL-Codes, jeweils mit eigener Kopier-Schaltfläche.

Jede Auswahl kommt in einen kurzen Verlauf, sodass Sie mehrere Farben aus einem Bild sammeln und später kopieren können. Ein Klick auf ein Farbfeld im Verlauf zeigt seine Codes erneut.

Einen Code kopieren

Um schnell den HEX-Code aus einem Bild zu bekommen, zoomen Sie den Browser bei kleinen Bereichen heran, klicken auf das genaue Pixel und dann auf „HEX kopieren“. Der Code beginnt mit einer Raute und funktioniert direkt in CSS, Figma, Canva und den meisten anderen Tools.

Sobald Sie ein Bild hinzufügen, analysiert das Tool eine kleine Kopie und findet die dominanten Farben mit einem Clustering-Verfahren. Bis zu acht Farben erscheinen, sortiert nach dem Anteil, den sie im Bild einnehmen. Klicken Sie auf eine, um die vollständigen Codes zu sehen, oder kopieren Sie das ganze Set als Liste von HEX-Werten oder als CSS Custom Properties, bereit für Ihr Stylesheet.

Eine Farbpalette aus einem Foto zu erzeugen, ist ein schneller Weg zu einem Farbschema, das bereits harmonisch wirkt – denn die Farben stammen aus einer echten Szene: einem Sonnenuntergang, einem Wald oder einem gut gestalteten Raum.

Mit Logos arbeiten

Um Markenfarben aus einem Logo zu bestimmen, nutzen Sie die Originaldatei statt eines Screenshots oder einer komprimierten Kopie, die Farben leicht verschieben kann. Nehmen Sie die flächigen Bereiche des Logos, nicht die Kanten, wo Farben in den Hintergrund übergehen.

Chrome, Edge und andere Chromium-Browser auf Computern unterstützen eine Bildschirm-Pipette. Klicken Sie auf „Farbe von beliebiger Stelle auf dem Bildschirm aufnehmen“, und der Zeiger wird zur Lupe, die Sie über jedes Fenster bewegen können – auch über andere Apps. Klicken Sie zum Aufnehmen oder drücken Sie Esc zum Abbrechen. Ein praktischer Farbwähler für den Bildschirm, wenn die gewünschte Farbe in einem Video, einer Design-App oder auf einer Website steckt.

Firefox und Safari bieten diese Funktion noch nicht, daher ist die Schaltfläche dort ausgeblendet, und Sie wählen stattdessen aus einem hochgeladenen Bild. Auf dem Handy nutzen Sie einen Screenshot: aufnehmen, dann hier einfügen oder auswählen.

Fotos vs. flächige Grafiken

Fotos enthalten Rauschen und Verläufe, benachbarte Pixel können sich also leicht unterscheiden. Für eine repräsentative Farbe aus einem Foto ist die Palette oft besser als ein einzelnes Pixel, weil sie ähnliche Pixel mittelt. Bei Logos und flächigen Grafiken ist ein einzelner Klick exakt.

Farbprofile und Bildschirme

Die Codes stammen aus den Bilddaten, so wie Ihr Browser sie dekodiert. Bilder mit sehr großem Farbraum können auf verschiedenen Bildschirmen leicht unterschiedlich aussehen, aber die Codes sind genau das, was Sie brauchen, um die Farbe in Web- und Design-Tools wiederzugeben.

Komprimierte Bilder

Stark komprimierte JPEGs erzeugen blockige Artefakte an Kanten. Nehmen Sie die Farbe aus der Mitte einer einheitlichen Fläche oder nutzen Sie, wenn vorhanden, eine hochwertigere Version des Bildes.

Ihr Bild bleibt im Speicher Ihres Browsers; nichts wird hochgeladen, protokolliert oder gespeichert. Unterstützt werden JPG-, PNG-, WebP-, GIF- und BMP-Dateien, und transparente Bereiche werden beim Erstellen der Palette ignoriert.

Das Tool ist kostenlos und unbegrenzt, fügt kein Wasserzeichen hinzu und verbraucht keine EnhancerPro-Credits. Möchten Sie aus einer gewählten Palette ein Logo oder Icon machen, sind unser Favicon-Generator und der Bild-in-SVG-Konverter gute nächste Schritte.

Farben in CSS nutzen

Fügen Sie HEX-Codes direkt in Farbeigenschaften ein oder kopieren Sie die Palette als CSS-Variablen und verweisen Sie mit var(--color-1) darauf. Mit HSL-Werten erzeugen Sie hellere Abstufungen ganz einfach, indem Sie den Helligkeitswert erhöhen.

Mit einer starken Farbe beginnen

Die meisten guten Farbschemata beginnen mit einer einzigen Hauptfarbe, oft aus einem Logo oder einem Schlüsselfoto. Nehmen Sie sie hier auf und legen Sie dann ein helles und ein dunkles Neutral für Hintergründe und Text fest. Mit HSL geht das leicht: Farbton und Sättigung beibehalten, Helligkeit für eine Hintergrundtönung erhöhen oder für einen tiefen Akzent senken.

Ergänzende Farben aus der Palette

Die extrahierte Palette enthält meist eine oder zwei kräftige und mehrere gedeckte Farben. Die gedeckten eignen sich gut für Hintergründe, Rahmen und sekundäre Buttons, die kräftigen für Handlungsaufforderungen und Hervorhebungen. Weil sie aus demselben Bild stammen, passen sie meist ganz natürlich zusammen.

Kontrast prüfen

Text muss für alle lesbar sein. Dunkler Text auf heller Tönung oder weißer Text auf tiefer Farbe funktioniert meist. Prüfen Sie wichtige Kombinationen vor dem Veröffentlichen mit einem Kontrastprüfer, besonders bei Buttons und kleinem Text. Eine Farbe, die auf einem Foto kräftig wirkt, kann für Text auf weißer Seite zu hell sein.

Festhalten

Speichern Sie die endgültigen Codes in einem Styleguide oder als CSS-Variablen. Wenn Sie die Palette als CSS Custom Properties kopieren, haben Sie einen fertigen Ausgangspunkt, den Sie umbenennen können – etwa primary, accent und surface –, damit jede Seite Ihrer Website genau dieselben Töne nutzt.

Farben für den Druck

Bildschirmfarben nutzen RGB, Drucker CMYK-Farben. Die Codes hier sind ideal für Bildschirme; für Drucksachen bitten Sie Ihre Druckerei, sie umzurechnen oder an ein gedrucktes Farbmuster anzupassen, denn manche leuchtenden Bildschirmfarben lassen sich nicht exakt drucken.

Farben im Team teilen

Designer, Entwickler und Kunden beschreiben Farben oft unterschiedlich: als HEX-Code in einer Designdatei, als RGB-Wert in einer Präsentation, als HSL-Wert im Stylesheet. Alle drei aus derselben Auswahl zu kopieren, vermeidet kleine Abweichungen, die sich beim Umrechnen von Hand einschleichen. Fügen Sie die Codes zusammen mit dem Ausgangsbild in Ihre Projektnotizen ein, damit jeder sieht, woher jede Farbe stammt, und sie später erneut aufnehmen kann, falls die Palette angepasst werden muss.

Saisonale und stimmungsvolle Paletten

Fotos sind eine großartige Quelle für Stimmung. Herbstlaub liefert Orange und tiefes Rot, eine Strandszene sandige Neutraltöne und Türkis, eine Stadt bei Nacht tiefes Blau mit Neonakzenten. Extrahieren Sie Paletten aus mehreren Bildern, die zum gewünschten Gefühl passen, und behalten Sie die Farben, die immer wieder auftauchen. Dieses wiederkehrende Set wird meist zu einem starken, stimmigen Schema.