Farbcode herausfinden und HEX, RGB oder CMYK richtig verwenden

Den Farbcode einer Bildschirmfarbe ermittelst du mit einer Pipette, die den Farbwert des Pixels unter dem Mauszeiger ausliest. Unter Windows ist das der Color Picker aus Microsoft PowerToys mit Win+Umschalt+C, am Mac die App DigitalColor Meter, und auf einer Website zeigt dir ein Rechtsklick auf ein Element und „Untersuchen“ die verwendeten Farben im CSS.

Meist bekommst du so einen HEX-Code wie #1E88E5. Den setzt du direkt ein oder rechnest ihn in RGB, HSL oder CMYK um, je nachdem, was das Zielprogramm erwartet. Dabei passieren leicht Fehler. Schon ein fehlendes Rautezeichen, zwei überzählige Stellen oder ein CMYK-Wert ohne Farbprofil genügen, und die Farbe stimmt woanders nicht mehr.

Farbcode unter Windows mit dem PowerToys Color Picker herausfinden

Unter Windows ermittelst du Farbwerte besonders einfach mit dem Color Picker aus Microsoft PowerToys. Nach der Installation aktivierst du ihn in den PowerToys-Einstellungen und rufst ihn mit Win+Umschalt+C auf. Ein Linksklick kopiert die Farbe unter dem Mauszeiger, standardmäßig als HEX-Code. Die folgenden Schritte richten sich nach der Hilfeseite von Microsoft zum PowerToys Color Picker, Stand 29. Oktober 2026.

1. PowerToys installieren. Die Werkzeugsammlung gehört nicht fest zu Windows, du installierst sie separat. Wie das geht, beschreibt Microsoft in der Installationsanleitung für PowerToys.
2. Color Picker aktivieren. Öffne die PowerToys-Einstellungen und schalte den Color Picker ein.
3. Mit Win+Umschalt+C starten. Über die Einstellung „Aktivierungsverhalten“ legst du fest, ob sich nach dem Tastenkürzel zuerst der Editor öffnet oder ob du sofort eine Farbe auswählst.
4. Mauszeiger auf die Farbe setzen. Drehst du das Mausrad nach oben, vergrößert der Color Picker den Bereich unter dem Zeiger und friert das Bild ein. Laut Microsoft hilft das, wenn du die normale Farbe eines Elements aufnehmen willst und nicht die Farbe, die beim Überfahren mit der Maus erscheint.
5. Klicken. Was danach passiert, hängt von der Maustaste ab.

• Ein Linksklick kopiert die Farbe in die Zwischenablage, speichert sie im Verlauf und öffnet den Editor.
• Ein Klick mit dem Mausrad kopiert und speichert die Farbe ebenfalls, schließt den Color Picker aber gleich wieder.
• Ein Rechtsklick schließt den Color Picker, ohne etwas zu kopieren.

In welchem Format der Code in der Zwischenablage landet, bestimmt die Einstellung „Standardfarbformat“. Ab Werk ist das HEX. Brauchst du regelmäßig ein anderes Format, stellst du es dort um und sparst dir das Umrechnen.

Der Editor merkt sich bis zu 20 Farben. Dort kannst du die Werte für HSV, RGB und HEX nachjustieren und den Verlauf exportieren. Das ist praktisch, wenn du nacheinander alle Farben eines Logos oder einer Website sammelst.

Einige Einschränkungen nennt Microsoft selbst. Über dem Startmenü und dem Benachrichtigungscenter ist der Color Picker nicht zu sehen, eine Farbe kannst du dort aber trotzdem auswählen. Hat gerade ein Programm den Fokus, das mit Administratorrechten läuft, funktioniert das Tastenkürzel nur, wenn auch PowerToys mit Administratorrechten gestartet wurde. Außerdem unterstützt der Color Picker die Farbformate WCG und HDR nicht.

Farbcode am Mac mit DigitalColor Meter herausfinden

Am Mac zeigt dir die App DigitalColor Meter die Farbwerte der Pixel, über denen der Mauszeiger gerade steht. Die Schritte folgen dem Benutzerhandbuch für DigitalColor Meter von Apple, Stand 29. Oktober 2026.

1. App öffnen. Starte DigitalColor Meter auf deinem Mac.
2. Mauszeiger über die Farbe bewegen. Die Werte erscheinen rechts im Fenster und ändern sich, sobald du den Zeiger bewegst.
3. „Auswahlgröße“ einstellen. Mit diesem Regler legst du fest, wie groß der Messbereich ist. Liegen mehrere Pixel darin, zeigt die App deren Mittelwert an. Auf einer einfarbigen Fläche spielt das keine Rolle. An Kanten, in Verläufen oder bei kleiner Schrift entsteht dagegen ein Mischwert, der im Original gar nicht vorkommt. Stell den Regler dann möglichst klein.
4. Messbereich festhalten. Mit Befehl-X hältst du ihn horizontal fest, mit Befehl-Y vertikal und mit Befehl-L in beide Richtungen. Laut Apple erleichtert das Festhalten das Kopieren des Werts.
5. Wert kopieren. Im Menü „Farbe“ wählst du „Farbe als Text kopieren“ oder drückst Umschalt-Befehl-C. Mit „Farbe als Bild kopieren“ (Wahl-Befehl-C) kopierst du die Farbe stattdessen als Bild.

Im Menü „Darstellung“ änderst du unter „Werte anzeigen“ das Format der angezeigten Werte für RGB-basierte Farbräume. Die einzelnen Formate zählt Apples Handbuch nicht auf. Findest du dort nicht die Schreibweise, die du brauchst, kopierst du den Wert als Text und rechnest ihn mit einem Farbkonverter um.

Achte außerdem auf das Aufklappmenü „Farbraum“. Wählst du dort einen anderen Farbraum, ändern sich die angezeigten Werte, obwohl du denselben Pixel misst. Passen zwei Messungen nicht zusammen, prüf zuerst, ob beide im selben Farbraum entstanden sind. Für HDR-Inhalte gibt es zusätzlich die Option „Native Werte für EDR anzeigen“.

Farbcode einer Website im Browser herausfinden

Im Browser zeigt dir ein Rechtsklick auf ein Element und „Untersuchen“ die verwendeten Farben im CSS. Achte dort auf Eigenschaften wie color, background-color und border-color. Die einzelnen Menüs und Schaltflächen der Entwicklerwerkzeuge beschreiben wir hier nicht, weil sie sich je nach Browser unterscheiden können. Bedenke außerdem, dass der CSS-Wert nicht immer dem sichtbaren Pixel entspricht, etwa bei Transparenz, Farbverläufen oder Hintergrundbildern.

Findest du die Farbe im CSS nicht auf Anhieb, etwa weil sie aus einem Bild stammt, nimm einfach die Pipette deines Systems. PowerToys und DigitalColor Meter funktionieren auch über einer Website.

Achte bei Schaltflächen und Links darauf, ob du die normale Farbe erwischst oder die Farbe, die beim Überfahren mit der Maus erscheint. Viele Seiten färben ein Element um, sobald der Mauszeiger darauf steht. Genau dann hilft der PowerToys-Tipp mit dem Mausrad aus dem Windows-Abschnitt.

Farbcodes lesen und HEX, RGB und HSL unterscheiden

HEX, RGB und HSL beschreiben in CSS dieselbe Farbe im sRGB-Farbraum, nur in unterschiedlicher Schreibweise. Beim Umrechnen und Runden können kleine Abweichungen entstehen. Welche du nimmst, hängt davon ab, was das Programm erwartet, in das du die Farbe einfügst.

HEX mit sechs Stellen

Ein HEX-Code hat die Form #RRGGBB. Je zwei Stellen stehen für Rot, Grün und Blau, geschrieben im Sechzehnersystem mit den Ziffern 0 bis 9 und den Buchstaben A bis F. 00 ist der kleinste Wert eines Kanals, FF der größte. Das entspricht den Zahlen 0 bis 255. Bei #1E88E5 ist 1E der Rotanteil (30), 88 der Grünanteil (136) und E5 der Blauanteil (229). Blau überwiegt also deutlich, und die Farbe ist ein kräftiges Blau.

Kurzer HEX mit drei Stellen

Manche Codes haben nur drei Stellen. Laut der MDN-Referenz zu CSS-Farbwerten (Stand 29. Oktober 2026) ist #f09 dieselbe Farbe wie #ff0099. Jede Stelle wird einfach verdoppelt. Kopierst du einen solchen Kurzcode in ein Programm, das sechs Stellen erwartet, schreibst du ihn vorher aus.

HEX mit acht Stellen

Einen HEX-Code mit acht Stellen erzeugt der Farbwähler von Digily Link automatisch, sobald die Deckkraft unter 100 % liegt. Er hängt dann zwei Stellen für die Deckkraft an den sechsstelligen Code an. Aus #1E88E5 wird bei 50 % Deckkraft #1E88E580. Die 80 kommt so zustande. 50 % von 255 sind 127,5, gerundet 128, und das ist hexadezimal 80. Manche Programme erwarten nur sechs Stellen und lehnen den längeren Code ab.

rgb() und hsl()

Bei rgb() stehen die drei Kanäle meist als Zahlen von 0 bis 255 in Klammern, CSS erlaubt aber auch Prozentwerte. MDN zeigt die Schreibweise mit Leerzeichen, etwa rgb(255 0 153). In der Tabelle unten stehen die Werte mit Kommas getrennt. Die Deckkraft steht in CSS hinter einem Schrägstrich, als Zahl von 0 bis 1 oder als Prozentwert, zum Beispiel rgb(255 0 153 / 80%).

hsl() beschreibt die Farbe über Farbton, Sättigung und Helligkeit. Der Farbton ist eine Gradzahl auf dem Farbkreis, Sättigung und Helligkeit sind Prozentwerte. Das Beispiel von MDN lautet hsl(150 30% 60%), mit Deckkraft hsl(150 30% 60% / 80%). HSL ist praktisch, wenn du eine Farbe nur heller oder dunkler machen willst, denn dafür änderst du lediglich den letzten Wert.

Ein Beispielblau in fünf Formaten

Die Tabelle zeigt ein frei gewähltes Beispielblau. Die Werte sind mit den üblichen Umrechnungsformeln berechnet und auf ganze Zahlen gerundet. Die Variante mit Deckkraft sieht vor einem Hintergrund anders aus, und der CMYK-Wert ist nur eine rechnerische Näherung.

Farbe im Farbwähler von Digily Link auswählen und in fünf Formaten kopieren

Der Farbwähler auf digily.link läuft vollständig im Browser. Du wählst die Farbe im Farbfeld oder gibst einen Code ein und kopierst sie als HEXA, RGBA, HSLA, HSVA oder CMYK. Digily Link ist unser Produkt, und den Farbwähler kannst du ohne Anmeldung nutzen.

1. Farbe festlegen. Im Bereich „Farbe“ wählst du den Ton im Farbfeld und stellst ihn mit den Reglern für Farbton und Deckkraft ein. Hast du schon einen Code, etwa aus PowerToys, fügst du ihn stattdessen in das Eingabefeld ein.
2. Werte ablesen. Sobald sich die Farbe ändert, aktualisieren sich die Zeilen HEXA, CMYK, HSLA, HSVA und RGBA. Eine Schaltfläche zum Absenden gibt es nicht.
3. Format kopieren. Neben jeder Zeile steht die Schaltfläche „In die Zwischenablage kopieren“. Damit landet genau dieses Format in der Zwischenablage.

Ein paar Details aus dem Code des Tools helfen, die Werte einzuordnen. Der Farbwähler baut auf der Bibliothek Pickr in Version 1.9.0 auf, rechnet direkt im Browser und schickt keine Farbe an einen Server. Alle Werte werden auf ganze Zahlen gerundet. Die HEXA-Zeile zeigt bei 100 % Deckkraft einen normalen sechsstelligen Code und erst darunter die achtstellige Variante. Die CMYK-Zeile entsteht aus einer einfachen Formel ohne Farbprofil, mehr dazu im nächsten Abschnitt. Der Farbwähler speichert keine Farben. Notier dir also die Codes, die du später noch brauchst.

Eine Pipette für den Bildschirm hat der Farbwähler nicht. Den Code einer Farbe auf dem Bildschirm holst du dir mit PowerToys oder DigitalColor Meter und fügst ihn dann ein. Willst du nur einen vorhandenen Farbcode umrechnen, kommst du mit dem Farbkonverter schneller ans Ziel. Er nimmt die Formate HEX, HEX alpha, RGB, RGBA, HSV, HSL und HSLA an. CMYK kannst du dort nicht eingeben.

CMYK-Werte aus Farbwählern sind keine Druckvorlage

Der CMYK-Wert, den der Farbwähler und viele ähnliche Tools anzeigen, ist eine einfache Umrechnung ohne Farbprofil. Für den Druck fragst du deine Druckerei nach den passenden Werten.

Wie einfach die Rechnung ist, zeigt das Beispiel #1E88E5. Zuerst werden die drei RGB-Werte durch 255 geteilt. Das ergibt 0,118 für Rot, 0,533 für Grün und 0,898 für Blau. Für Schwarz (K) zieht man den größten dieser Anteile von 1 ab, also 0,898, und erhält 0,102. Cyan, Magenta und Gelb ergeben sich anschließend aus den übrigen Anteilen und K. Am Ende stehen 87 % Cyan, 41 % Magenta, 0 % Gelb und 10 % Schwarz.

Papier, Druckverfahren und Farbprofil der Druckerei kommen in dieser Rechnung überhaupt nicht vor. MDN weist allgemein darauf hin, dass Farben von Gerät zu Gerät unterschiedlich aussehen können, und CSS kennt mit device-cmyk() sogar eine eigene Funktion für gerätebezogene CMYK-Werte. Nimm den Formelwert deshalb höchstens als groben Anhaltspunkt. Gib der Druckerei lieber deinen HEX- oder RGB-Code mit dem Farbraum, etwa sRGB, und frag nach, welche Werte und welches Farbprofil sie für ihren Druck empfiehlt.

Häufige Fehler beim Farbcode und wie du sie behebst

Stimmt eine Farbe nach dem Einfügen nicht oder nimmt ein Programm den Code gar nicht an, steckt meist eine der folgenden Ursachen dahinter.

Prüf das Ergebnis am Ende immer im Zielprogramm selbst. Leg die neue Farbe neben das Original, etwa die Schaltfläche auf der Website oder das Logo in der Vorlage, und vergleich beide auf demselben Bildschirm. Weicht die Farbe sichtbar ab, miss noch einmal mit kleinerem Messbereich.

Hast du den Code gefunden und brauchst ihn in einer anderen Schreibweise, kannst du deine Farbe im Farbwähler auswählen und Codes kopieren.

Häufige Fragen

Sind HEX und RGB dieselbe Farbe?

Ja. #1E88E5 und rgb(30, 136, 229) beschreiben exakt dieselbe Farbe, der HEX-Code schreibt die drei Werte nur im Sechzehnersystem.

Welches Format brauche ich für Canva oder Word?

Canva und die meisten Webtools arbeiten mit dem sechsstelligen HEX-Code. Seit Office 2021 hat der Farbdialog in Office laut Microsoft unter den RGB-Feldern ein HEX-Feld, ältere Versionen erwarten RGB-Werte. Schau im Farbdialog des jeweiligen Programms nach, welche Eingabefelder es anbietet, und kopier dann das passende Format.

Was bedeuten die letzten zwei Stellen im achtstelligen HEX-Code?

Im Farbwähler von Digily Link stehen sie für die Deckkraft und erscheinen nur, wenn diese unter 100 % liegt. #1E88E580 ist das Beispielblau mit 50 % Deckkraft. Nimmt ein Programm keine acht Stellen an, nimm den sechsstelligen Code und stell die Transparenz im Programm selbst ein, falls es dafür eine Einstellung gibt.

Wann brauche ich CMYK?

Im Druck, etwa bei Flyern oder Visitenkarten, wird meist mit CMYK gearbeitet. Ob du selbst CMYK-Daten liefern musst oder die Druckerei RGB-Daten umwandelt, erfährst du von deiner Druckerei, ebenso die verbindlichen Werte. Der CMYK-Wert aus einem Farbwähler taugt nur als grobe Orientierung.