Bedienungsanleitung
- Klicken Sie auf „Bild auswählen“, ziehen Sie ein Bild hinein oder fügen Sie einen Screenshot per Strg+V / Cmd+V ein.
- Bewegen Sie Ihren Mauszeiger oder Finger über das Bild, um Live-Werte für HEX, RGB und HSL sowie das Lupen-Fadenkreuz anzuzeigen.
- Klicken Sie auf einen Punkt, den Sie behalten möchten; die Farbe wird im Verlauf gespeichert.
- Klicken Sie auf „Hauptfarben extrahieren“, um eine designfreundliche Farbpalette zu generieren, und kopieren Sie die gewünschten Farbwerte.
Beispiel: Fügen Sie einen Produkt-Screenshot ein, wählen Sie die Hauptfarbe der Schaltfläche aus und kopieren Sie den HEX-Wert direkt in Ihr CSS oder Ihre Designdatei.
Kernfunktionen
- Lokale Farbauswahl aus Bildern: Bilder werden im Canvas-Element des Browsers gerendert und analysiert; es erfolgt kein Upload auf einen Server.
- Präzise HEX/RGB/HSL-Werte: Bewegen Sie Ihren Mauszeiger oder Finger über das Bild, um Live-Werte für HEX, RGB und HSL abzulesen.
- Lupen-Fadenkreuz: Ein vergrößertes Vorschaubild hilft Ihnen, Symbolränder, UI-Screenshot-Details und kleine Farbfelder exakt anzuvisieren.
- Farbpaletten-Generator: Clientseitiges Pixel-Sampling extrahiert bis zu 5 dominante Farben für schnelle Design-Referenzen.
- Schnelles Speichern und Kopieren: Klicken Sie auf das Bild, um Farben im Verlauf zu speichern. Klicken Sie auf ein beliebiges Farbfeld, um den Farbcode zu kopieren.
Verwandte Tools
Der FIRE-Rechner 2026 mit Inflationsbereinigung. Simulieren Sie die reale Kaufkraft, analysieren Sie Vorsorgelücken und erstellen Sie Ihren finanziellen Fahrplan. Exportieren Sie Daten per Klick als CSV für Excel oder Notion. 100 % privat, lokale Berechnung im Browser.
Berechnen Sie die Trading-Positionsgröße aus Kontostand, Risiko %, Einstiegspreis und Stop-Loss. Läuft lokal in Ihrem Browser und ermöglicht den Vergleich verschiedener Risikoszenarien vor dem Trade.
Berechnen Sie den Zinseszins aus Anfangskapital, regelmäßigen Beiträgen, jährlicher Rendite (APY) und Laufzeit. Visualisieren Sie Kapital, Zinsen und Endguthaben mit einem lokalen interaktiven Diagramm.
Nutzen Sie diesen Kreditrechner / Tilgungsrechner, um die monatliche Rate, die Zinsen und den Tilgungsplan lokal zu berechnen. Geben Sie Kreditsumme, Zinssatz und Laufzeit ein, um sofort Ergebnisse und Diagramme zu sehen.
Nutzen Sie diesen Investment-Rechner / ROI-Rechner, um Anfangskapital, monatliche Sparraten, jährliche Rendite und inflationsbereinigte Ergebnisse lokal zu schätzen. Visualisieren Sie prognostizierte Renditen mit einem Zinseszins-Diagramm, ROI und einem Jahresplan.
Nutzen Sie diesen APR-zu-APY-Rechner, um APR und APY lokal umzurechnen. Geben Sie einen Zinssatz ein, wählen Sie die Zinsperioden und sehen Sie sofort den effektiven Jahreszins, die Differenz und den Häufigkeitsvergleich.
Nutzen Sie diesen Gewinnspannen-Rechner, um Bruttogewinn, Aufschlag (Markup), Marge (Margin) und Verkaufspreis lokal zu berechnen. Geben Sie Kosten und Preis oder Kosten und Zielmarge ein, um Ihre Margen sofort zu berechnen.
Nutzen Sie diesen CPM- und CPC-Rechner, um Werbeausgaben, Impressionen, Klicks, CPM, CPC und CTR lokal zu berechnen. Geben Sie Budget und Zielkosten ein, um Kampagnenszenarien sofort zu planen.
Berechnungslogik
Dieses Tool decodiert das Bild lokal über HTML5 Canvas und liest die RGBA-Pixel an der aktuellen Auswahlkoordinate per getImageData aus. Die HEX-, RGB- und HSL-Werte werden direkt aus diesen Pixeldaten berechnet.
Die Paletten-Generierung tastet die Canvas-Pixel ab, gruppiert ähnliche Farben in einfache Farbklassen und ordnet sie nach Häufigkeit, um bis zu 5 dominante Farben zurückzugeben. Dies eignet sich hervorragend für schnelle Web- und Designpaletten, ersetzt jedoch kein professionelles absolutes Farbmanagement nach ICC / P3.
Häufig gestellte Fragen
Werden meine Bilder hochgeladen?
Nein. Das Laden von Bildern, die Farbauswahl, die Lupen-Vorschau und die Paletten-Generierung laufen vollständig lokal in Ihrem Browser.
Wie erhalte ich einen HEX-Farbcode aus einem Bild?
Wählen Sie ein Bild aus oder fügen Sie es ein, und bewegen Sie den Mauszeiger oder Finger auf den gewünschten Pixel. Die Live-Farbe wird sofort angezeigt. Klicken Sie auf das Bild, um die Farbe im Verlauf zu speichern, und klicken Sie dann auf das Farbfeld, um den HEX-Wert zu kopieren.
Welche Farbformate werden unterstützt?
Das Tool zeigt und kopiert HEX, RGB und HSL – die im Webdesign und in der Frontend-Entwicklung am häufigsten verwendeten Farbformate.
Warum unterscheidet sich die Farbe eventuell minimal von Photoshop?
Das Canvas-Element liest die Pixel so aus, wie sie von Ihrem Browser tatsächlich gerendert werden. Browsereigenschaften, der Farbraum des Monitors sowie eingebettete Farbprofile können zu minimalen Abweichungen führen.
Kann ich die Farbauswahl auch auf dem Smartphone nutzen?
Ja. Auf Touch-Geräten können Sie das Fadenkreuz mit dem Finger über das Bild ziehen. Tippen Sie oder lassen Sie den Finger los, um die Farbe zu sperren.