Lies Farbcodes pixelgenau aus jedem Bild mit integrierter Lupe aus und sieh die dominante Farbpalette.
Ziehe ein Bild hierher oder klicke zum Hochladen
Supports PNG, JPG, WEBPLies Farbcodes pixelgenau aus jedem Bild mit integrierter Lupe aus und sieh die dominante Farbpalette. Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.
Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.
Beim Gestalten einer Website, Präsentation oder Social-Media-Grafik braucht man oft die exakte Farbe aus einem Logo, Produktfoto oder Referenzbild. Den Farbcode nach Augenmaß zu schätzen, geht leicht daneben, und einen Screenshot in ein Grafikprogramm zu kopieren, ist umständlich. Mit diesem Tool lädst du ein Bild hoch, klickst auf eine beliebige Stelle und erhältst sofort HEX-, RGB- und HSL-Werte des Pixels – bereit zum Kopieren in CSS, Figma oder Canva.
Fährst du über das Bild, erscheint eine runde Lupe, die die 9×9 Pixel rund um den Cursor vergrößert und das gewählte Pixel rot umrandet. In Fotos unterscheiden sich benachbarte Pixel an Kanten und Verläufen oft stark; mit der Lupe vermeidest du verwaschene Farben durch Kantenglättung oder Rauschen und triffst genau den gewünschten Ton. Jede Farbe landet im Verlauf, damit du vergleichen und eine Palette zusammenstellen kannst.
Anschließend lässt der WCAG-2.1-Kontrastprüfer dich Vordergrund- (Text) und Hintergrundfarbe festlegen, berechnet das Kontrastverhältnis und zeigt, ob es besteht. Normaler Text braucht 4,5:1 für AA und 7:1 für AAA; großer Text (ab 18 pt oder 14 pt fett) 3:1 bzw. 4,5:1. Wer beim Ableiten von Button- und Überschriftsfarben aus der Markenfarbe den Kontrast prüft, vermeidet Probleme für ältere Menschen, Sehbehinderte und alle, die bei Sonnenlicht lesen.
Beachte: Der aufgenommene Wert ist der in der Bilddatei gespeicherte. Fotos werden von Licht, Weißabgleich und Kompression beeinflusst, sodass dasselbe Produkt auf verschiedenen Fotos unterschiedliche Codes haben kann; verbindliche Markenfarben stehen im Styleguide. Das Bild wird per Canvas im Browser gelesen und nie hochgeladen.
Ein Klick auf ein Pixel zeigt HEX, RGB und HSL gleichzeitig, jeweils mit einem Klick kopierbar.
Rauschen, Verläufe und geglättete Kanten lassen benachbarte Pixel variieren. Ziele mit der Lupe auf eine gleichmäßig gefärbte Fläche.
Normaler Text: 4,5:1 für AA, 7:1 für AAA. Großer Text (ab 18 pt oder 14 pt fett): 3:1 für AA, 4,5:1 für AAA.
Nein. Die Pixel werden nur in deinem Browser gelesen, das Bild wird nie an einen Server gesendet.
Kategorie ansehen: Design & Farben
Konfiguriere und visualisiere CSS Flexbox- und Grid-Layouts visuell, sieh Animationen und kopiere CSS-Code.
Erstelle harmonische Farbschemata basierend auf einer Basisfarbe mit Export als HEX- und RGB-Code.
Optimiere und komprimiere SVG-Dateien lokal durch Entfernen unnötiger Metadaten mit Live-Vorschau.
Gestalte lineare und radiale Farbverläufe visuell, wähle aus Vorlagen und kopiere den fertigen CSS-Code.
