Farbe aus einem Bild exakt auslesen: HEX, RGB und HSL

Um die exakte Farbe eines Bildes zu bekommen, liest du den Wert eines einzelnen Pixels aus, statt die Farbe nach Augenmaß zu schätzen. Öffne das Bild in der Farbpipette, fahre mit der Maus über die Stelle, klicke und kopiere den HEX-Code. Der Wert ist der gespeicherte Wert dieses Pixels, er bleibt also gleich, wenn du dieselbe Stelle in derselben Datei erneut auswählst.

Farbpipette für BilderIch brauche den genauen FarbcodeKostenlos loslegen

Was ein Pixel speichert

Jedes Pixel ist ein winziges Quadrat aus einer Farbe. Auf dem Bildschirm oder in einer Bilddatei wird es als drei Zahlen gespeichert, für Rot, Grün und Blau, jeweils von 0 bis 255. Reines Rot ist 255, 0, 0. Diese drei Zahlen enthalten in jedem Format dieselbe Information, deshalb lässt sich eine Farbe auf mehrere Arten schreiben.

HEX, RGB und HSL

• HEX schreibt jede Zahl hexadezimal, zwei Zeichen pro Kanal. #FF0000 ist reines Rot. Webseiten, CSS und die meisten Design-Tools verwenden dieses Format.
• RGB schreibt dieselben Zahlen dezimal, als rgb(255, 0, 0). Es ist dieselbe Farbe wie der HEX-Code.
• HSL beschreibt die Farbe so, wie Menschen über Farben sprechen. Farbton ist der Winkel auf dem Farbkreis, Sättigung gibt an, wie kräftig die Farbe ist, und Helligkeit, wie hell oder dunkel sie ist. hsl(0, 100%, 50%) ist reines Rot.

Verwende HEX, wenn du eine Farbe in Code einfügst, RGB, wenn ein Tool danach fragt, und HSL, wenn du eine hellere oder dunklere Variante desselben Farbtons willst. Wenn du in HSL nur die Helligkeit änderst, bleibt der Farbton erhalten, was sich mit HEX von Hand schwerer machen lässt. Für Kontrastprüfungen zwischen zwei Farben siehe HEX, RGB, HSL, CMYK und Kontrast.

So sieht eine Farbe aus, die in einem Stylesheet verwendet wird:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Warum der Code nicht zum Bildschirm passt

• Das Bild ist komprimiert. JPEG spart Platz, indem es feine Details glättet. Pixel nahe einer Kante können deshalb leicht von der Farbe abweichen, die du in der Mitte einer Fläche siehst.
• Kanten verlaufen ineinander. Wo zwei Farben aufeinandertreffen, sind die Pixel dazwischen Mischungen. Sie sind keine eigene Farbe.
• Farbprofile unterscheiden sich. Die Pipette liest die Werte, die der Browser dekodiert, und die liegen im sRGB-Farbraum. Ein Foto, das mit einem Profil mit großem Farbraum gespeichert wurde, kann in anderen Programmen anders aussehen.
• Skalierung mischt Pixel. Ein Screenshot, der in skalierter Anzeigegröße aufgenommen wurde, kann vermischte Pixel enthalten. Mach den Screenshot nach Möglichkeit in voller Größe.
• Sehr große Bilder werden aus einer Kopie gelesen. Bilder mit einer längeren Seite über 6000 Pixel werden aus einer Kopie mit 6000 Pixel gelesen. Ein einzelnes Pixel kann deshalb etwas von der Originaldatei abweichen.

Aus der Mitte einer einfarbigen Fläche auswählen

Suche einen Bereich in einer einzigen Farbe und wechsle dann in seine Mitte. Die Lupe zeigt die 11 mal 11 Pixel um den Zeiger, so siehst du, ob die Stelle gemischt oder einfarbig ist. Mit der Tastatur bewegst du das Fadenkreuz mit den Pfeiltasten jeweils um ein Pixel, mit Shift um zehn. Mit Enter wählst du die Farbe aus. Prüfe die Anzeige, bevor du sie kopierst.

Die Palette für ein Farbschema nutzen

In einem Foto ist selten nur eine Farbe wichtig. Die Palette zeigt bis zu sechs der Hauptfarben. Dafür werden die Farbwerte jedes Pixels pro Kanal auf 16 Stufen gerundet, die Gruppen gezählt und die häufigsten Gruppen behalten, die sich voneinander unterscheiden. Jedes Farbfeld zeigt den Durchschnitt seiner Gruppe. Tippe auf ein Farbfeld, um seinen HEX-Code zu kopieren. Betrachte die Palette als Ausgangspunkt, denn sie ist ein Durchschnitt und keine gemessene Markenfarbe.

Zwischen Formaten umrechnen

Wenn ein Design-Tool ein anderes Format verlangt, füge den HEX-Code in den Farbkonverter ein. Er rechnet zwischen HEX, RGB und HSL um, ohne die Farbe zu verändern, das Ergebnis passt also zu dem Code, den du ausgewählt hast.

Letzte Auswahlen und Datenschutz

Das Tool behält deine letzten Auswahlen auf der Seite, damit du sie vergleichen kannst. Sie existieren nur im Speicher dieses Tabs und sind weg, sobald du ihn schließt. Das Bild selbst wird in deinem Browser gelesen und nie an einen Server gesendet.

So geht's mit fixmint

1. Öffne die Farbpipette für Bilder und zieh das Foto hinein.
2. Fahre mit der Maus über die Stelle. Oder setze den Fokus auf das Bild und bewege das Fadenkreuz mit den Pfeiltasten jeweils um ein Pixel, mit gedrückter Shift-Taste um zehn Pixel.
3. Klicke oder drücke Enter, um die Farbe auszuwählen. Prüfe die Anzeige, bevor du sie kopierst.
4. Nutze die Schaltfläche Kopieren neben HEX, RGB oder HSL, um den gewünschten Wert zu kopieren.
5. Wenn ein Design-Tool ein anderes Format verlangt, füge den Wert in den Farbkonverter ein.

Kurze Antworten

Warum sieht die Farbe auf meinem Bildschirm anders aus? Dein Bildschirm zeigt eine farbverwaltete, skalierte Version der Datei. Wähle aus der Mitte einer einfarbigen Fläche aus und vergleiche den HEX-Code mit einem bekannten Farbfeld.

Welches Format sollte ich kopieren? HEX für Webseiten und die meisten Design-Tools. Verwende RGB oder HSL, wenn ein Tool danach fragt.

Lädt das Tool mein Bild hoch? Nein. Das Bild wird in deinem Browser dekodiert und gelesen.