Wie der Color Picker auf farbcode-rechner.de arbeitet

Bild einlesen

Das hochgeladene oder eingefügte Bild wird über die Canvas-API in den Browser gezeichnet. Die Canvas hält die rohen Pixeldaten, jeweils mit den Werten für Rot, Grün, Blau und Alpha (Transparenz). Das Bild wird dabei nur lokal verarbeitet, es verlässt das Gerät nicht.

Farbwert auslesen

Beim Klick auf eine Stelle ermittelt das Tool die Pixelkoordinate und liest über getImageData den exakten RGB-Wert dieses Pixels aus. Dieser Wert ist objektiv: Er entspricht genau dem, was im Bild gespeichert ist, unabhängig davon, wie dein Monitor die Farbe darstellt.

Umrechnung in HEX, RGB und HSL

Aus dem RGB-Wert berechnet das Tool die anderen Darstellungen: HEX als sechsstellige Hexadezimalnotation (zum Beispiel #2563EB), RGB als drei Ganzzahlen von 0 bis 255 und HSL mit Farbton, Sättigung und Helligkeit. Die Umrechnung folgt den Definitionen aus dem W3C CSS Color Module.

Genauigkeit beim Picken

Bei stark komprimierten Bildern (etwa JPEG) können Randpixel durch Artefakte leicht verfälscht sein. Es lohnt sich, eine Vollfarb-Fläche statt einer Kante zu picken und bei Bedarf mehrere Punkte zu vergleichen. Mehr dazu in den Ratgebern.

Quellen

• W3C CSS Color Module Level 4: Definition von HEX, RGB und HSL
• MDN Web Docs: Canvas-API und getImageData
• IEC 61966-2-1: sRGB als Standard-Farbraum im Web

Korrektur-Policy

Wenn dir ein Fehler auffällt, schreib an info@akara-solutions.de. Bestätigte Korrekturen dokumentieren wir auf Korrekturen.

Verantwortung

Für das Tool und die Inhalte sind Mateusz Viola (Color-Picker-Engine), Jan-Tristan Rudat (Farbmodelle und Darstellung) und Eike-Christian Ramcke (Datenschutz und Verantwortung) zuständig. Inhaltlich Verantwortlicher gem. § 18 Abs. 2 MStV ist Eike-Christian Ramcke, Geschäftsführer der AKARA Solutions GmbH (Angaben im Impressum).