CDRN

Die Farbe eines Bildpixels erfassen

  • Dashboard
  • Dokumentation
  • API
ermittelt die exakte Farbe eines Pixels Ihres Bildes (RGB, HSL, hexadezimal) durch Klick auf die gewünschte Stelle

Was ist ein Image Color Picker?

Ein Color Picker (auf Deutsch Farbpipette oder Farbaufnahme) ist ein Werkzeug, das den exakten Wert eines auf einem Bild gewählten Pixels zurückgibt. Sie laden ein Foto, klicken auf den Punkt, der Sie interessiert, und das Tool gibt die genaue Farbe in HEX, RGB und HSL zurück. Es ist das Webäquivalent der Pipette in Design-Software wie Photoshop, GIMP oder Figma.

Unser Tool funktioniert direkt in Ihrem Browser. Sie laden Ihr Bild hoch, es wird auf der Seite angezeigt, und Sie klicken einfach auf ein Pixel, um seine Farbe abzurufen. Das Auslesen des Pixels erfolgt clientseitig über die Canvas-API, ohne Server-Roundtrip, ohne Rekomprimierung und ohne Senden des Bildes über das Netzwerk für die Auswahl.

Unterschied zu einem Farbextraktor

Unser Farbextraktor und unser Color Picker erfüllen zwei unterschiedliche Bedürfnisse, die es zu unterscheiden gilt:

  • Der Extraktor analysiert das gesamte Bild und gibt die dominante Palette (die 5, 8 oder 10 am stärksten vertretenen Farbtöne) zurück. Es ist das Mittel der Wahl, um die chromatische Stimmung eines Fotos zusammenzufassen, ein Moodboard zu erstellen oder ein Corporate Design zu speisen.
  • Der Color Picker gibt die exakte Farbe eines bestimmten Pixels zurück, das Sie auswählen. Es ist das Mittel der Wahl, wenn Sie wissen, wo Sie hinschauen müssen: ein Logo in einem Screenshot, eine bestimmte Nuance eines Gradienten, ein Referenzwallpaper.

Der Extraktor arbeitet an Millionen von Pixeln und wendet Clustering an, um Farbgruppen herauszuarbeiten; der Picker liest einfach den RGB-Wert ab, der an der angeklickten Position gespeichert ist. Der erste verallgemeinert, der zweite ist chirurgisch.

Wie es technisch funktioniert

Ein digitales Bild ist ein Pixelraster, wobei jedes Pixel drei RGB-Kanäle (Rot, Grün, Blau) trägt, üblicherweise in 8 Bit codiert, also 256 Werte pro Kanal. Wenn Sie auf einen Punkt klicken, geht das Tool wie folgt vor:

  1. Es zeichnet Ihr Bild in ein Canvas-Element und behält dabei seine nativen Abmessungen bei (mit einer Obergrenze von 1500 Pixeln Breite, um auf dem Bildschirm komfortabel zu bleiben).
  2. Es wandelt die Klickposition in native Bildkoordinaten um und kompensiert dabei die Anzeige-Skalierung des Browsers.
  3. Es liest den RGBA-Wert des Pixels über die API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Es zeigt eine Vorschau der gewählten Farbe an. Beim Absenden liest der Server dieselbe Position mit PHP GD und berechnet die endgültigen HEX-, RGB- und HSL-Codes.

Der HSL-Wert wird von unserem Farbkonvertierungsdienst berechnet, identisch mit dem, den unser Farbkonverter verwendet. End-to-End-Konsistenz: Sie erhalten dieselben Werte, als hätten Sie den HEX-Code im Konverter eingegeben.

Typische Anwendungsfälle

  • Eine Farbe aus einem Screenshot reproduzieren: Sie haben einen Screenshot einer Website und möchten genau den Farbton eines Buttons oder Hintergrunds übernehmen. Der Picker liefert Ihnen den exakten HEX-Code zum Einfügen in Ihr CSS.
  • Eine CD-Farbe auf einem Foto identifizieren: ein Präsentations-PDF, eine Magazinseite, ein Produktbild. Sie müssen das Corporate Design nicht mehr anfordern, sondern lesen die Farbe direkt.
  • Reverse Engineering einer visuellen Identität: das exakte Blau eines Logos, das Rosa eines Banners, das Orange eines Call-to-Action erfassen.
  • Inspiration und Design-Recherche: Sie sehen ein Foto, das Ihnen gefällt, und erfassen den exakten Farbton einer Blume, einer Wand, eines Plakats.
  • Frontend-Debugging: Ein Bug-Screenshot zeigt eine falsche Farbe; Sie lesen den tatsächlichen Wert ab, um ihn mit dem im Mockup erwarteten zu vergleichen.
  • Palettenerstellung aus einer Referenz: Sie picken mehrere Punkte aus demselben Bild, um eine personalisierte Palette zusammenzustellen.

So verwenden Sie den Color Picker

  1. Laden Sie Ihr Bild hoch (PNG, JPG, GIF, BMP, WebP, bis zu 20 MB).
  2. Eine Vorschau erscheint auf der Seite. Klicken Sie auf ein Pixel, um seine Farbe abzurufen.
  3. Ein Fadenkreuz markiert die geklickte Position und eine Vorschau der Farbe erscheint daneben.
  4. Bestätigen Sie mit der Submit-Schaltfläche, um das Endergebnis zu erhalten: farbiges Quadrat, HEX-, RGB- und HSL-Code.
  5. Um den Wert zwischen Formaten zu transformieren, nutzen Sie unseren Farbkonverter.

Häufig gestellte Fragen

Was ist der Unterschied zwischen HEX, RGB und HSL?

Es sind drei Darstellungen derselben Farbe. HEX (#ff0000) ist das in CSS am häufigsten verwendete Format. RGB drückt die drei Kanäle Rot, Grün, Blau in Werten von 0 bis 255 aus. HSL (Hue, Saturation, Lightness) ist intuitiver zum Anpassen eines Farbtons: Es ist das bevorzugte Format, wenn Sie eine Farbe abdunkeln, entsättigen oder ändern möchten, ohne den Grundton zu verändern.

Warum gibt mein Klick nicht genau die erwartete Farbe zurück?

In einem Gradientenbereich können zwei benachbarte Pixel sehr unterschiedliche Werte haben. Zudem sind JPG-Bilder verlustbehaftet komprimiert: Die Farbe eines Pixels kann leicht vom Original abweichen. Für zuverlässige Farbcodes bevorzugen Sie PNGs oder nicht erneut komprimierte Bilder.

Sind meine Koordinaten die des Bildschirms oder des Bildes?

Die des Originalbildes. Unser JavaScript-Skript konvertiert die Klickposition (in Bildschirmpixeln) automatisch in die Position im nativen Bild. Wenn Ihr Bild 4000x3000 ist und in 800x600 angezeigt wird, gibt ein Klick in der Mitte (2000, 1500) und nicht (400, 300) zurück.

Funktioniert der Picker mit transparenten Bildern?

Ja. Wenn Sie auf ein transparentes Pixel klicken, erhalten Sie den dort gespeicherten RGB-Wert (oft Weiß oder Schwarz, je nach Ursprungseditor). Die Transparenz selbst (Alpha-Kanal) wird im Ergebnis nicht zurückgegeben; um einen Alpha-Kanal zu analysieren, öffnen Sie das Bild in einem Grafikeditor.

Welche Bildgröße wird akzeptiert?

Bis zu 20 MB, Formate PNG, JPG, GIF, BMP und WebP. Sehr große Bilder werden mit maximal 1500 Pixeln Breite angezeigt, um auf dem Bildschirm komfortabel zu bleiben, aber die gelesene Farbe bleibt die des Originalpixels ohne Resampling.

Werden meine Bilder auf dem Server gespeichert?

Nein. Die Auswahl erfolgt in Ihrem Browser. Beim Absenden wird die Datei spontan verarbeitet, um die Farbe des angeforderten Pixels zu bestätigen, und anschließend wird die temporäre Datei gelöscht. Es wird kein Bild gespeichert, indexiert oder geteilt.

Was passiert, wenn JavaScript deaktiviert ist?

Das klassische Absenden des Formulars bleibt möglich. Die Koordinaten x und y werden von versteckten Feldern verwaltet, die JavaScript beim Klick füllt. Ohne JavaScript bleiben diese Felder leer und das Formular signalisiert eine fehlende Position, das Bild selbst wird jedoch an den Server zur Verarbeitung übermittelt.

Beispielanfrage

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Eingabeschema

Feld Typ Erforderlich Standard
image file ✓ –
x string – –
y string – –

dieses Tool erwartet eine Datei - verwenden Sie Content-Type multipart/form-data anstelle von application/json

Endpunkte

  • GET https://cdrn.fr/api/v1/tools - listet alle verfügbaren Tools auf
  • GET https://cdrn.fr/api/v1/tools/color-picker - liefert das Schema dieses Tools
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - führt dieses Tool mit einem JSON-Payload aus