Farben aus einem Bild wählen (und eine Palette erhalten)

Du hast das perfekte Blau in einem Foto, Screenshot oder Logo gefunden und willst genau diese Farbe in deinem eigenen Design. Dafür brauchst du kein Photoshop — ein Bild-Farbwähler im Browser liest das Pixel direkt und gibt dir einen Code, den du überall einfügen kannst.

Ein Test, dessen richtige Antwort vorab bekannt war. Die flache Illustration in unserem Umwandlungs-Labor wurde von einem Skript gezeichnet, ihre sechs Farben stehen in unserem Quellcode: #fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a. Durch unseren Farbpicker wurden alle 6/6 exakt extrahiert. Zwei zusätzliche Werte erschienen — #fcedda #f6ba88 — und das sind keine Fehler: Antialiasing-Mischfarben an den Kreisrändern, echte Pixel in der Datei. Lade dasselbe Bild herunter und prüfe beide Behauptungen selbst.

HEX und RGB sind dieselbe Farbe, zweifach geschrieben

Jedes Pixel auf dem Bildschirm ist eine Mischung aus Rot, Grün und Blau, jeweils von 0 bis 255. Ein Farbwähler gibt dir diesen Wert in zwei gängigen Schreibweisen:

• RGB — rgb(59, 130, 246) — die drei Kanäle als schlichte Zahlen.
• HEX — #3B82F6 — dieselben drei Zahlen im Hexadezimalsystem, je zwei Stellen (3B = 59, 82 = 130, F6 = 246).

Sie sind austauschbar; HEX ist für CSS und Design-Tools nur kompakter. Brauchst du HSL oder ein anderes Format, jag den Code durch den Farbkonverter.

Ein Pixel wählen vs. eine Palette greifen

Es gibt zwei Aufgaben, und sie brauchen unterschiedliche Ansätze:

• Ein exaktes Pixel — klicke die Stelle, die dich interessiert. Ideal für „Welches Blau hat dieser Button?”
• Das Gesamt-Farbschema — nutze die extrahierte dominante Palette. Sie tastet das ganze Bild ab, gruppiert nahezu identische Farben und zeigt die häufigsten. So ziehst du die Kernfarben einer Marke in einem Zug aus einem Screenshot.

Diese Palettenfunktion lässt sich gegen eine bekannte Antwort prüfen — das ist selten. Die flache Illustration in unserem Umwandlungs-Labor wurde von einem Skript gezeichnet, ihre sechs Farben stehen in unserem Quellcode: #fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a. Unser Farbpicker extrahierte alle 6/6 exakt.

Ein Paletten-Extraktor ist leicht zu bauen und schwer zu verifizieren, deshalb haben wir unserem einen Test mit bekannter Antwort gegeben. Die Illustration in unserem Testkorpus wird von einem Skript gezeichnet, ihre sechs Farben stehen also vorab fest: #fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a. Dieses PNG in unseren Bild-Farbwähler gegeben ergab #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 — eine Trefferquote von 6/6 auf den bekannten Farben, plus zwei zusätzliche Farbfelder (#fcedda, #f6ba88), die kantengeglättete Randpixel sind und keine Fehler. Das ist ein falsifizierbarer Test, keine Behauptung: Wäre der Extraktor schlechter geworden, wäre diese Seite falsch, und du könntest es mit derselben Datei beweisen.

Warum ein einzelnes Pixel überraschen kann

Ist das Bild ein komprimiertes JPG, steckt der scheinbar einfarbige Bereich voller winziger Variationen, die das Format eingebracht hat. Tastest du zwei benachbarte Pixel ab, weichen die Zahlen um ein paar Punkte ab. Für ein stabiles „das ist die Farbe” ist die Palette (die eine Region mittelt) verlässlicher als ein einzelner Klick. PNGs und Vektor-Exporte haben dieses Problem nicht, weil sie nicht verlustbehaftet sind.

Und die Überraschung ist lehrreich, kein Fehler. Neben diesen sechs lieferte der Picker auch #fcedda #f6ba88 — Antialiasing-Mischfarben an den Kreisrändern. Das sind echte Pixel in der Datei: Zoome an eine gekrümmte Kante, und die Farbe dort ist keine der beiden, die sie trennt. Ein Einzelpixel-Griff kann genau darauf landen — deshalb ist eine Palette sicherer als ein einzelner Klick.

Diese zwei zusätzlichen Farbfelder sind auch die Antwort auf „warum kam mein einzelnes Pixel in einer Farbe zurück, die es im Design nicht gibt”. Kantenglättung mischt die Formfarbe über einen ein bis zwei Pixel breiten Rand mit dem Hintergrund, #f6ba88 existiert in der Datei also wirklich, obwohl es niemand gewählt hat. Nimm aus der Mitte einer gleichmäßigen Fläche — oder nimm die Palette und lass die Häufigkeit sortieren.

Alles bleibt auf deinem Gerät

Ein browserbasierter Farbwähler liest das Bild lokal mit einem <canvas>-Element — nichts wird hochgeladen. Er funktioniert also offline, und deine Bilder verlassen nie deinen Rechner.

Verwandte Tools

• Wandle den Code mit dem Farbkonverter in HSL um oder prüfe den Kontrast.
• Mach aus deinen gewählten Farben im CSS-Generator einen Verlauf oder Schatten.

Von einer Farbe zur ganzen Palette

Eine einzelne gewählte Farbe ist ein Ausgangspunkt, kein Schema. Für ein brauchbares Set greifst du zuerst die dominante Farbe und erzeugst hellere und dunklere Geschwister, indem du in HSL nur die Helligkeit (L) änderst — so bleibt die Familie harmonisch. Eine praktische Aufteilung: eine Basis, zwei hellere Töne, zwei dunklere Töne und ein Akzent von anderswo im Bild.

Häufigkeit macht aus einem Pixel eine Palette. Unser Farbwähler gab die sechs bekannten Farben in einer anderen Reihenfolge zurück als die Datei — #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 — weil er danach sortiert, wie viel Bildfläche jede Farbe bedeckt, nicht danach, wo sie vorkommt. Diese Sortierung ist der nützliche Teil: Die ersten zwei Einträge sind fast immer Hintergrund und dominante Form — genau das Paar, das man für ein Seitenthema braucht.

Häufige Fehler

• Eine kantengeglättete Kante abtasten. Die Pixel, wo zwei Farben aufeinandertreffen, sind gemischt und halbtransparent und liefern einen matschigen Zwischenwert. Klicke stattdessen gut innerhalb einer einfarbigen Fläche.
• Der Screenshot-Farbe blind vertrauen. OS-Screenshots können ein Display-Farbprofil mitführen, und Messenger-Apps komprimieren sie oft neu — der Wert kann leicht vom Original abweichen.
• Ein Pixel aus einem Verlauf wählen. Du bekommst genau diese Stelle und nichts über den Übergang. Taste bei Verläufen beide Enden ab.

FAQ

Ändert das Zoomen des Bildes den Wert? Nein. Ein canvas-basierter Farbwähler liest die Originalpixel unabhängig vom Bildschirmzoom — der Code ist bei hinein- oder herausgezoomtem Bild derselbe.

Wie viele Farben sollte eine Palette haben? Vier bis sechs brauchbare Farben reichen für die meisten Designs — ein, zwei Dominanten, ein paar Stütztöne und ein Akzent.

Kann ich eine Farbe von überall auf dem Bildschirm wählen, nicht nur aus einem hochgeladenen Bild? Ein Browser-Tool arbeitet mit Bildern, die du hineinlädst. Um ein Pixel aus einem beliebigen Fenster zu greifen, bringen die meisten Betriebssysteme heute eine eingebaute Pipette mit (und manche Browser bieten die EyeDropper-API).

Hast du einen Code, hilft HEX, RGB und HSL erklärt beim Umwandeln und Anpassen; danach baust du Effekte mit dem CSS-Generator.