Hoe kies je een kleurenpalet voor een website?

Een goed websitepalet is geen verzameling mooie kleuren. Het is een klein systeem waarin elke kleur een taak heeft, zodat je pagina rustig blijft en je AI weet welke kleur waar thuishoort.

Laatst bijgewerkt op 3 september 2026

Direct antwoord

Kies een websitepalet vanuit rollen, niet vanuit losse kleurstalen. Begin met een canvas en inktkleur, voeg een paneel en secundaire tekst toe en reserveer één accent voor primaire acties. Controleer daarna contrast en test het palet in een echte hero, kaart en formulier. Leg de hexcodes en gebruiksregels vast voor je AI.

Struq is de Nederlandse visuele bibliotheek voor AI-native builders.

Welke kleurenrollen heeft een website nodig?

Canvas: de basiskleur waarop de meeste content staat.
Paneel: een tweede vlak voor kaarten, formulieren of inhoud met nadruk.
Inkt: de sterkste tekstkleur voor koppen en belangrijke informatie.
Secundair: ondersteunende tekst, metadata en minder belangrijke labels.
Accent: één herkenbare kleur voor primaire acties en actieve states.

Met rollen voorkom je dat je AI voor elk blok een nieuwe tint verzint. De naam vertelt wat de kleur doet; de hexcode vertelt welke kleur het is. Samen vormen ze een design token dat je in CSS, Tailwind of een prompt kunt hergebruiken.

Welk kleurenpalet werkt als startpunt?

In de Struq-galerij is "Warm paper" een concreet startpunt: canvas #FAF6F0, paneel #F3EDE4, inkt #1C1917, secundair #57534E en accent #C2410C. De waarde zit niet alleen in de kleuren, maar in de regels die erbij horen.

Gebruik het accent alleen voor primaire acties en actieve states.
Gebruik inkt op canvas voor lopende tekst en secundair voor metadata.
Test elke kleurcombinatie op leesbaarheid voordat je hem als standaard vastlegt.

Hoe geef je het palet aan je AI?

Kleurenprompt met rollen

Gebruik dit kleursysteem voor de hele pagina: - Canvas: #FAF6F0 - Paneel: #F3EDE4 - Inkt: #1C1917 - Secundair: #57534E - Accent: #C2410C Regels: - Accent alleen voor primaire acties en actieve states - Inkt op canvas voor lopende tekst - Secundair voor metadata - Voeg geen nieuwe kleuren toe zonder eerst te vragen waarom

Vraag je AI daarna eerst om één hero te bouwen. Zo zie je snel of het contrast, de accenthierarchie en de hoeveelheid kleur kloppen. Pas het systeem aan voordat je het naar elke sectie laat doorwerken.

Hoe controleer je of een palet goed werkt?

Bekijk een hero met lange kop, korte tekst en één primaire knop.
Bekijk een kaart of lijst met secundaire metadata.
Bekijk een formulier met focus, foutmelding en disabled state.
Controleer contrast, kleurblindheid en leesbaarheid op mobiel.
Leg de geslaagde regels vast in je contextbestand voordat je verder bouwt.

Veelgestelde vragen

Hoeveel kleuren moet een website hebben?

Begin met vijf rollen: canvas, paneel, inkt, secundair en accent. Dat is geen harde limiet, maar een overzichtelijk startpunt. Voeg alleen een kleur toe als die een duidelijke taak heeft die een bestaande rol niet goed kan uitvoeren.

Welke kleur gebruik je voor een call-to-action?

Reserveer je accentkleur voor primaire acties en actieve states. Gebruik hem niet tegelijk als decoratie, grote achtergrond en gewone tekst, anders verliest de knop zijn hiërarchie.

Kan AI zelf een goed kleurenpalet kiezen?

AI kan voorstellen doen, maar jij moet de rollen, het contrast en de context beoordelen. Een palette wordt bruikbaar zodra de keuzes als tokens en regels zijn vastgelegd, niet zodra het model vijf mooie hexcodes noemt.

Alles uit deze gids staat klaar om te kopiëren.

Paletten, font-pairings en prompts, gecureerd en gratis. Plak ze in je AI en zie meteen verschil.

Open de galerij