Kleurpaletgenerator
De kleurenpalet generator maakt een palet van 5 kleuren uit elke basiskleur met harmonieën uit de kleurenleer (complementair, triadisch, analoog, split-complementair, tetradisch of monochroom) en exporteert het als CSS custom properties.
Over deze tool
De kleurenpalet generator maakt een palet van 5 kleuren uit elke basiskleur met harmonieën uit de kleurenleer (complementair, triadisch, analoog, split-complementair, tetradisch of monochroom) en exporteert het als CSS custom properties.
Zo gebruik je het
- Kies een basiskleur met de kleurkiezer.
- Kies een type harmonie, zoals complementair of triadisch.
- Bekijk de vijf gegenereerde kleurstalen.
- Klik op Copy as CSS Variables om het palet in je stylesheet te plakken.
Goed om te weten
- Complementaire kleuren liggen 180° uit elkaar op de kleurencirkel; triadische kleuren liggen 120° uit elkaar.
- Analoge paletten gebruiken naburige tinten (ongeveer 30° uit elkaar) en voelen vaak rustig en samenhangend aan.
- Split-complementair combineert een basistint met de twee tinten aan weerszijden van zijn complement (±30°), wat contrast geeft met minder spanning.
- Monochrome paletten houden één tint aan en variëren alleen verzadiging en lichtheid.
- De generator werkt in HSL, waarmee de tint draait zonder de lichtheid van een kleur te veranderen.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Wat is een complementair kleurenpalet?
Een complementair palet combineert een tint met de tint recht tegenover op de kleurencirkel (180° verderop), zoals blauw en oranje. Het geeft het sterkste contrast van alle harmonieën.
Hoeveel kleuren moet een websitepalet hebben?
De meeste interfaces gebruiken één primaire kleur, één of twee accentkleuren en een reeks neutrale tinten. Een harmonie van vijf kleuren is een goed startpunt dat je kunt inkorten of uitbreiden met lichtere en donkere varianten.
Wat is het verschil tussen triadisch en tetradisch?
Triadisch gebruikt drie tinten die gelijkmatig 120° uit elkaar liggen. Tetradisch gebruikt vier tinten op 90° afstand, die een vierkant op de cirkel vormen: rijker, maar lastiger in balans te brengen.
Kan ik het palet gebruiken in CSS of Tailwind?
Ja. Kopieer het palet als CSS custom properties en gebruik ze met var(), of plak de hexwaarden in de themakleuren van Tailwind.