Kleurenpalet-generator: kleuren die bij je website passen
Geen idee welke kleuren je site moet krijgen? Klik en je krijgt zes combinaties van een hoofdkleur, een donkere variant, een accent en een rustige achtergrond. Met hexcodes, klaar om te kopieren.
Voor wie deze generator is
Voor ondernemers die een website laten maken en nog geen huisstijl hebben, of die twijfelen of hun huidige kleuren wel werken op een scherm. Kleur is het eerste wat een bezoeker ziet en het bepaalt in een oogopslag of je site betrouwbaar, fris of rommelig overkomt. Toch kiezen veel mensen kleuren op gevoel, met als gevolg een felle kleur die onleesbaar is als knop, of vier accentkleuren die met elkaar vechten.
Wat je eruit haalt: zes paletten per klik, elk met vier kleuren die een vaste rol hebben. De hoofdkleur gebruik je voor knoppen en koppen, de donkere variant voor de footer en hover-effecten, het accent voor de ene knop die het meest moet opvallen en de lichte achtergrond voor secties die rust moeten geven. Elk palet volgt een bewezen kleurenschema: complementair (tegenover elkaar), analoog (naast elkaar), triadisch (drie gelijke stappen) of gedempt (rustig en zakelijk).
Zo gebruik je de tool: klik op "Genereer paletten", bekijk de vlakjes en kopieer het palet dat je aanspreekt. Plak de hexcodes in je briefing of stuur ze mee met je offerteaanvraag, dan verwerk ik ze direct in het ontwerp. Heb je al een logo, zoek dan een palet waarvan de hoofdkleur in de buurt komt van je logokleur. Meer over kleur en huisstijl lees je in de gids over een huisstijl opbouwen.
Genereer kleurenpaletten
Elke klik geeft zes nieuwe combinaties. Kopieer de hexcodes en neem ze mee in je briefing.
Zo lees je een palet
De eerste kleur is je hoofdkleur, de kleur die mensen met je merk gaan associeren. Gebruik hem voor de belangrijkste knoppen, koppen en het logo, maar niet voor grote vlakken; dat wordt snel vermoeiend. De tweede kleur is een donkere variant van dezelfde tint. Die gebruik je voor de footer, voor tekst op lichte vlakken en als hover-kleur van knoppen, zodat alles bij elkaar blijft horen zonder dat je een extra kleur nodig hebt.
De derde kleur is het accent. Op deze site is dat koraal naast indigo: een kleur die net genoeg botst om de aandacht te trekken. Gebruik het accent spaarzaam, bij voorkeur voor een enkele actie per pagina, zoals de knop "vraag een offerte aan". Hoe minder je hem gebruikt, hoe harder hij werkt. De vierde kleur is een bijna witte achtergrondtint met een vleugje van je hoofdkleur. Daarmee wissel je secties af zonder harde witte en grijze blokken.
Controleer altijd het contrast: witte tekst op je hoofdkleur moet goed leesbaar zijn, ook voor mensen die minder goed zien. Een gedempt palet is vaak de veiligste keuze voor zakelijke dienstverleners; een complementair palet werkt goed voor winkels en creatieve beroepen. Twijfel je? Lees kleuren en huisstijl kiezen voor je website of laat het ontwerp gewoon aan mij over als onderdeel van website laten maken.
Over de kleurenpalet-generator.
Een hexcode zoals #4F46E5 is de exacte omschrijving van een kleur die elk ontwerpprogramma en elke websitebouwer begrijpt. Plak de code in het kleurveld van je programma, of stuur het palet mee met je briefing. Dan gebruik ik precies deze kleuren in het ontwerp.
Ja. Klik een paar keer tot je een palet ziet waarvan de hoofdkleur dicht bij je logokleur ligt, en gebruik de andere drie kleuren als aanvulling. Weet je de hexcode van je logokleur, dan kan ik het palet ook exact daarop afstemmen tijdens het ontwerp.
Vier is een prettig maximum: een hoofdkleur, een donkere variant, een accent en een achtergrondtint. Daarnaast heb je alleen nog zwart, wit en een paar grijstinten voor tekst en lijnen nodig. Meer kleuren maken een site onrustig en minder professioneel.
Palet gekozen?
Stuur de hexcodes mee met je aanvraag. Ik verwerk ze in een ontwerp dat bij je bedrijf past, tegen een vaste prijs.
Vraag een offerte aan