Farbe aus einem Bild auswählen
Klicke in einem Foto oder Screenshot auf einen Pixel, um HEX-, RGB- und HSL-Wert zu lesen und zu kopieren. Die Datei wird im aktuellen Browser verarbeitet.
Ausgewählte Farbe
- HEX
#0066cc - RGB
rgb(0, 102, 204) - HSL
hsl(210, 100%, 40%)
Anpassen (HSV)
Gewählte Farben
Gewählte Farben erscheinen hier.
So wählst du eine Farbe aus einem Bild
Wähle ein Bild, prüfe die gewünschte Stelle und kopiere den Farbwert.
Bild auswählen
Klicke auf den Auswahlbereich, um eine Datei zu wählen, oder ziehe ein Bild auf die Seite. Geeignet sind Bilder in JPG, PNG oder WebP, die dein Browser öffnen kann. Am Desktop kannst du auch zum Tab „Vom Bildschirm“ wechseln und eine Farbe von einer beliebigen Stelle deines Bildschirms aufnehmen.
Gewünschte Stelle anklicken
Bewege den Mauszeiger über das Bild, um die Lupe einzublenden. Klicke eine Stelle an, um die Farbe dieses Pixels auszuwählen. Mit den Pfeiltasten bewegst du die Auswahl um 1 px, mit dem Scrollrad änderst du den Zoom und durch Ziehen verschiebst du den Ausschnitt.
Farbwert prüfen und feinjustieren
Die HEX-, RGB- und HSL-Werte der gewählten Farbe erscheinen im Panel. Bei Bedarf verfeinerst du Farbton, Sättigung und Helligkeit mit den HSV-Reglern, bis die Farbe genau stimmt.
Kopieren und verwenden
Drücke den Kopieren-Button neben einem Wert, um ihn in die Zwischenablage zu übernehmen. Jede gewählte Farbe landet im Verlauf – sammle mehrere und hole sie mit „Alle kopieren“ auf einmal, bereit zum Einfügen in CSS oder dein Design-Tool.
Farbwert eines Pixels ablesen
Wähle ein Bild und klicke auf die gewünschte Stelle. Der Farbwähler zeigt den Wert dieses Pixels als HEX, RGB und HSL an. So kannst du Farben aus Logos, Hintergründen, Schaltflächen und Illustrationen in Design oder Code übernehmen.
HEX-, RGB- und HSL-Werte kopieren
Kopiere den benötigten HEX-, RGB- oder HSL-Wert in die Zwischenablage und füge ihn in ein Designwerkzeug, eine CSS-Datei oder ein Dokument ein.
Wann der Farbwähler hilft
Nutze den Farbwähler, wenn du für Design oder Entwicklung den Wert eines bestimmten Pixels brauchst.
Markenfarben prüfen
Extrahiere die exakte Hauptfarbe aus einem Logo oder Markenfoto und wende sie einheitlich auf Visitenkarten, Websites und Präsentationen an. Besonders praktisch, wenn es keinen Farbguide zur Marke gibt.
Farben in der Webentwicklung abgreifen
Mache einen Screenshot einer Website, die du als Referenz nutzen willst, und lies Button-, Hintergrund- und Textfarben sofort als HEX-Werte ab. So bekommst du die Farbcodes für dein CSS, ohne die Entwicklertools zu öffnen.
Design-Umsetzungen prüfen
Erfasse den Designentwurf und die umgesetzte Seite und vergleiche die Farbe an derselben Stelle. Abweichungen zwischen Entwurf und Umsetzung werden zu objektiven Zahlen.
Häufig gestellte Fragen
In welchen Formaten kann ich die extrahierten Farbwerte ansehen?
Die ausgewählte Farbe steht in den gängigsten Formaten zur Verfügung – HEX, RGB und HSL.
| Format | Beispiel | Häufig verwendet in |
|---|---|---|
| HEX | #0066cc | HTML, CSS, Designsysteme |
| RGB | rgb(0, 102, 204) | CSS, JavaScript, Grafikarbeit |
| HSL | hsl(210, 100%, 40%) | Helligkeit und Sättigung anpassen |
HEX wird im Webdesign am häufigsten genutzt, RGB ist für Bildschirmfarben intuitiv, und HSL ist praktisch, um Helligkeit und Sättigung einer Farbe anzupassen.
Kann ich Farben aus einem Screenshot wählen?
Ja, das ist möglich. Lade einen Screenshot einer Website, eines App-Bildschirms, eines Designentwurfs oder eines Dokuments hoch und klicke dann auf eine beliebige Stelle, um die Farbe abzulesen. Praktisch ist das zum Beispiel, um die Button-Farbe einer Webseite, die Hintergrundfarbe eines Banners, die Logo-Farbe oder die Icon-Farbe zu prüfen. Beachte jedoch: Wenn der Screenshot komprimiert wurde oder mit Vergrößerung bzw. Verkleinerung aufgenommen wurde, kann die Farbe leicht vom Original abweichen.
Sind die extrahierten Farben genau?
Die Farben werden anhand der tatsächlichen Pixel im Bild ausgelesen, sodass du den Farbwert genau an der angeklickten Stelle erhältst. Wenn das Bild jedoch komprimiert ist oder Schatten, Verläufe, Transparenz oder Anti-Aliasing aufweist, kann das Pixel mit benachbarten Farben vermischt erscheinen. Für ein möglichst genaues Ergebnis klicke auf eine einfarbige Fläche oder verwende ein hochwertiges Bild nahe am Original.