BikkelBatch
Van één kleur naar een compleet palet
Een visual designer bij Bikkelhart liep tegen iets simpels aan.
Als je één kleur hebt, wil je snel een goede kleurtrap kunnen maken. Niet tien vakjes handmatig lichter en donkerder maken, niet steeds hexcodes kopiëren en niet hopen dat Figma AI er iets moois van bakt.
Want dat laatste ging ongeveer zoals je verwacht.
De kleuren werden vooral steeds donkerder.
Technisch gezien een kleurtrap. Visueel gezien: mwah.
Daarom bouwde ik BikkelBatch, een Figma plugin die van één geselecteerde kleur direct een complete kleurenreeks maakt.
Eén kleur is zelden genoeg
In een designbestand heb je zelden alleen de basiskleur nodig.
Je hebt lichtere tinten nodig voor achtergronden, donkere tinten voor tekst, variaties voor hover states, borders en accenten. Soms ook gewoon net die ene tussenkleur die nergens in je styles staat, maar op dat moment wel precies goed zou zijn.
Dat handmatig maken kost tijd. Vooral omdat een goede kleurtrap niet betekent dat je een kleur gewoon steeds wat lichter of donkerder maakt.
Soms moet de verzadiging mee veranderen. Soms mag een tint iets warmer of koeler worden. En soms wil je vooral voorkomen dat de lichte kleuren er flets uitzien en de donkere kleuren meteen modder worden.
Een kleurtrap is geen rijtje van licht naar donker.
Het is een kleine designkeuze .
Niet elke kleurtrap moet hetzelfde zijn
De plugin begint bij een geselecteerd object met een kleur.
Daarna kies je welke stijl de reeks moet krijgen. Balanced maakt een gebalanceerde kleurtrap. Classic blijft dichter bij de standaard lichte en donkere varianten. Vibrant trekt de verzadiging omhoog. Muted maakt de reeks juist rustiger.
Daarnaast zijn er stijlen voor warmere, koelere, zachte, neonachtige en vintage kleurtrappen.
Dezelfde basiskleur werkt niet in elke context hetzelfde. Voor de ene interface wil je een rustige kleuren. Voor de andere mag het warmer, feller, zachter of juist meer gedempt.
Daarom kun je ook instellen hoeveel stappen de kleurtrap krijgt en hoe licht of donker de uiterste tinten mogen worden. Onderaan zie je meteen een preview, zodat je niet pas na het genereren ontdekt dat het er niet uitziet.
De kleur moest zich normaal gedragen
Voor de kleurcalculatie gebruikte ik OKLCH.
Dat klinkt technisch, maar het probleem is eigenlijk simpel: kleuren gedragen zich niet altijd logisch wanneer je ze alleen in RGB of hex aanpast.
Een kleur kan ineens flets worden, te fel uitschieten of visueel ongelijk aanvoelen tussen de stappen. Dan klopt de berekening misschien wel, maar voelt de reeks alsnog niet lekker.
OKLCH sluit beter aan op hoe mensen kleurverschillen ervaren. Daardoor kun je werken met lightness, chroma en hue op een manier die visueel beter voorspelbaar blijft.
De basiskleur blijft altijd op zijn exacte plek in de reeks. Alle andere stappen worden daaromheen berekend.
Daarna past de plugin per stap de lightness, chroma en hue aan. clampChroma zorgt dat de chroma binnen het OKLCH-bereik blijft. Daarna worden de RGB-waarden nogmaals vastgezet op wat een scherm daadwerkelijk kan weergeven.
- De geselecteerde Figma-kleur uitlezen
- De kleur omzetten naar OKLCH
- Lightness, chroma en hue per stap berekenen
- De waarden begrenzen en terugzetten naar RGB
Een kleine tool voor een terugkerende handeling
BikkelBatch begon met één vraag: kan dit niet sneller?
Het antwoord bleek ja.
Een terugkerende handeling wordt sneller, consistenter en minder handmatig. Geen grote plugin met honderd functies, maar precies genoeg om het probleem op te lossen waar het ontstaat.
Gewoon in Figma.
Dat past ook bij hoe ik graag werk. Als een workflow steeds op dezelfde plek schuurt, hoeft de oplossing niet altijd groot te zijn. Soms is een kleine tool genoeg om het werk net iets slimmer te maken.
In dit geval: één kleur selecteren, een stijl kiezen en een bruikbare kleurtrap terugkrijgen.
Veel ingewikkelder hoefde het ook niet te worden.
Techniek
Figma Plugin API · TypeScript · JavaScript · Culori · OKLCH · esbuild