Kleurenpalet-generator
Haal kleuren uit een afbeelding of bouw harmonieën.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Klik op een kleur om de code te kopiëren
Een professioneel palet in seconden
Elke visuele identiteit begint met een palet. Twee wegen leiden erheen: vertrekken vanuit een afbeelding die al de gewenste sfeer draagt (foto, moodboard, screenshot) en er de dominante kleuren uithalen, of vertrekken vanuit een merkkleur en haar harmonieën bouwen volgens de kleurentheorie.
-
Afbeelding → palet
Sleep de afbeelding: het k-means-algoritme clustert de pixels en onthult de 6 dominante kleuren met hun gewicht.
-
Kleur → harmonieën
Kies je basiskleur: complementair, analoog, triadisch en tinten worden direct gegenereerd.
-
Exporteer
Klik op een kleur om de code te kopiëren, of kopieer het hele blok CSS-variabelen / Tailwind.
De harmonieën in het kort
| Harmonie | Opbouw | Effect |
|---|---|---|
| Complementair | 2 kleuren 180° uit elkaar | Maximaal contrast, energie |
| Analoog | 3 kleuren op ±30° | Zachtheid, natuurlijke samenhang |
| Triadisch | 3 kleuren 120° uit elkaar | Levendige, kleurrijke balans |
| Tinten | Zelfde tint, 5 lichtheden | Monochrome diepte, hiërarchie |
De 60-30-10-regel: ongeveer 60 % dominante kleur, 30 % secundair, 10 % accent. Controleer ook het tekst/achtergrond-contrast met onze WCAG-checker.
Veelgestelde vragen
Hoe worden kleuren uit de afbeelding gehaald?
Met een k-means-clusteralgoritme dat in je browser draait: pixels worden gegroepeerd in 6 families van vergelijkbare kleuren, en het centrum van elke familie wordt een paletkleur, gesorteerd op belang (aandeel van de afbeelding).
Wat is een complementaire kleur?
De kleur recht tegenover op de kleurencirkel (180° verderop). Het duo creëert het sterkste contrast: ideaal om een call-to-action-knop te laten knallen tegen een achtergrond.
Analoog, triadisch: wanneer gebruiken?
Analoge kleuren (±30°) geven zachte, samenhangende sferen — perfect voor achtergronden. De triade (3 kleuren met 120° afstand) biedt een levendige balans: één dominant, twee accenten.
Hoe gebruik ik de CSS-export?
Het gegenereerde blok bevat CSS-variabelen (--color-1, --color-2…) om in je :root te plakken, plus het Tailwind-equivalent. Hernoem de variabelen naar rol (--primary, --accent…) voor leesbaardere code.
Wordt mijn afbeelding ergens naartoe gestuurd?
Nee: de k-means-analyse draait volledig in je browser op een miniatuur van de afbeelding. Er wordt niets verzonden, ook niet bij grote foto’s.