So funktioniert die Pipette
Laden Sie ein Foto, einen Screenshot oder ein Logo hoch und klicken Sie auf eine beliebige Stelle. Das Werkzeug liest genau dieses Pixel und zeigt die Farbe als HEX (zum Beispiel #1e88e5) und RGB (rgb(30, 136, 229)). Die Schaltfläche Kopieren legt den HEX-Code in die Zwischenablage. Beim Laden wird automatisch das mittlere Pixel gelesen, damit sofort ein Wert da ist.
Jede angeklickte Farbe landet in einer Reihe zuletzt gewählter Farbfelder (bis zu acht). So können Sie mehrere Stellen – einen Button, den Hintergrund, eine Überschrift – vergleichen, bevor Sie sich entscheiden. Das Bild wird in einem Canvas in Ihrem Browser gelesen und nie hochgeladen.
HEX, RGB und HSL einfach erklärt
Alle drei beschreiben dieselbe Bildschirmfarbe, nur unterschiedlich notiert.
- HEX –
#RRGGBB, drei Paare hexadezimaler Ziffern für Rot, Grün und Blau, jeweils von00bisff. Das erwarten CSS, Figma, Canva, WordPress-Themes und die meisten Felder für „Markenfarbe". - RGB – dieselben drei Kanäle als Dezimalzahlen von 0 bis 255.
#1e88e5undrgb(30, 136, 229)sind identisch. Praktisch im Code, in Office und in Programmen mit Schiebereglern. - HSL – Farbton (0–360° auf dem Farbkreis), Sättigung und Helligkeit in Prozent. Die Pipette gibt kein HSL aus, aber jedes Designprogramm und CSS rechnet HEX sofort um. HSL hilft, wenn Sie eine hellere oder dunklere Variante der gewählten Farbe brauchen: Farbton behalten, nur die Helligkeit ändern.
Farben aus Screenshots übernehmen
Um eine Farbe aus einer App, Website oder einem Videobild zu übernehmen, machen Sie einen Screenshot (Windows: Win + Umschalt + S; Mac: Cmd + Umschalt + 4; Handy: Ein/Aus + Leiser, beim iPhone Seitentaste + Lauter) und ziehen ihn hierher.
Tipps für genaue Werte:
- Auf einfarbige Flächen klicken. Zielen Sie auf die Mitte eines Buttons, nicht auf den Rand – Kanten sind mit dem Hintergrund geglättet (Antialiasing) und ergeben eine Zwischenfarbe.
- Fotos rauschen. Benachbarte Pixel eines Fotos unterscheiden sich leicht; probieren Sie mehrere Stellen und nehmen Sie die typischste.
- Screenshots können Farben verschieben. Nachtmodus, Night Shift, HDR oder ein farbkalibriertes Display können die Aufnahme tönen. Schalten Sie sie aus, wenn die exakte Markenfarbe wichtig ist.
- Stark komprimierte JPGs weichen ab. Ein oft neu gespeichertes JPG zeigt Flecken an Kanten. Nutzen Sie, wenn vorhanden, das Original-PNG oder -SVG des Logos.
- Transparente Bereiche haben keine echte Farbe; ein Klick darauf ergibt Schwarz (
#000000). Klicken Sie auf den sichtbaren Teil des Logos.
Vor dem Einsatz den Kontrast prüfen
Eine schöne Farbe kann als Schrift trotzdem unlesbar sein. Die Barrierefreiheitsrichtlinien (WCAG) verlangen mindestens 4,5:1 Kontrast zwischen normalem Text und Hintergrund und 3:1 für große Schrift und Icons. Hellgrau auf Weiß oder Mittelblau auf Dunkelblau fallen oft durch.
Haben Sie Text- und Hintergrundfarbe bestimmt, fügen Sie beide HEX-Codes in einen beliebigen Kontrastprüfer ein. Ist das Verhältnis zu niedrig, Text abdunkeln oder Hintergrund aufhellen – über die Helligkeit in HSL geht das am schnellsten, ohne die Markenfarbe zu verlassen.
Typische Anwendungen
- Die Markenfarbe aus einem Logo ermitteln, das nur als Bild vorliegt.
- Die Farbe eines Buttons oder Hintergrunds einer Website im eigenen Entwurf nachbauen.
- Eine Palette aus einem Foto für Präsentationen, Social-Media-Posts oder ein Einrichtungs-Moodboard erstellen.
- Die Hintergrundfarbe des Apple-Touch-Icons im Favicon-Generator festlegen.
Passende Werkzeuge
- Motiv zuerst freistellen und dann ohne Hintergrund messen: Hintergrund entfernen.
- Kleinen Bereich ausschneiden, um genauer zu klicken: Bild zuschneiden.
- Das Bild selbst als Code für CSS? Bild zu Base64.