Über das Bild bewegen für die Vorschau, klicken, um eine Farbe festzuhalten. Die Lupe zeigt einzelne Pixel.
Gewählte Farbe
Bildpalette
Verlauf
Farben, die du anklickst, werden hier aufbewahrt.
Du baust Tönungen, Schattierungen und Harmonien aus einer hier gewählten Farbe? Schick sie an den Farb-Konverter & Farbwähler. Erst das Bild zuschneiden oder skalieren? Nimm den Bild-Zuschneider.
Die Werte werden direkt aus den dekodierten Bilddaten gelesen, und die Lupe vergrößert einzelne Pixel, sodass du genau das triffst, das du gemeint hast.
Die Farbfelder sind die Farben, die tatsächlich den größten Teil des Bildes füllen, weit genug auseinander, sodass du nie sechs Töne desselben Blaus bekommst.
Alles passiert auf deinem Gerät per Canvas. Nichts wird hochgeladen, nichts getrackt, und alles funktioniert offline.
So wählst du eine Farbe aus einem Bild
Ziehe ein Foto, einen Screenshot oder ein Logo auf das Feld oben oder füge einfach eines aus der Zwischenablage ein. Dann:
Überfahren, vergrößern, klicken
Beim Bewegen über das Bild siehst du die Farbe unter deinem Cursor live in der Vorschau. Die runde Lupe vergrößert die umliegenden Pixel, sodass du genau auf dem gewünschten landest, was mehr zählt, als man denkt: Was wie eine einfarbige Fläche aussieht, sind oft dutzende leicht unterschiedliche Töne. Klicke, um eine Farbe festzuhalten und sie deinem Verlauf hinzuzufügen.
Nutze die extrahierte Palette
Der Palettenbereich zeigt die dominanten Farben des Bildes, gemessen über jedes abgetastete Pixel statt zufällig aus wenigen gewählt, und mit Abstand angeordnet, sodass du sechs brauchbare Farben bekommst statt sechs Töne derselben. Es ist der schnellste Weg, ein Schema aus einem Foto, einem Marken-Asset oder einem Screenshot einer Seite zu bauen, die dir gefällt. Alle als CSS kopieren gibt dir den ganzen Satz als Custom Properties, bereit zum Einfügen in ein Stylesheet.
Von überall auf dem Bildschirm wählen
In Chrome, Edge und Opera erscheint ein Button Vom Bildschirm wählen, der die eingebaute EyeDropper des Browsers nutzt, um jedes Pixel auf deinem Display abzutasten, ohne vorher einen Screenshot zu machen. Andere Browser blenden den Button aus; ziehe stattdessen einen Screenshot hinein, und das Ergebnis ist dasselbe.
HEX, RGB und HSL: dieselbe Farbe, drei Wege
Jede Farbe hier wird in drei Notationen gezeigt. Sie sind austauschbar, und welche du willst, hängt davon ab, was du damit vorhast.
| Notation | Beispiel | Am besten für |
|---|---|---|
| HEX | #2563eb | CSS, Design-Tools und überall, wo eine Farbe als einzelnes Token eingefügt wird |
| RGB | rgb(37, 99, 235) | Code, der Kanäle mischt, Canvas-Arbeit und das Hinzufügen von Transparenz |
| HSL | hsl(221, 83%, 53%) | Eine Farbe von Hand anpassen: Tönungen, Schattierungen und Harmonien bauen |
HSL ist das, was sich zu lernen lohnt. Weil Farbton, Sättigung und Helligkeit getrennt sind, heißt eine Farbe aufzuhellen, eine Zahl zu erhöhen, und ihre Komplementärfarbe zu finden, heißt, 180 zum Farbton zu addieren. Beides in HEX zu tun bedeutet, alle drei Kanäle neu zu berechnen.
Häufig gestellte Fragen
Wie bekomme ich den HEX-Code einer Farbe in einem Bild?
Lade das Bild auf diese Seite und bewege dann den Cursor darüber. Die Farbe unter dem Zeiger wird live abgelesen und als HEX-Code angezeigt. Klicke, um diese Farbe festzuhalten, und kopiere sie dann. Die Lupe, die deinem Cursor folgt, zeigt die einzelnen Pixel vergrößert, sodass du auch in einem detailreichen Foto präzise wählen kannst.
Was ist der Unterschied zwischen HEX, RGB und HSL?
Es sind drei Arten, dieselbe Farbe zu schreiben. HEX (#2563eb) ist eine kompakte sechsstellige Form, die in CSS und Design-Tools durchgängig genutzt wird. RGB (37, 99, 235) gibt an, wie viel rotes, grünes und blaues Licht gemischt wird, jeweils von 0 bis 255. HSL (221, 83%, 53%) beschreibt Farbton, Sättigung und Helligkeit und lässt sich weit leichter von Hand anpassen: Um eine Farbe in HSL aufzuhellen, erhöhst du einfach das L.
Wie wird die Farbpalette aus meinem Bild extrahiert?
Die Pixel des Bildes werden abgetastet und in ein Raster von Farbeimern sortiert, und die Eimer mit den meisten Pixeln gewinnen. Die Farbfelder sind also wirklich die Farben, die den größten Teil des Bildes füllen, nicht ein paar willkürliche Proben. Eine zusätzliche Regel hält das Ergebnis nützlich: Ein Eimer wird übersprungen, wenn er einer bereits gewählten Farbe zu nahe ist. Ohne sie würde dir ein Foto von blauem Himmel sechs fast identische Blautöne liefern. Jedes Feld ist der echte Durchschnitt der Pixel in seinem Eimer, sodass eine einfarbige Fläche exakt zurückkommt.
Warum weicht die gewählte Farbe leicht vom Original ab?
Zwei häufige Gründe. Verlustbehaftete Formate wie JPEG verändern Pixel bei der Kompression leicht, sodass eine Fläche, die wie eine einzige Farbe aussieht, oft viele fast identische Töne enthält, was die Lupe sofort zeigt. Screenshots und Fotos tragen außerdem Unterschiede in Licht, Schatten und Farbprofil. Der hier gezeigte Wert ist immer der echte Pixelwert aus den dekodierten Bilddaten.
Kann ich eine Farbe von überall auf meinem Bildschirm wählen?
Ja, in Browsern, die die EyeDropper-API unterstützen (Chrome, Edge und Opera). Der Button „Vom Bildschirm wählen“ erscheint automatisch, wenn sie verfügbar ist, und lässt dich jedes Pixel auf deinem Display abtasten, nicht nur das geladene Bild. In anderen Browsern mache stattdessen einen Screenshot und ziehe ihn auf diese Seite. Das Ergebnis ist identisch.
Wird mein Bild irgendwohin hochgeladen?
Nein. Das Bild wird in deinem Browser per Canvas dekodiert und Pixel für Pixel gelesen, also nie hochgeladen, gespeichert oder von jemand anderem gesehen. Nichts wird getrackt, es gibt kein Konto, und die Seite funktioniert auch mit ausgeschalteter Verbindung weiter.