Was ist Bild-Farbwähler?

Hole dir per Klick auf das Bild präzise Farbwerte. Die Palette ist sofort mit den dominanten Farben des Bildes gefüllt, eine Lupe hilft beim genauen Treffen des richtigen Pixels, und jede Farbe kommt mit HEX, RGB, HSL, HSV, CMYK sowie dem nächstliegenden Farbnamen. Speichere Farben in der Palette und exportiere sie.

Wenn ein Bild geladen wird, nimmt das Tool seine sechs häufigsten Farben und legt sie direkt in die Palette, sodass du schon vor dem ersten Klick ein Startset hast. Eine Vergrößerungslupe zeigt die einzelnen Pixel unter dem Cursor, was es leicht macht, genau den gewünschten Ton zu treffen statt eines kantengeglätteten Nachbarn. Jede angeklickte Farbe nennt ihre Werte für HEX, RGB, HSL, HSV und CMYK sowie die nächstgelegene benannte CSS-Farbe und kommt in eine Palette, die du als Hex-Liste kopieren oder als JSON oder CSS-Variablen exportieren kannst. Es gibt außerdem eine Sehvorschau, die das Bild durch gängige Farbenblindheits-Filter laufen lässt, damit du die Barrierefreiheit beim Arbeiten prüfst.

Anleitung

1. Schritt 1 — Lade ein beliebiges Bild hoch (PNG, JPEG, WebP, GIF). Das Bild wird auf einer interaktiven Leinwand mit einer Zoomlupe geladen.
2. Schritt 2 — Klicke irgendwo auf das Bild, um eine Farbe auszuwählen. Die Lupe vergrößert den Bereich unter dem Cursor für eine präzise Auswahl.
3. Schritt 3 — Kopiere jeden Wert in HEX, RGB, HSL, HSV oder CMYK, oder beachte den nächstliegenden Farbnamen unter dem Swatch. Die Palette behält jeden Klick — dazu die sechs automatisch erkannten Startfarben — und exportiert auf Knopfdruck.

Wann verwenden

• Eine Markenfarbe aus einem Screenshot oder Mockup-Render nachstellen.
• Aus einem Referenzfoto eine Farbpalette für ein Designprojekt aufbauen.
• Den exakten Farbton im Logo oder Hero-Banner eines Konkurrenten ermitteln.

Ergebnis

Ein Designer lädt ein Naturfoto hoch, um das exakte Blaugrün eines Gebirgssees zu extrahieren. Er klickt auf das Wasser, erhält #2E8B8C und fügt es zusammen mit drei weiteren Farben aus demselben Foto zu seiner Palette hinzu.

Häufige Fragen

Warum weicht die geprüfte Farbe leicht von Photoshop ab?

Die meisten Browser konvertieren Bilder beim Laden nach sRGB. War die Quelle als Adobe RGB oder Display P3 markiert, erhalten Sie hier das sRGB-Äquivalent. Für eine identische Anzeige exportieren Sie das Original vor dem Hochladen in sRGB.

Zeigt die Lupe den exakten Pixel oder einen Mittelwert?

Die Lupe nimmt nur einen Pixel — den direkt unter dem Fadenkreuz — und stellt die Nachbarn nur als Kontext dar. Ein Klick innerhalb der Lupe fixiert genau diesen Wert, sodass weiche Antialiasing-Kanten nicht in die Irre führen.

Kann ich Farben aus PNGs mit transparenten Bereichen messen?

Ja. Transparente Pixel liefern ihren ursprünglichen RGB-Wert, der Alpha-Wert wird separat angezeigt. Bei einem komplett durchsichtigen Pixel erscheint die Canvas-Hintergrundfarbe (standardmäßig weiß), klicken Sie also auf undurchsichtige Stellen für verlässliche Werte.

Was ist der Unterschied zwischen HEX, RGB, HSL, HSV und CMYK — welche sollte ich nehmen?

HEX (#2E8B8C) ist die kürzeste Form für CSS und Design-Tools. RGB gibt die drei Kanäle 0–255 aus, praktisch wenn der Code Rohwerte braucht. HSL beschreibt Farbton, Sättigung und Helligkeit — angenehm, wenn du einen Ton aufhellen oder kräftiger machen willst. HSV ist ähnlich, nutzt aber value (wahrgenommene Helligkeit) statt Lightness, was die Picker der meisten Design-Programme bevorzugen. CMYK liefert die vier Druckprozente — das Format, das eine Druckerei oder Print-Designer braucht.

Kann ich mehrere Farben hintereinander aufnehmen?

Jedes hochgeladene Bild füllt die Palette vorab mit den sechs dominanten Farben, und jeder weitere Klick fügt eine zusätzliche Probe hinzu. Das Palettenfeld zeigt alles Erfasste und lässt dich jede Probe kopieren, alle Hex-Codes auf einmal kopieren, einzelne Einträge entfernen oder den ganzen Satz als JSON-Datei oder als einfügefertige CSS-Custom-Properties exportieren.

Ähnliche Tools