Halo
Verlaufs-Renderer · Browser-Tool
Canvas 2D
OKLab / OKLCH
Typed Arrays
0 Abhängigkeiten
Rolle
Design & Umsetzung
Jahr
2026
Ein Verlaufs-Renderer, der im Browser läuft: Interpolation in OKLab, OKLCH, linearem Licht oder sRGB, Filmkorn, Dithering und PNG-Export in bis zu 3×. Eine HTML-Datei, keine Abhängigkeiten, kein Build-Schritt, kein Server, und nichts verlässt den Rechner. Angefangen hat es mit einem Ärgernis: CSS-Verläufe interpolieren in sRGB, also treffen sich zwei satte Farben in einem toten Grau.
4
Farbräume
1024
LUT-Einträge
13MP
in 0,5 s
0
Abhängigkeiten
01 — Das Problem
Zwei satte Farben, ein totes Grau
linear-gradient(#0b3ad6, #ffd400) ist eine gerade Linie durch sRGB, und sRGB ist kein wahrnehmungsbasierter Farbraum. Auf halbem Weg zwischen sattem Blau und sattem Gelb landest du in einer Brühe, die keine der beiden Seiten wollte. Jeder Designer hat das schon von Hand umgangen und einen dritten Farbstopp in die Mitte gesetzt, bis der Matsch weg ist. Das Tool gibt es, damit das niemand mehr muss: Wähl den Farbraum für die Interpolation, und die Mitte regelt sich von selbst.
#0B3AD6 → #FFD400, vier Farbräume, dieselben zwei Stopps
02 — Der Renderer
Jedes Pixel, in JavaScript, mit 30 Frames
Hier gibt es kein WebGL und keinen Worker. Ein Uint8ClampedArray, eine Schleife, ein putImageData. Das bleibt nur interaktiv, wenn die innere Schleife langweilig ist, also habe ich die Arbeit aus ihr herausgezogen. Alles, was sich nicht pro Pixel ändert, wird vorberechnet, und alles, was sich ändert, ist eine Addition.
Eine Stoppliste, fünf Geometrien
03 — Textur
Warum ein sauberer Verlauf falsch aussieht
Ein mathematisch perfekter Verlauf ist genau das, was ein Bildschirm nicht zeigen kann. Acht Bit pro Kanal über eine große, flache Fläche quantisieren sich zu sichtbaren Stufen, und selbst ohne Banding wirkt ein Verlauf ohne Korn wie CGI. Rauschen löst beides, aber es sind zwei Arten von Rauschen aus zwei Gründen, also sind es zwei getrennte Regler.
Ein fast flacher Verlauf, vier Behandlungen
04 — Das Interface
Zwei Spalten, keine Modi
Ein Tool mit 25 Reglern wird sehr schnell zu einem Tool, das niemand zweimal öffnet. Das Layout ist eine wiederholte Entscheidung: Das Ergebnis ist die Seite, und jeder Regler sitzt dauerhaft daneben. Keine Tabs, keine Akkordeons, keine Dialoge. Alles ist einen Scroll entfernt, und nichts ist einen Klick entfernt, der dann etwas anderes versteckt.
05 — Ehrliche Reste
Was hier noch nicht stimmt
Es läuft in einem Thread, also blockiert ein 3×-Export den Tab für etwa eine halbe Sekunde. Bei 13 Megapixeln in Ordnung, bei 50 nicht, und dafür bräuchte es einen Worker. Es gibt kein Rückgängig und keine Möglichkeit, einen Verlauf zu speichern, außer den fünf eingebauten Presets. Ein Zustand, der dir gefällt, muss also sofort exportiert werden oder ist weg. Die Ausgabe ist nur 8-Bit-sRGB, ein Wide-Gamut-Display bekommt also nichts extra. Der CSS-Export ist konstruktionsbedingt eine Annäherung: 24 abgetastete Stopps statt der echten Kurve, kein Korn, keine Raute, keine gedrehte Ellipse. Er gibt seine Grenzen selbst mit aus, und mehr geht bei einer Funktion, die nie fertig werden kann, nicht.
Das echte Tool, kein Video. Es läuft komplett in deinem Browser: kein Account, kein Upload, nichts verlässt deinen Rechner.