Zurück zum Blog

Farbe vom Bildschirm auf dem Mac aufnehmen (Anleitung 2026)

Von MorganVeröffentlicht 14. April 202611 min Lesezeit

Ein Farbwähler für den Bildschirm auf dem Mac schnappt die exakte Farbe jedes Pixels auf deinem Display. Brauchst du einen HEX-Code für CSS? Einen RGB-Wert für Figma? Einen HSL-Wert für dein Design-System? macOS hat zwei integrierte Tools dafür. Drittanbieter-Apps bringen mehr Geschwindigkeit und Optionen.

Egal, ob du Markenfarben matchst, Inspiration von einer Website ziehst oder UI-Inkonsistenzen debuggst – hier sind fünf zuverlässige Wege, jede Farbe vom Mac-Bildschirm aufzunehmen.

Methode 1: Digital-Farbmesser (integriert)

Jeder Mac kommt mit dem Digital-Farbmesser. Diese kleine App zeigt den Farbwert unter deinem Cursor in Echtzeit. Es ist der schnellste Weg, die Farbe eines Pixels zu schnappen. Keine Installation nötig.

So öffnest du den Digital-Farbmesser

  1. Drücke ⌘ + Space, um Spotlight zu öffnen
  2. Tippe „Digital-Farbmesser"
  3. Drücke Return – die App öffnet sich sofort

Du siehst eine kleine vergrößerte Vorschau des Bereichs um deinen Cursor sowie Live-RGB-Werte.

Digital-Farbmesser-App zeigt vergrößerte Pixelansicht mit RGB-Werten
Digital-Farbmesser-App zeigt vergrößerte Pixelansicht mit RGB-Werten

Die Apertur für Präzision nutzen

Die Aperturgröße legt fest, wie viele Pixel auf einmal abgetastet werden. Kleiner heißt genauer. Größer heißt, dass benachbarte Farben miteinander vermischt werden.

  • 1×1 Pixel: Die exakte Farbe eines Pixels. Am besten für UI-Arbeit.
  • Größere Apertur: Verschmilzt den Bereich zu einer Farbe. Toll für Fotos oder Verläufe.

Zieh den Schieberegler ganz nach links für den Einzel-Pixel-Modus.

Farbwerte kopieren

Der Digital-Farbmesser unterstützt mehrere Kopierkürzel:

  • ⌘ + Shift + C – Farbwert als Text kopieren (RGB-Zahlen)
  • ⌘ + Option + C – 74×74 Farbmuster in die Zwischenablage kopieren
  • ⌘ + L – Aktuelle Position fixieren (damit du die Maus wegbewegen kannst)

Profi-Tipp: Willst du HEX-Werte stattdessen? Geh zu DarstellungWert anzeigenals Hexadezimal. Das tauscht die Anzeige von einfachen RGB-Zahlen gegen HEX-Codes. Viel praktischer für Webarbeit.

Methode 2: System-Farbwähler (In-App-Pipette)

Der macOS-System-Farbwähler poppt auf, wenn du in einer nativen App auf ein Farbfeld klickst. Das gilt für Pages, Keynote, Notizen und TextEdit. Er hat eine integrierte Pipette, die auf deinem ganzen Bildschirm funktioniert.

macOS-System-Farbwähler-Panel mit Farbrad und Pipettenwerkzeug
macOS-System-Farbwähler-Panel mit Farbrad und Pipettenwerkzeug

So nutzt du die Pipette

  1. Öffne eine App mit einem Farbfeld (TextEdit eignet sich gut für schnelle Tests)
  2. Klicke das Farbfeld an, um das Farbwähler-Panel zu öffnen
  3. Klicke auf das Pipettensymbol (Lupe) neben dem Hauptfarbmuster
  4. Dein Cursor wird zur Lupe – klicke irgendwo auf dem Bildschirm zum Abtasten

HEX-Farbwerte bekommen

Der System-Farbwähler zeigt HEX nicht standardmäßig an. Aber du schaltest es einfach ein:

  1. Klick auf den Tab Farbregler (zweites Symbol von links)
  2. Wähle RGB-Regler im Dropdown
  3. Das Feld Hex-Farbe # erscheint unter den Reglern
  4. Kopiere den HEX-Wert direkt

Du kannst auch einen HEX-Code in dieses Feld einfügen, um eine Farbe einzustellen. Praktisch, wenn du eine Markenfarbe hast und passende Schattierungen finden willst.

Methode 3: Drittanbieter-Farbwähler-Apps

Die integrierten Tools decken die Basics gut ab. Aber dedizierte Mac-Farbwähler-Tools bieten schnellere Workflows und mehr Ausgabeformate. Hier die Top-Picks:

ColorSlurp (kostenlos + Pro)

ColorSlurp sitzt in deiner Menüleiste. Es nimmt Farben in dutzenden Formaten auf – HEX, RGB, HSL, Swift UIColor, CSS und mehr. Die kostenlose Version deckt die meisten Bedürfnisse ab. Pro fügt Paletten und Farbkombinationen hinzu.

Am besten für: Entwickler, die Farben in code-fertigen Formaten brauchen.

ColorSnapper 2

ColorSnapper konzentriert sich auf Genauigkeit. Es hat eine scharfe Lupe und eigene Hotkeys. Es lebt ebenfalls in der Menüleiste für schnellen Zugriff.

Am besten für: Designer, die den ganzen Tag häufig Farben aufnehmen.

System Color Picker (eigenständig)

System Color Picker von Sindre Sorhus macht aus dem integrierten macOS-Farbpanel eine eigene App. Sie sitzt im Dock. Sie ergänzt Schnellkopier-Funktionen, die dem Standard-Panel fehlen.

Am besten für: Alle, die den vertrauten macOS-Farbwähler ohne Umweg über eine andere App wollen.

Methode 4: Browser-Entwicklertools

Farben von einer Website aufnehmen? Dein Browser hat ein integriertes Pipettentool für den Mac, das hervorragend funktioniert.

Chrome DevTools

  1. Rechtsklick auf das Element → Untersuchen
  2. Suche die Eigenschaft color oder background-color im Styles-Panel
  3. Klicke auf das farbige Quadrat, um den Farbwähler zu öffnen
  4. Klicke auf das Pipettensymbol, um eine Farbe vom Bildschirm aufzunehmen

Firefox-Pipette

Firefox hat eine eigene Pipette. Geh zu WerkzeugeBrowser-WerkzeugeFarbwähler. Sie funktioniert auf der ganzen Seite. Ein Klick kopiert den HEX-Wert in die Zwischenablage.

Safari Web-Inspector

Öffne EntwicklerWeb-Inspector einblenden, dann klicke auf ein Farbmuster in der Styles-Seitenleiste, um Safaris integrierten Farbwähler zu aktivieren.

Methode 5: Screenshot-First-Workflow

Manchmal ist es einfacher, erst einen Screenshot zu machen und dann in Ruhe Farben aufzunehmen. Das funktioniert am besten, wenn:

  • Die Farbe in einem Video oder einer Animation ist (nicht hover-bar)
  • Du mehrere Farben aus demselben Design abtasten musst
  • Der Quellinhalt hinter einem Popup oder Tooltip versteckt ist

Mach einen Screenshot auf deinem Mac. Öffne ihn in der Vorschau oder einem beliebigen Bildeditor. Nutze dann den Digital-Farbmesser oder den System-Farbwähler, um Farben aus dem Standbild abzutasten.

Tools wie ScreenSnap Pro machen das noch schneller. Erfasse den Bildschirm, pinne den Screenshot, damit er sichtbar bleibt, und tast Farben ab, während du arbeitest. Die Markup-Tools helfen dir auch, schon aufgenommene Farben zu kennzeichnen.

Zwischen Farbformaten umwandeln

Wenn du eine Farbe ausgewählt hast, brauchst du sie oft in einem anderen Format. Hier ein schneller Leitfaden:

Farbformatvergleich mit RGB-, HEX-, HSL- und CMYK-Werten
Farbformatvergleich mit RGB-, HEX-, HSL- und CMYK-Werten
FormatBeispielAm besten für
HEX#3B82F6CSS, Webentwicklung
RGBrgb(59, 130, 246)CSS, allgemeines Design
HSLhsl(217, 91%, 60%)Sättigung/Helligkeit anpassen
CMYK76, 47, 0, 4Druckdesign

Du kannst zwischen diesen Formaten mit unserem kostenlosen Farbwähler-Tool wechseln. Füge ein beliebiges Format ein und bekomme alle anderen sofort. Musst du einen HEX-Wert schnell zu RGB umwandeln? Unser HEX-zu-RGB-Konverter erledigt das in einem Schritt. Willst du prüfen, ob deine Farben gut lesbar sind? Probier den Farbkontrastprüfer.

ScreenSnap Pro
Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 29 $, für immer deins.

Sieh, was es kann

Farbpaletten aus Bildschirmaufnahmen bauen

Oft brauchst du mehr als eine Farbe. Du willst die ganze Palette eines Designs. Hier ein schneller Weg:

Farbpalette aus einem Screenshot auf dem Mac bauen
Farbpalette aus einem Screenshot auf dem Mac bauen
  1. Erfasse die Referenz – screenshotte die Website, App oder das Bild, das du abtasten willst
  2. Öffne in der Vorschau – nutze die Lupe für Präzision
  3. Tast 5–8 Farben ab – wähle Primär-, Sekundär-, Akzent- und neutrale Töne
  4. Werte notieren – schreib HEX-Codes in eine Textdatei oder ein Designtool
  5. Kombinationen testen – prüf Kontrastverhältnisse für Barrierefreiheit

Du kannst auch unseren Farbpaletten-Extraktor nutzen, um die Hauptfarben aus jedem Bild in einem Schritt zu ziehen.

Profi-Tipp: Pass beim Bauen von Paletten auf Farbräume auf. Dein Mac-Display nutzt standardmäßig Display P3. P3 ist breiter als sRGB, das die meisten Websites nutzen. Farben können sich leicht verschieben, wenn du sie ins Web bringst. Wechsle im Digital-Farbmesser den Farbraum über das Dropdown-Menü. Wähle sRGB für web-sichere Werte.

Tastenkürzel-Spickzettel

Hier jedes Kürzel, das du für schnelles Farbaufnehmen auf dem Mac brauchst:

KürzelAktionTool
⌘ + Space → „Digital-Farbmesser"Digital-Farbmesser öffnenSpotlight
⌘ + Shift + CFarbwert als Text kopierenDigital-Farbmesser
⌘ + Option + CFarbmuster kopierenDigital-Farbmesser
⌘ + LCursorposition fixierenDigital-Farbmesser
⌘ + XHorizontale Position fixierenDigital-Farbmesser
⌘ + YVertikale Position fixierenDigital-Farbmesser
⌘ + Shift + 5Screenshot-Werkzeugleiste öffnenmacOS
Option + ⌘ + IDevTools öffnenChrome/Safari

Häufige Fehler beim Farbaufnehmen (und wie du sie vermeidest)

Auch erfahrene Designer laufen beim Farbaufnehmen vom Bildschirm in Probleme. Hier die häufigsten Stolperfallen:

Falscher Farbraum

Dein Mac nutzt wahrscheinlich Display P3. Das ist ein breiterer Farbraum als sRGB, das die meisten Websites verwenden. Eine Farbe, die auf deinem Bildschirm perfekt aussieht, kann sich im Browser verschieben. Stell den Digital-Farbmesser auf „Anzeige in sRGB", wenn du Farben fürs Web aufnimmst.

Aus einem komprimierten Bild aufnehmen

JPEG-Dateien verlieren beim Speichern Farbdaten. Wenn du aus einem gespeicherten Bild abtastest, kann die Farbe leicht abweichen. Wenn möglich, tast aus der Live-Quelle ab – Website, App oder Figma-Datei. Ein Standbild ist eine Kopie, und Kopien driften.

Dark Mode vergessen

macOS verschiebt Farben je nach Anzeigemodus. Eine im Light Mode aufgenommene Farbe kann im Dark Mode sehr anders aussehen. Wenn du ein Design-System baust, tast Farben in beiden Modi ab. Schreib die Unterschiede auf.

Display-Kalibrierung nicht beachten

Externe Monitore stimmen vielleicht nicht mit dem eingebauten MacBook-Bildschirm überein. Wenn eine Farbe auf einem Display richtig aussieht, auf dem anderen aber falsch, ist das ein Setup-Problem. Geh zu Systemeinstellungen → Displays → Farbprofil, um es zu prüfen. Du kannst jeden Bildschirm auf dasselbe Profil einstellen für gleichmäßigere Ergebnisse.

Tipps für einen schnelleren Farbaufnahme-Workflow

Geschwindigkeit zählt, wenn du tief in einer Designsession steckst. Diese kleinen Gewohnheiten sparen echte Zeit:

  • Pinne den Digital-Farbmesser ans Dock – Rechtsklick auf das Dock-Symbol und „Optionen → Im Dock behalten" wählen, damit es immer einen Klick entfernt ist
  • Lerne die Tastenkürzel⌘ + Shift + C im Digital-Farbmesser ist schneller als jedes Menü
  • Nutze HEX-Modus standardmäßig – die meisten Designer und Entwickler denken in HEX, also einmal einstellen und vergessen
  • Halte einen Notizzettel parat – füge Farbwerte beim Arbeiten in ein Notizen-Dokument ein, nach Projekt geordnet
  • Kombiniere mit Screenshotserfasse das Referenzdesign zuerst und tast dann in Ruhe ab, ohne dir Sorgen über dynamische Inhalte zu machen

Arbeitest du mit Code-Screenshots? Die richtigen Syntaxfarben machen Code viel lesbarer. Tast aus deinen Lieblings-Themes ab und bau ein eigenes Set.

Aufgenommene Farben speichern und organisieren

Farben aufzunehmen ist nur die halbe Arbeit. Du musst sie auch so ablegen, dass du sie später wiederfindest. Hier ein paar Wege, organisiert zu bleiben:

Nutze die integrierten Farbmuster des macOS-Farbwählers

Der System-Farbwähler hat unten eine Reihe kleiner Quadrate. Zieh eine beliebige Farbe in ein leeres Quadrat, um sie zu speichern. Diese Muster bleiben app-übergreifend erhalten. Toll, um häufig genutzte Markenfarben abzulegen.

Erstelle ein Farb-Dokument

Öffne eine neue Datei in Notizen, Apple Pages oder einem reinen Texteditor. Jedes Mal wenn du eine Farbe aufnimmst, füg den HEX-Code und ein kurzes Label ein. Zum Beispiel:

  • Primärblau: #3B82F6
  • Dunkler Text: #1E293B
  • Akzentgrün: #10B981

Das dauert Sekunden und gibt dir eine Referenzliste. Speicher sie im Projektordner, damit sie immer in Reichweite ist.

Export in Designtools

Wenn du in Figma, Sketch oder Adobe XD arbeitest, leg deine aufgenommenen Farben als benannte Stile an. Das hält das ganze Team auf dem gleichen Stand. Du musst die Farbe nur einmal aufnehmen. Danach ist sie ein Stil, den du in jeder Datei wiederverwenden kannst.

Nutze eine Farbverwaltungs-App

Apps wie ColorSlurp und Swatches lassen dich benannte Paletten anlegen. Du kannst Farben nach Projekt gruppieren, taggen und in jedem Format exportieren. Das lohnt sich, wenn du viele Kunden oder Marken jonglierst.

Schneller Tipp: benenne deine Farben

Speicher nicht nur HEX-Codes. Gib jeder Farbe einen klaren Namen wie „CTA-Orange" oder „Footer-Grau". In sechs Monaten heißt #F97316 gar nichts. „CTA-Orange" sagt dir genau, wofür es steht.

Welche Methode solltest du nutzen?

Der beste HEX-Farbwähler für den Mac hängt davon ab, wie du arbeitest:

  • Schneller Einzel-Farbcheck → Digital-Farbmesser (schon installiert)
  • Design in einer nativen App → System-Farbwähler-Pipette
  • Tägliche Design-/Entwicklungsarbeit → ColorSlurp oder ColorSnapper
  • Webspezifische Farben → Browser-DevTools
  • Mehrere Farben aus einer Referenz → Erst screenshotten, dann abtasten

Die meisten Designer mischen das. Digital-Farbmesser für schnelle Checks. Eine Drittanbieter-App für die tägliche Arbeit. Browser-Tools für Webseiten.

Häufig gestellte Fragen

Wie bekomme ich den HEX-Farbcode von einem beliebigen Teil meines Mac-Bildschirms?

Öffne den Digital-Farbmesser (Suche in Spotlight). Geh zu Darstellung → Wert anzeigen → als Hexadezimal. Bewege den Cursor über das gewünschte Pixel. Drücke ⌘ + Shift + C, um den HEX-Wert zu kopieren. Du kannst auch den System-Farbwähler nutzen. Öffne den RGB-Regler-Tab, um das Feld „Hex-Farbe #" zu finden.

Hat der Mac ein integriertes Pipettenwerkzeug?

Ja – sogar zwei. Der Digital-Farbmesser zeigt Live-Farbwerte, während du den Cursor bewegst. Der System-Farbwähler (in jeder App mit einem Farbfeld) hat eine Pipette, die jedes Pixel auf dem Bildschirm aufnimmt. Beide kommen mit macOS. Keine Installation nötig.

Was ist die beste kostenlose Farbwähler-App für den Mac?

ColorSlurp ist die beste kostenlose Wahl. Es nimmt Farben in dutzenden Formaten auf (HEX, RGB, HSL, UIColor, CSS). Es sitzt in der Menüleiste und hat eine Lupe für feine Arbeit. Der integrierte Digital-Farbmesser ist auch toll, wenn du nur RGB oder HEX brauchst.

Kann ich Farben aus einem Video oder einer Animation auf dem Mac aufnehmen?

Nicht direkt – die Farbe bewegt sich zu schnell zum Schnappen. Der beste Weg ist, das Video zu pausieren und einen Screenshot zu machen. Nutze dann den Digital-Farbmesser oder einen beliebigen Picker, um aus dem Standbild abzutasten. Das erlaubt dir auch, Frames Seite an Seite zu vergleichen.

Wie ändere ich den Farbraum im Digital-Farbmesser?

Klick auf das Dropdown am oberen Rand des Digital-Farbmesser-Fensters. Du siehst Optionen wie Anzeige in sRGB, Anzeige in P3 und Anzeige in Generic RGB. Wähl sRGB für Webfarben. Nutze P3 für moderne Apple-Bildschirme.

Autor
Morgan

Morgan

Indie Developer

Indie developer, founder of ScreenSnap Pro. A decade of shipping consumer Mac apps and developer tools. Read full bio

@m_0_r_g_a_n_
ScreenSnap Pro — turn plain screenshots into polished visuals with backgrounds and annotations
Verfügbar fürmacOS&Windows

Lass jeden Screenshot pro aussehen.

ScreenSnap Pro verwandelt einfache Screenshots in polierte Visuals — Hintergründe, Annotationen, GIF-Aufnahme und sofortige Cloud-Links.

ScreenSnap Pro entdecken