Chroma
Een interne kleurensysteemtool die een workflow van 5–6 tools samenbracht in één interface — en het kleurwerk terugbracht van 3,1 naar 1,0 uur per project (−68%), nu in gebruik op 100% van de SVP-projecten
- Probleem — Bij SVP was mijn kleurwerk versnipperd over 5–6 losse tools en kostte het 3,1 uur per project
- Inzicht — De pijn zat niet in een gebrek aan tools, maar in de naden ertussen — één doordachte interface, afgestemd op hoe ik echt werk
- Oplossing — Ik bouwde Chroma in mijn eentje van A tot Z (onderzoek, design, React/TS frontend, FastAPI backend, DevOps): extractie uit afbeelding én live site, WCAG-matrix, OKLCh-schalen, 8 exportformaten, 25 dagen
- Resultaat — Kleurwerk terug naar 1,0 uur/project (−68%), 6 tools → 1, in gebruik op 100% van de projecten, €0 hosting — kleine steekproef n=3; volledige evaluatie na 3 maanden
Eén interface voor de volledige kleurenpipeline
Kleurbeslissingen staan aan het begin van zowat elk SVP-project — klantpresentaties, merkaudits, interne AI-product-UI, marketing. Het werk daarachter zat verspreid over 5–6 browsertabbladen: een kleurpipet, een afbeeldingsextractor, een contrastchecker, een exporttool die nooit het formaat opleverde dat mijn collega’s nodig hadden. Chroma brengt dat samen in één interface.
chroma.ontwrpn.com — na een volledige ronde visueel ontwerp, UX/UI, responsive layout, WCAG 2.2 AA en beveiliging
De naden tussen de tools
Een typische opdracht: referenties verzamelen, paletten extraheren, WCAG-contrast testen, tonale schalen van 50 tot 950 opbouwen, aanleveren in het formaat dat de ontvanger ook echt gebruikt. Elke stap zat in een andere tool — Coolors, Adobe Color, contrastcheckers, Figma-plugins — en de uitvoer sloot nooit op elkaar aan. Toegankelijkheid kwam telkens te laat aan bod. Uitgangspunt: 3,1 uur kleurkarwei per project, gemeten over 12 afgeronde projecten.
De pijn zit niet in een gebrek aan tools — maar in de naden ertussen
Eerst valideren, dan bouwen in 25 dagen
Discovery vóór code: een zelfevaluatie van 12 afgeronde projecten (gemiddeld 3,1 uur), gesprekken van twintig minuten met de CEO, de AI-engineer en de junior, en gestructureerde walkthroughs van 8 concurrerende tools. Er dook een verborgen kost op — teamgenoten leidden mijn paletten opnieuw af omdat het aangeleverde formaat niet bij hun tools paste. Daarna bouwde ik solo via afgebakende fasen — interne alpha → interne beta → productie — zodat de lancering al bewezen was op echt werk.
Resultaten: palet op basis van werkelijke pixelverhouding, donut, harmonie, tonale tinten en tokenexport
Extraheer → balanceer → controleer → exporteer
Eén webtool voor de volledige kleurenlevenscyclus: extractie uit afbeelding en live site (werkelijke pixelverhoudingen, geen gegenereerde samples), een live WCAG-matrix met kleurenblindheidssimulatie, tonale OKLCh-schalen en acht exportformaten, inclusief W3C design tokens. Gebouwd met Vite + React + TypeScript + Tailwind bovenop FastAPI / Python.
Live — plak een afbeelding of een site-URL en probeer het zelf
Desktop
Mobiel
Gelanceerd, geadopteerd, gemeten
Eerste twee weken (kleine vroege steekproef, n = 3, tegenover een baseline van 12 projecten): kleurwerktijd 3,1 uur → 1,0 uur (−68%), tools per opdracht 6 → 1, in gebruik op 100% van de projecten, €0 hosting. Het eerste klantdeck na de lancering raakte rond zonder één kleurrevisie; de W3C-tokens gingen rechtstreeks de Tailwind-config van de ontwikkelaar in. Eerlijk gezegd — het blijft een kleine vroege steekproef; de volledige impactevaluatie volgt na drie maanden. Het enige knelpunt: website-extractie (vs. image upload) duurt 10–12 s zonder zichtbare voortgangsindicator — een laadstatus staat op de backlog.
