In een app laten kleuren zien waar je op kunt tikken, wat actief is en wat goed of fout ging. Deze 12 paletten bevatten een achtergrond, vlakken, een hoofdkleur en tekst, afgestemd op het type app, met HEX-codes die je meeneemt naar Figma, Flutter, SwiftUI of React Native.
Fintech blauw en groen
Blauw voor vertrouwen en groen voor saldi en geslaagde transacties.
Oranje bezorg-app
Oranje laat bestelknoppen en acties opvallen.
Zorg en welzijn
Rustig; voor apps voor afspraken bij de dokter, gewoontes of tracking.
Paarse dark mode
Heel donkergrijze achtergrond in plaats van puur zwart, met een lichtpaars accent.
Sociaal roze en paars
Voor social media, dating of contentmakers.
Minimalistische productiviteit
Heel goed leesbaar; voor takenlijsten en werktools.
Educatief geel
Vrolijk en helder; voor taal- of leerapps.
Energiek fitness
Limoen en rood op donker; voor trainingen en statistieken.
Lavendel voor meditatie
Zacht en kalm; voor slapen, meditatie of een dagboek.
Reizen: turquoise en zand
Doet denken aan strand en zon; voor boekingen en reisgidsen.
Fris groen voor eten
Voor supermarkten, recepten of voeding.
Premium shopping
Neutraal en elegant; laat productfoto's de hoofdrol spelen.
Tik op een kleur om de HEX-code te kopiëren. Met het potloodicoon open je het palet in de editor om het aan te passen.
Bepaal statuskleuren vanaf het begin
Elke app heeft kleuren nodig voor fout, succes, waarschuwing en informatie. Kies tinten die bij je palet passen en gebruik de foutkleur nergens anders voor, zoals voor merkknoppen. Combineer kleur met een icoon of tekst, zodat het ook zonder kleur te begrijpen is.
Ontwerp ook de dark mode
De meeste telefoons hebben een donkere modus en veel gebruikers hebben die aanstaan. Kleuren omdraaien is niet genoeg: gebruik heel donkergrijs in plaats van puur zwart en verlaag de verzadiging van je accenten iets, zodat ze niet trillen op de achtergrond.
Controleer contrast en aanraakvlakken
Tekst moet volgens WCAG minstens een contrast van 4,5:1 met de achtergrond hebben. Knoppen moeten er anders uitzien als ze actief, ingedrukt of uitgeschakeld zijn. Test de app buiten en met lage helderheid, want zo gebruiken veel mensen hem.
Meestal een hoofdkleur, eventueel een secundaire kleur, neutrale tinten voor achtergronden en tekst, en vier statuskleuren: fout, succes, waarschuwing en informatie.
Welke kleur gebruik je voor de hoofdknop van een app?
De hoofdkleur van je merk, zolang die goed contrasteert met de achtergrond. Gebruik hem alleen voor de belangrijkste actie op elk scherm.