Sie sehen einen Blauton auf einer fremden Seite und wollen ihn exakt in Ihrem eigenen Projekt verwenden.

Nun, „ungefähr dasselbe Blau“ reicht dafür nicht, denn ein Wert, der danebenliegt, fällt sofort auf, sobald er neben der richtigen Farbe steht.

Um die Farbe einer Website herausfinden zu können, gibt es zwei Wege, und sie liefern nicht immer dasselbe Ergebnis.

Der eine liest den CSS-Wert, den der Entwickler geschrieben hat.

Der andere misst die Pixelfarbe, die Ihr Monitor gerade anzeigt.

Und welcher der beiden ist nun der richtige?

In fast allen Fällen der erste, und warum das so ist, klärt der nächste Abschnitt.

Dieser Artikel zeigt Ihnen beide, mit dem vollständigen Klickweg für Chrome, Firefox, Edge und Safari, und dazu die Fälle, in denen der gemessene Wert Sie in die Irre führt.

Warum der CSS-Wert zuverlässiger ist als die Pipette

Eine Pipette sampelt das, was nach dem Rendern auf dem Bildschirm übrig bleibt, also die Mischung aus CSS-Farbe, Transparenzen, Bildkompression, Monitorprofil und Gamut-Zuordnung des Browsers.

Der Wert im Entwicklertool dagegen steht so tatsächlich im Stylesheet, und für Ihr eigenes CSS ist immer dieser der richtige.

Die Pipette benutzen Sie dann, wenn es kein CSS gibt, also bei Bildern, Logos, PDFs und allem außerhalb des Browsers.

Farbe einer Website herausfinden mit den Chrome DevTools

Chrome braucht dafür keine Erweiterung.

1. Element auswählen: Öffnen Sie die Seite mit der gewünschten Farbe. Rechtsklick direkt auf das Element, dessen Farbe Sie brauchen. Im Kontextmenü auf „Untersuchen“ klicken.
2. Den Farbwert im Styles-Pane finden: Links öffnet sich das Elements-Panel, Ihr Element ist dort bereits markiert. Rechts im Styles-Pane suchen Sie die passende Deklaration, also color für Text, background-color für die Fläche, border-color für den Rahmen. Neben dem Wert steht ein kleines farbiges Quadrat, etwa bei color: #ff0099.

Wie man hier sehen kann, steht der Hex-Wert im Klartext neben der Eigenschaft, gemessen werden muss also gar nichts.

3. Wert kopieren: Doppelklick auf den Farbwert markiert ihn. Mit Strg + C kopieren Sie ihn in die Zwischenablage.

Der Eyedropper in Chrome

Manchmal wissen Sie nicht, welches Element die Farbe überhaupt setzt.

1. Color Picker öffnen: Klick auf das farbige Quadrat neben einem beliebigen CSS-Farbwert. Der Color Picker öffnet sich, oben rechts sitzt das Eyedropper-Symbol.
2. Farbe aufnehmen: Klick auf das Auge-Symbol, alternativ die Taste C. Den Cursor über die gewünschte Stelle bewegen, das funktioniert auf dem gesamten Bildschirm. Ein Klick übernimmt den Farbwert in das CSS-Feld.

Achtung an dieser Stelle: Der Eyedropper schreibt den Wert in die Deklaration hinein und überschreibt damit die Originalfarbe in Ihrer Ansicht.

Notieren Sie sich den ursprünglichen Wert, bevor Sie klicken, sonst ist er weg.

Mit Escape beenden Sie den Eyedropper, ohne eine Auswahl zu treffen.

Das Farbformat wechseln

Der kopierte Wert kommt nicht immer im gewünschten Format.

Shift + Klick auf das Farbvorschau-Quadrat wechselt es direkt im Code, im geöffneten Color Picker klicken Sie auf den Formatnamen.

Zur Wahl stehen HEX, RGB, HSL, HWB, LCH, OKLCH, Lab, OKLab und color().

Der gleiche Weg in Firefox, Edge und Safari

Firefox

Firefox bietet eine Pipette, die ohne den Umweg über eine CSS-Eigenschaft funktioniert.

1. Pipette direkt nutzen: DevTools mit F12 öffnen. Im Inspector-Tab oben rechts auf das Pipetten-Symbol klicken, der Tooltip lautet „Grab a color from the page“. Über die gewünschte Farbe fahren, ein Klick kopiert den Hex-Code sofort in die Zwischenablage.
2. Alternativ über die CSS-Eigenschaft: Element im Inspector auswählen und den Farbwert im Styles-Pane suchen. Auf das Farbkreis-Symbol neben dem Wert klicken. Im Color Picker unten links das Auge-Symbol anklicken und eine Farbe auf der Seite wählen.

Der Inspector unterstützt dabei ausdrücklich HWB, LCH, Lab, Display-P3 und sRGB und rechnet Farbwerte auf Wunsch inline zwischen den Formaten um.

Microsoft Edge

Edge basiert auf Chromium, der Klickweg ist deshalb identisch mit Chrome: F12 drücken, ins Elements-Panel wechseln, im Styles-Bereich das farbige Quadrat neben dem CSS-Wert anklicken, Eyedropper aktivieren.

Zusätzlich hat Edge im Accessibility-Bereich der DevTools einen eigenen Color Picker für die Prüfung von Farbkontrasten nach WCAG, relevant, wenn Sie die Farbe auch als Textfarbe einsetzen wollen.

Safari

In Safari müssen Sie die Entwicklerwerkzeuge erst freischalten.

1. Develop-Menü aktivieren: Safari → Einstellungen → Erweitert öffnen. Den Haken bei „Entwicklermenü in der Menüleiste anzeigen“ setzen.
2. Farbe auslesen: Rechtsklick auf das Element → „Element untersuchen“. Im Styles-Pane das Farbvorschau-Viereck neben dem CSS-Wert anklicken, der Color Picker öffnet sich mit Eyedropper-Funktion.

Bedauerlicherweise arbeitet der Safari-Eyedropper standardmäßig nur innerhalb des Browserfensters, für alles außerhalb brauchen Sie auf dem Mac das Digital Color Meter.

Erweiterungen, wenn es schneller gehen soll

Wer täglich Farben abgreift, will nicht jedes Mal die DevTools öffnen, und diese drei Erweiterungen sind 2026 aktiv und gepflegt.

„ColorZilla“ für Chrome und Firefox ist die meistgenutzte Option, gibt es seit 2004, ist kostenlos, liegt in Version 4.1 unter Manifest V3 vor und deckt Eyedropper, Palette-Analyse der aktuellen Seite sowie einen „Ultimate CSS Gradient Generator“ ab.

Die Migration auf Manifest V3 ist kein Detail, denn ältere MV2-Erweiterungen gelten in Chrome seit 2024 als veraltet und können ausfallen.

„Eye Dropper“ für Chrome und Firefox ist die puristische Alternative, kostenlos, seit 2010 im Einsatz, über eine Million Nutzer, ohne Tracking, dafür mit Palette-Speicherung, JSON-Export und Unterstützung für HEX, RGB und HSL.

„CSS Peeper“ für Chrome richtet sich eher an Designer, zeigt alle Farben einer Seite mit Häufigkeitszähler und gruppiert nach Hintergrund, Text und Border, der Pro-Plan exportiert nach Figma, Adobe und Sketch.

Darf keine Erweiterung installiert werden, etwa auf einem Firmenrechner, helfen Online-Tools wie „ImageColorPicker“ (imagecolorpicker.com) oder das deutschsprachige „HexFinder“ (hexfinder.de).

Farben außerhalb des Browsers: PowerToys und Digital Color Meter

Manche Farben stehen nicht auf einer Website, sondern in einem PDF, einer Präsentation oder einem Programmfenster.

Windows: PowerToys Color Picker

PowerToys ist ein kostenloses Paket von Microsoft, zu finden unter github.com/microsoft/PowerToys.

Nach der Installation aktivieren Sie den Color Picker mit Win + Shift + C, ein Linksklick wählt die Farbe und öffnet den Editor, ein Klick mit dem Mausrad wählt sie und schließt direkt.

Der Editor speichert bis zu 20 Farben und gibt HEX, RGB, HSL, HSV, CMYK, XYZ, Lab und HSB aus.

Eine Einschränkung bleibt: Wide Color Gamut und HDR unterstützt der PowerToys Color Picker nach aktuellem Stand nicht.

macOS: Digital Color Meter

Das Digital Color Meter ist vorinstalliert und liegt unter Programme → Dienstprogramme → Digital Color Meter.

Es zeigt die Farbe unter dem Mauszeiger in Echtzeit, wahlweise in sRGB, Display P3, Adobe RGB, Generic RGB oder Generic Gray.

Apfel + Shift + C kopiert den Farbwert, Apfel + L sperrt ihn, damit er beim Weiterbewegen der Maus nicht wegspringt.

Einen Export gibt es nicht, wem das zu umständlich ist, der greift zu „SIP“, einem Drittanbieter-Tool für rund 10 Euro mit 49 Farbformaten.

Wann der ausgelesene Wert falsch ist

Jetzt kommt der Teil, der in den meisten Anleitungen fehlt: sechs Situationen, in denen Ihr Farbwert nicht stimmt, obwohl das Tool sauber gearbeitet hat.

Verläufe

Ein Verlauf hat keinen einzelnen Farbwert.

Steht im CSS background: linear-gradient(135deg, #ff6b35, #ff0066);, dann liefert der Eyedropper die interpolierte Farbe an genau der Pixelposition, die Sie angeklickt haben, und nicht die beiden Ursprungsfarben.

Lesen Sie hier die CSS-Eigenschaft im Elements-Panel ab, dort stehen beide Farbstopps.

Transparenz über einem Hintergrund

Liegt über einer Fläche ein Overlay wie background-color: rgba(0, 0, 0, 0.3);, dann sampelt jedes pixelbasierte Tool die Mischung aus Overlay und Untergrund, auf weißem Hintergrund also etwa #4d4d4d statt der gesetzten Deklaration.

Die Folge merken Sie erst später: Setzen Sie diese gemischte Farbe auf einen anderen Hintergrund, sieht sie plötzlich anders aus als im Original.

Auch hier gilt, den CSS-Wert im Elements-Panel lesen, nicht den Pixel-Output.

Bilder statt CSS-Farbe

Kommt die Farbe von einem Hintergrundbild, also background-image: url('hero.jpg');, dann gibt es überhaupt keinen CSS-Farbwert, DevTools zeigt an dieser Stelle nur das Bild.

Der Eyedropper liefert dann zwar korrekt, was Sie sehen, aber eben die Pixelfarbe eines JPG, und JPG-Kompression verschiebt Farben.

Besser: Screenshot machen und die Farbe in einem Bildwerkzeug bestimmen.

SVG-Füllungen

Bei einem SVG steht die Farbe nicht im CSS, sondern im SVG-Quellcode selbst, etwa als fill="#ff6b35".

Zwei Varianten sehen dabei nach einer Farbe aus, sind aber keine: fill="currentColor" erbt die color-Eigenschaft des Elternelements, fill="var(--brand-primary)" verweist auf eine CSS-Custom-Property.

1. SVG-Farbe auslesen: Rechtsklick auf das SVG-Element → „Untersuchen“. Im Elements-Panel das <svg>-Tag über den kleinen Pfeil aufklappen. Im Markup das Attribut fill suchen und den Wert ablesen.

Browser rendern SVG-Farben manchmal mit Gamut-Mapping, weshalb der Wert im DevTools-Panel hier zuverlässiger ist als die Pipette auf der Grafik.

Farbprofile und Monitorkalibrierung

Websites deklarieren für CSS-Farben selten einen Farbraum, der Standard ist sRGB.

Ein Display-P3-Display, wie es aktuelle MacBooks und iPhones haben, zeigt sRGB-Farben jedoch gesättigter an, wenn color-gamut: p3 greift.

Ein nicht kalibrierter Monitor zeigt denselben Hex-Wert ebenfalls anders als ein kalibrierter, und ein Screenshot von einem P3-Display kann P3-Farbwerte enthalten.

Praktisch heißt das: Ein systemweiter Picker wie PowerToys oder das Digital Color Meter gibt Ihnen den Gerätewert, und dieser muss nicht mit dem CSS-Hex-Wert übereinstimmen.

Im DevTools-Panel steht der CSS-Wert direkt, deshalb ist dieser Weg bei Abweichungen immer der Schiedsrichter.

JPG-Kompression

Ein Logo, das als JPG exportiert wurde, hat andere Pixelfarben als das Original.

Wer eine Markenfarbe aus einer JPG-Datei sampelt, bekommt folglich einen Näherungswert, nutzen Sie PNG, SVG oder gleich die Angabe aus der Markenrichtlinie.

Die komplette Farbpalette einer Website auslesen

Oft brauchen Sie nicht eine Farbe, sondern alle, und moderne Websites legen ihre Palette gesammelt im :root ab.

1. Palette im :root finden: DevTools mit F12 öffnen. Im Elements-Panel ganz nach oben scrollen und das <html>-Tag anklicken. Im Styles-Pane nach dem Block :root suchen. Dort stehen alle Custom Properties mit ihren Werten, etwa --color-primary: #ff6b35; oder --color-secondary: oklch(70% 0.15 240);.

Wie man hier sieht, verrät die Benennung gleich die Rolle der Farbe, also Primärfarbe, Text und Hintergrund.

Alternativ übernehmen „CSS Peeper“ oder der „Color Palette Extractor“ diese Arbeit, letzterer löst die CSS-Variablen auf und zeigt den tatsächlichen Wert statt des Variablennamens.

HEX, RGB, HSL und OKLCH: welchen Wert Sie übernehmen sollten

Der kopierte Wert kann in mehreren Schreibweisen vorliegen.

HEX wie #ff6b35 ist die kompakte Hexadezimal-Darstellung des sRGB-Farbraums und der Standard in Figma und Adobe, die Kurzform #f63 entspricht #ff6633.

RGB wie rgb(255 107 53) gibt dieselben drei Kanäle dezimal von 0 bis 255 an, die moderne Syntax ohne Komma und mit / für Alpha hat rgba() faktisch abgelöst.

HSL wie hsl(17 100% 60%) beschreibt Farbton, Sättigung und Helligkeit, hat aber einen Haken: HSL ist nicht wahrnehmungsuniform, Blau bei 50% Helligkeit wirkt deutlich dunkler als Gelb bei 50% Helligkeit.

OKLCH wie oklch(70% 0.15 240) steht für OK Lightness, Chroma, Hue, basiert auf dem 2020 von Björn Ottosson entwickelten Oklab-Farbraum und löst genau dieses Problem: Eine Helligkeitsänderung von 10% wirkt dort in jeder Farbe gleich, Farbrampen und Dark-Mode-Invertierung funktionieren ohne Nachkorrektur, und die L-Komponente korreliert besser mit dem wahrgenommenen Kontrast.

OKLCH läuft in Chrome 111+, Firefox 113+, Safari 15.4+ und Edge 111+, also bei etwa 93 bis 95 Prozent globaler Abdeckung.

Für den Rest schreiben Sie einen Fallback, also zuerst color: #ff6b35; und darunter color: oklch(66% 0.17 38);, alte Browser nehmen die erste Zeile, moderne die zweite.

Umrechnen müssen Sie nichts selbst, Chrome, Firefox und Edge wechseln die Formate per Shift + Klick auf das Farbquadrat.

Mehr zum Aufbau einer stimmigen Palette finden Sie in unserem Beitrag Farbpalette für Websites erstellen.

Farben aus einem Logo oder Bild bestimmen

Ohne Website, also nur mit einer Datei, brauchen Sie ein Bildwerkzeug.

Ohne Installation arbeiten dafür „ImageColorPicker“ (imagecolorpicker.com) mit Upload oder URL, „Adobe Color“ (color.adobe.com/de/create/image) mit Palettenvorschlag und „Ginifab“ für die Durchschnittsfarbe eines Bildausschnitts.

Auf dem Desktop nehmen Sie in Photoshop das Eyedropper-Werkzeug, das HEX, RGB, CMYK und HSB zugleich anzeigt, in GIMP heißt es „Farbe aufnehmen“ und liegt auf Shift + O.

Ein Problem löst jedoch kein Tool: JPG-Kompression verschiebt Farben, skalierte PNGs mischen durch Antialiasing an den Kanten, ein abfotografiertes Druckstück verzerrt über Licht und den Unterschied zwischen CMYK und RGB.

Verlässlich ist allein die Markenrichtlinie oder die Designdatei, also SVG, AI oder PDF.

Dürfen Sie eine fremde Websitefarbe übernehmen?

Eine abstrakte Farbe lässt sich nicht wie ein Logo urheberrechtlich schützen, das Kopieren eines Hex-Werts ist damit grundsätzlich unbedenklich.

Heikel wird es beim Markenrecht, denn eine Farbe kann beim Deutschen Patent- und Markenamt oder beim EUIPO als Farbmarke eingetragen werden, wenn sie Verkehrsdurchsetzung erlangt hat, präzise bestimmt ist und in ihrer Branche unterscheidungskräftig wirkt.

In Deutschland betrifft das unter anderem das Telekom-Magenta (Pantone 485), das Milka-Lila, das Sparkassen-Rot, das Nivea-Dunkelblau und das Langenscheidt-Gelb, und die Telekom hat gegen ähnliche Magenta-Töne bereits erfolgreich geklagt.

Problematisch wird es also, wenn Sie eine eingetragene Farbmarke verwenden, wenn Verwechslungsgefahr mit einem bekannten Unternehmen derselben Branche entsteht oder wenn Sie die gesamte visuelle Identität aus Farbe, Schrift und Layout übernehmen.

Im Zweifel prüfen Sie das Register des DPMA unter dpma.de.

FAQ

Wie finde ich heraus, welche Farbe eine Website verwendet?

Rechtsklick auf das Element, dann „Untersuchen“, dann rechts im Styles-Pane nach color, background-color oder border-color suchen und den Wert ablesen.

Das funktioniert identisch in Chrome, Firefox, Edge, Brave, Opera und Arc.

Wie lese ich einen Hex-Code ohne Erweiterung aus?

Über die eingebauten Entwicklertools: Chrome, Edge und Firefox haben einen Color Picker mit Pipette im Styles-Pane, Firefox zusätzlich ein Pipetten-Symbol im Inspector, das den Hex-Code direkt in die Zwischenablage legt.

Wie bekomme ich den Hex-Code einer Farbe irgendwo auf dem Bildschirm?

Unter Windows über den PowerToys Color Picker mit Win + Shift + C, unter macOS über das vorinstallierte Digital Color Meter mit Apfel + Shift + C, beide arbeiten systemweit.

Welche Erweiterung zeigt mir alle Farben einer Website?

„CSS Peeper“ listet alle Farben der Seite mit Häufigkeit und Verwendung auf, der „Color Palette Extractor“ durchsucht den DOM und löst CSS-Variablen auf.

Warum stimmt der Farbwert aus der Pipette nicht mit dem CSS überein?

Weil die Pipette die gerenderte Pixelfarbe misst, und transparente Overlays, Verläufe, JPG-Kompression und Ihr Monitorprofil verändern genau diesen Pixel.

Wie finde ich die Farbe eines Logos heraus?

Öffnen Sie das Logo in „ImageColorPicker“, „Adobe Color“ oder GIMP und nehmen Sie die Farbe dort auf, bei JPG oder skaliertem PNG bleibt der Wert aber eine Näherung.

Was ist der Unterschied zwischen HEX, RGB und OKLCH?

HEX und RGB beschreiben denselben sRGB-Farbraum, einmal hexadezimal und einmal dezimal, OKLCH beschreibt Farbe über Helligkeit, Chroma und Farbton und ist wahrnehmungsuniform, gleiche Helligkeitsschritte wirken dort in jeder Farbe gleich stark.

Wenn nichts davon zum Ziel führt

Ein Fall bleibt übrig, in dem alle Wege ins Leere laufen.

Stammt die Farbe aus einem Foto, liegt darüber ein transparentes Overlay und arbeitet die Seite zusätzlich mit Filtern, dann gibt es keinen sauberen Ursprungswert mehr.

Dann nehmen Sie den gemessenen Pixelwert als Startpunkt und korrigieren ihn in Ihrem eigenen Kontext nach Augenmaß, unschöne Handarbeit, aber ehrlicher als ein Wert, der exakt aussieht und es nicht ist.

In allen anderen Fällen haben Sie es geschafft: Ein Rechtsklick, ein Blick ins Styles-Pane, und der Farbcode gehört Ihnen!

Wie Sie daraus ein stimmiges Gesamtbild machen, zeigen wir in Webdesign Grundlagen.

Sie möchten das nicht selbst umsetzen? Wir übernehmen das für Sie. Mehr dazu auf unserer Seite Website erstellen lassen.