Warum es diese Farbpipette gibt

Zwei Ärgernisse, die mich zum Bauen gebracht haben

An Farbpipetten für Bilder herrscht kein Mangel. Die meisten haben aber eines von zwei Ärgernissen.

Erstens laden sie deine Datei hoch. Du ziehst den Screenshot einer noch unveröffentlichten Seite auf eine Website, und er wandert auf den Server irgendeines Anbieters, damit ein Skript dort ein einziges Pixel ausliest. Das kann dein eigener Browser seit 2010. Die Datei wird gelesen, vielleicht gespeichert, vielleicht protokolliert, und du kannst nicht wissen, was davon zutrifft.

Zweitens hören sie beim HEX-Code auf. Du wolltest die Farbe ja, um sie zu verwenden: im Stylesheet, als Grundlage einer Skala oder um zu prüfen, ob weißer Text darauf lesbar bleibt. Ein Werkzeug, das dir #3F51B5 und einen Kopieren-Button gibt, hat den leichten Teil erledigt und dir den Rest überlassen.

Dieses Werkzeug vermeidet beides. Die Seite besteht aus statischen Seiten und einem kleinen Skript, das Pixel von einem Canvas in deinem eigenen Tab liest, also gibt es keinen Server, auf den etwas hochgeladen werden könnte. Ein Klick liefert neun Farbcodes, eine Palette mit acht Farben und dem Anteil jeder Farbe, sechs Harmonien, eine Skala von 50 bis 950, WCAG-Kontrastwerte und eine Vorschau für Farbsehschwächen.

Wer dahintersteckt

Ich bin Md. Delwar Hossen. Ich entwickle seit mehr als acht Jahren Webanwendungen, lange davon Produktivitätswerkzeuge in einer Softwareberatung. Heute bin ich Direktor für Web- und Digitalsysteme bei einem US-Unternehmen und arbeite remote. Du findest mich auf LinkedIn.

Ich habe dieses Werkzeug gebaut, weil ich es immer wieder brauchte. Meine häufigste Aufgabe war, eine Oberfläche aus einem Screenshot ohne Designdatei nachzubauen, und jede Farbpipette, die ich ausprobierte, lud den Screenshot hoch oder hörte beim HEX-Code auf. Die Praxisanleitung trägt meinen Namen aus demselben Grund wie diese Seite: Wenn hier eine Zahl falsch ist, weißt du, wem du es sagen kannst.

So ist das Werkzeug gebaut

Astro und Tailwind CSS, ohne UI-Framework. Die Farbpipette ist reines TypeScript, das zwei Canvas-Elemente steuert.

Zwei Canvas-Elemente statt eines einzigen: Auf dieser Entscheidung beruht die Genauigkeit. Das erste ist das, was du siehst: skaliert, verschoben, gezoomt und bei jeder Bewegung neu gezeichnet. Das zweite enthält das Bild in Originalgröße, wird nie skaliert und ist das Einzige, was je gemessen wird. Diese Trennung sorgt dafür, dass eine bei 12-facher Vergrößerung aufgenommene Farbe Byte für Byte mit derselben Farbe in der eingepassten Ansicht übereinstimmt. Ein End-to-End-Test sichert das ab, gerade weil so etwas unbemerkt kaputtgehen kann.

Die gesamte Farbmathematik liegt in einem Ordner ohne Laufzeitabhängigkeiten. Die Umrechnungen sind für jedes 8-Bit-sRGB-Tripel verlustfrei umkehrbar. Dieser Raum ist klein genug, um ihn vollständig zu prüfen, statt nur Stichproben zu nehmen. Farbtondrehung und Helligkeitsskalen werden in OKLCH berechnet und nicht in HSL, denn HSL ist nicht wahrnehmungsgleichmäßig: Eine darin gebaute Skala sieht in Zahlen gleichmäßig aus, für das Auge aber nicht. Die Gelbtöne wirken ausgewaschen, die Blautöne schwer.

Wie die Aussagen auf dieser Seite geprüft werden

Die Genauigkeitszahlen auf dieser Seite erzeugen Skripte. So wird jede Art von Aussage geprüft.

• Die Farbmathematik hat eine eigene Testsuite. Umrechnungen werden hin und zurück geprüft, die CIEDE2000-Implementierung gegen bekannte Paare abgeglichen, und die Aussagen zum Farbsehen werden über den RGB-Würfel hinweg verifiziert statt behauptet.
• Das Datenschutzversprechen ist getestet. Ein End-to-End-Skript lädt das echte Werkzeug in Chromium ohne Oberfläche, nimmt Farben auf und schlägt fehl, sobald eine Anfrage die Seite verlässt.
• Die Genauigkeitszahlen stammen aus einem Skript. Jede Abweichungszahl der Praxisanleitung erzeugt ein Skript, das in einem echten Browser läuft, deshalb sind JPEG-Kodierung und -Dekodierung die des Browsers selbst. Es misst jede Differenz mit demselben Delta-E-Code, den das Werkzeug nutzt. Die Palette der Startseite entsteht genauso: Das Skript lässt den Palettencode des Werkzeugs über das mitgelieferte Beispielfoto laufen.
• Veraltete Ratschläge fallen auf. Widerspricht eine neue Messung der Empfehlung, die daneben steht, schlägt die Prüfung fehl, bis die Empfehlung neu geschrieben ist.

Jede gemessene Zahl in der Praxisanleitung nennt das Datum und den Browser der Messung.

Was das Werkzeug bewusst nicht tut

Das sind die bekannten Grenzen des Werkzeugs.

• Die Bildschirm-Pipette nutzt eine Browser-API, die bisher nur Chromium unterstützt. In Firefox und Safari erscheint der Button nicht.
• Es gibt keinen PNG-, JPEG- oder ASE-Export (Adobe-Farbfelder). Die SVG-Farbtafel kommt einem teilbaren Bild einer Palette am nächsten.
• Es gibt kein Farbmanagement. Du bekommst die sRGB-Werte, die ein Browser darstellen würde. Fürs Web ist das richtig, für einen Softproof auf einem kalibrierten Monitor nicht.
• Es ist keine installierbare Offline-App. Ist die Seite einmal geladen, braucht sie kein Netz, aber es gibt keinen Service Worker, ein Kaltstart ohne Verbindung funktioniert also nicht.

Korrekturen

Wenn hier etwas falsch ist, korrigiere ich es lieber, als es zu verteidigen. Schreib an info@exacthex.com oder nutze die Kontaktseite, die erklärt, was hineingehört, damit ein Farbproblem nachvollziehbar wird. Korrekturen an den gemessenen Zahlen sind besonders willkommen: Das sind die Aussagen, bei denen ein Fehler am peinlichsten wäre.