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.
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.
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.
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ä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.