Bild-Farbpaletten-Extraktor – HEX, RGB & HSL erhalten

Was der Farbpaletten-Extraktor macht

Dieses Tool beantwortet eine präzise Frage: Mit welchen wenigen Farben müssten Sie dieses Bild beschreiben, wenn Sie müssten? Es dekodiert Ihr Bild im Browser, skaliert es herunter, so dass die längste Kante etwa 200 Pixel beträgt, und liest die rohen Pixeldaten von einem Canvas. Das Herunterskalieren ist keine Abkürzung, die Genauigkeit kostet – das Mitteln benachbarter Pixel während der Skalierung entfernt JPEG-Artefakte und Sensorrauschen, die sonst als Dutzende nahezu identischer Farbtöne erscheinen würden, und hält die gesamte Analyse bei unter etwa vierzigtausend Pixeln, so dass sie selbst auf einem Telefon sofort abgeschlossen ist. Pixel mit einem Alphawert unter 128 werden verworfen, bevor etwas anderes passiert. Dieser einzelne Schritt verhindert, dass ein Logo auf transparentem Hintergrund Schwarz als seine Hauptfarbe meldet, was die häufigste falsche Antwort ist, die andere Extraktoren liefern. Die verbleibenden deckenden Pixel werden mit Median Cut gruppiert. Median Cut behandelt die Pixel als Wolke im dreidimensionalen RGB-Raum, legt einen Quader darum, wählt wiederholt den Quader mit der größten Farbstreuung, gewichtet nach der Anzahl der darin enthaltenen Pixel, und zerschneidet ihn an einer Stelle, an der sich die Farbwerte tatsächlich ändern. Wenn man dies wiederholt, bis es so viele Quader gibt, wie Sie angefordert haben, erhält man Cluster, die der realen Struktur des Bildes folgen, und jedes Cluster gibt den Durchschnitt der darin enthaltenen Pixel zurück und nicht eine willkürliche Kastenmitte. Deshalb sind die Ergebnisse echte Farben aus Ihrem Bild und nicht die verwaschenen Grautöne, die eine Kategorisierung mit festem Raster erzeugt. Die Reihenfolge wird dann angepasst. Eine Rangfolge rein nach Pixelanzahl ist eine Falle: Ein Foto besteht oft zu vierzig Prozent aus Himmel oder weißem Studiotisch, und eine reine Zählung stellt dies an die erste Stelle und vergräbt die Farben, die Sie eigentlich wollten. Nahezu neutrale, fast schwarze und fast weiße Cluster werden daher bei der Sortierung geringer gewichtet, auch wenn sie nie fallengelassen werden und der neben jedem Farbfeld angezeigte Prozentsatz immer der wahre, unveränderte Pixelanteil ist. Schließlich erhält jedes Farbfeld eine Textfarbe, die auf Basis seiner relativen Luminanz nach WCAG 2.1 berechnet wird, wobei je nachdem, welches Kontrastverhältnis zu dieser spezifischen Farbe höher ist, Schwarz oder Weiß gewählt wird. Dieser Test basiert auf Luminanz, nicht auf Helligkeit, so dass er bei Mitteltönen richtig liegt, wo eine einfache Helligkeitsschwelle die falsche Antwort wählen würde.