Die kurze Antwort
Jede Farbe auf einem Bildschirm ist eine Mischung aus rotem, grünem und blauem Licht, und ein Farbcode ist einfach eine Schreibweise für diese Mischung. Um ihn aus einem Bild abzulesen, brauchst du eine Pipette: ein Werkzeug, das sich ein einzelnes Pixel ansieht und seine Werte anzeigt. Füg dein Bild unten im Werkzeug ein, fahr mit der Maus darüber, bis die Lupe das gewünschte Pixel im mittleren Quadrat zeigt, und klick. Die Farbe wird mit HEX-, RGB- und HSL-Code gespeichert, und ein Klick auf einen Code kopiert ihn.
Wenn du nicht ein einzelnes Pixel, sondern die Farbwirkung eines ganzen Fotos willst, nutz den Bereich Farbpalette im selben Werkzeug: Er fasst ähnliche Pixel zu Gruppen zusammen und listet die 5, 8 oder 12 häufigsten Farben mit ihren Codes auf.
Hier ausprobieren: Farbe aus Bild bestimmen
Vollständige Tool-Seite öffnenHEX, RGB und HSL: was die Codes bedeuten
RGB gibt den Anteil von Rot, Grün und Blau als drei Zahlen von 0 bis 255 an. HEX schreibt dieselben drei Zahlen im Sechzehnersystem, mit je zwei Zeichen, hinter einer Raute: FF ist 255, 80 ist 128, 00 ist 0. #FF8000 und rgb(255, 128, 0) sind also genau dasselbe Orange. HSL beschreibt die Farbe so, wie Menschen darüber sprechen: den Farbton als Winkel auf dem Farbkreis (0 bis 360), Sättigung und Helligkeit in Prozent. HSL ist praktisch, wenn du eine hellere oder dunklere Variante einer Farbe brauchst, denn dafür änderst du nur die letzte Zahl.
Designprogramme wie Figma, Canva und Photoshop nehmen HEX direkt an, CSS versteht alle drei Schreibweisen, und Office-Programme wie Word und PowerPoint fragen im Dialog für benutzerdefinierte Farben meist nach RGB oder HEX.
| Farbe | HEX | RGB | HSL |
|---|---|---|---|
| Reines Rot | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Mittelgrau | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Kräftiges Blau | #1A73E8 | rgb(26, 115, 232) | hsl(214, 82%, 51%) |
| Weiß | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Schwarz | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
Andere Wege, eine Farbe auf deinem Gerät aufzunehmen
Manchmal steckt die Farbe nicht in einer Datei, sondern irgendwo auf dem Bildschirm: auf einer Website, in einer App, in einem Standbild aus einem Video. Diese Möglichkeiten decken die meisten Fälle ab, ohne dass du etwas Schweres installieren musst.
- In diesem Werkzeug macht Vom Bildschirm aufnehmen (Chrome und Edge am Computer) den Mauszeiger zu einer Pipette, die überall auf dem Bildschirm funktioniert, nicht nur im Bild.
- Windows: Die Microsoft PowerToys enthalten einen Farbwähler. Nach der Installation öffnet Win+Umschalt+C ihn und kopiert den Code des Pixels unter dem Mauszeiger.
- Mac: Das mitgelieferte Programm Digital Color Meter (unter Programme, Dienstprogramme) zeigt die Werte unter dem Mauszeiger. Stell die Anzeige auf sRGB-Werte, wenn du Codes für das Web brauchst.
- Entwicklertools im Browser: In Chrome und Edge öffnet das Farbquadrat neben einer CSS-Farbe einen Farbwähler mit Pipette für die aktuelle Seite.
- Smartphones: Mach einen Screenshot, füg ihn auf dieser Seite ins Werkzeug ein und tippe auf die Farbe. Auf einem Touchscreen gibt es keine Lupe, also zoom die Seite vorher heran, wenn der Bereich klein ist.
Warum der Code etwas daneben wirken kann
Zwei benachbarte Pixel in einem Foto sind fast nie identisch. JPG-Komprimierung, Bildrauschen der Kamera, Licht und Schatten verändern die Werte, sodass ein Klick auf ein rotes Auto auf einem Pixel #B3121B und auf dem nächsten #A90F18 ergeben kann. Das ist normal. Nimm bei einem Foto ein paar Punkte in einem gleichmäßig beleuchteten Bereich auf und wähle den, der richtig aussieht, oder lass die Farbpalette den Bereich für dich mitteln.
Kanten sind die häufigste Falle. Text und Logos werden geglättet (Anti-Aliasing), deshalb sind die Pixel am Rand eines Buchstabens eine Mischung aus Buchstabe und Hintergrund. Nimm die Farbe immer aus der Mitte einer Fläche auf, genau dafür ist die Lupe da. Meide außerdem Screenshots, die skaliert, über eine Chat-App verschickt oder als JPG mit niedriger Qualität gespeichert wurden: Jeder dieser Schritte mischt oder verschiebt die Farben ein wenig.
Bildschirme und Farbprofile kommen noch hinzu. Viele Smartphones und Macs zeigen einen größeren Farbraum als das übliche sRGB, und dieselbe Datei kann auf zwei Bildschirmen leicht unterschiedlich aussehen. Das Werkzeug liest die Werte, die der Browser zeichnet, und die sind sRGB, also der Farbraum von Websites und den meisten Designprogrammen. Transparente Pixel werden so gelesen, als lägen sie auf weißem Hintergrund.
So erstellst du eine Farbpalette aus einem Foto
Ein Foto, das dir gefällt, enthält schon Farben, die zusammenpassen. Das macht es zu einem guten Ausgangspunkt für eine Website, eine Präsentation oder Grafiken für Social Media. Wähle im Bereich Farbpalette 5, 8 oder 12 Farben. Das Werkzeug teilt alle Pixel in Gruppen ähnlicher Farben auf (das Median-Cut-Verfahren) und zeigt den Durchschnitt jeder Gruppe, die größte Gruppe zuerst. Alle kopieren schreibt jeden HEX-Code in eine eigene Zeile, fertig für eine CSS-Datei oder ein Designprogramm.
Fünf Farben ergeben ein einfaches Schema: meist ein oder zwei dominante Hintergrundtöne, eine Hauptfarbe und eine Akzentfarbe. Zwölf Farben behalten feinere Abstufungen, nützlich für Illustrationen oder wenn du sehen willst, woraus das Bild wirklich besteht. Wenn ein großer Himmel oder eine Wand die Palette dominiert, schneide das Foto vorher auf den wichtigen Teil zu und füg es erneut ein.
- Nimm die großen, ruhigen Farben für Hintergründe und die kleineren, kräftigen für Buttons und Hervorhebungen.
- Prüf den Textkontrast: Für normalen Fließtext verlangt die WCAG-Richtlinie mindestens 4,5:1 zwischen Text und Hintergrund, für großen Text 3:1.
- Halte die Codes an einer Stelle fest (in einem Styleguide oder einer Liste in deiner Designdatei), damit alle dieselben Werte verwenden.
Tipps, um Markenfarben genau zu treffen
Wenn du die exakte Farbe einer Firma oder eines Produkts brauchst, sind die Markenrichtlinien (Corporate Design Manual) oder eine SVG-Version des Logos die zuverlässigste Quelle, denn dort stehen die Originalwerte. Ein Logo aus einem Website-Screenshot oder einem Foto eines gedruckten Schildes bringt dich nur in die Nähe.
Wenn du doch aus einem Bild aufnehmen musst, nimm die größte einfarbige Fläche des Logos, nicht Text oder dünne Linien, und nimm lieber eine PNG- oder SVG-Datei als ein JPG. Nimm drei oder vier Punkte auf; wenn sie sich in jedem Kanal nur um ein oder zwei Einheiten unterscheiden, hast du die richtige Farbe. Denk daran, dass Druckfarben (CMYK, Pantone, HKS) und Bildschirmfarben unterschiedlich definiert sind: Ein HEX-Code aus dem Foto eines Drucks ist eine Annäherung daran, wie er auf dem Bildschirm aussieht, nicht der offizielle Druckwert.