Kleurenpalet Generator: Extraheer uit Afbeelding

Extraheer dominante kleuren uit elke foto en creëer perfecte ontwerpharmonieën, exporteerbaar naar CSS en Tailwind.

100% Privé

HEX / RGB / HSL

Exporteer CSS

Directe Analyse

Stappen

Hoe Maak je een Professioneel Kleurenpalet

Van visuele inspiratie naar code in 3 stappen.

Upload Inspiratie

Selecteer een foto, screenshot of ontwerp dat je leuk vindt.

AI Analyse

Ons algoritme extraheert de 5 dominante kleuren en berekent hun harmonieën (Complementair, Triaden).

Kopieer Code

Klik om de HEX-code te kopiëren of exporteer de volledige configuratie voor Tailwind CSS.

Pro Kleur Tools

Alles wat je nodig hebt voor je ontwerpsysteem.

Slimme Extractie

We kiezen niet zomaar willekeurige pixels. We identificeren visueel dominante tonen uit de afbeelding.

Random Modus

Creatieve blokkade? Genereer oneindige paletten willekeurig met geldige harmonieën met één klik.

Kleurtheorie

Bereken automatisch complementaire en analoge kleuren voor elke geëxtraheerde toon.

Tailwind Klaar

Kopieer het exacte JSON-object om in je `tailwind.config.js` bestand te plakken.

CSS Export

Krijg CSS-variabelen (`:root`) klaar voor gebruik in elk webproject.

Volledige Privacy

Analyse gebeurt in je browser. Je inspiratieafbeelding wordt nooit naar de cloud geüpload.

Toegepaste Kleurtheorie

Hoe je deze paletten gebruikt in je projecten.

De 60-30-10 Regel

Zodra je je palet hebt geëxtraheerd, pas je deze gouden regel van interieur- en webdesign toe: Gebruik de dominante kleur in 60% van de ruimte (achtergrond), de secundaire in 30% (kaarten/secties) en de accentkleur in 10% (knoppen/CTA's).

Wiskundige balans voor het menselijk oog.

Waarom Exporteren naar HSL?

Hoewel HEX populair is, geven professionele ontwerpers de voorkeur aan HSL (Hue, Saturation, Lightness). Het stelt je in staat variaties van een kleur te creëren door simpelweg 'Lightness' aan te passen zonder de tint te wijzigen, ideaal voor :hover toestanden of donkere modi.

Volledige controle over kleurvariaties.

Merkconsistentie

Als je een bedrijfspresentatie ontwerpt, upload het bedrijfslogo. Onze tool extraheert de exacte merkkleuren, zodat al je grafieken en tekst perfect aansluiten op de visuele identiteit.

Nul branding-fouten.

Kwantisatie: hoe wij kleuren kiezen

Naïef gezien zou je alle pixels middelen, het resultaat is een modderig bruin voor elke foto. Wij gebruiken median-cut kwantisatie: het algoritme splitst de kleurruimte in buckets van vergelijkbare pixels, en pakt vervolgens het centroïde van elke bucket. De uitvoer: 5 visueel-onderscheiden kleuren die daadwerkelijk de afbeelding vertegenwoordigen, niet het wiskundige gemiddelde. Hetzelfde algoritme dat GIF-encoders 30 jaar gebruiken om naar 256 kleuren te comprimeren.

Median-cut verslaat k-means en naïeve middeling voor paletextractie.

WCAG contrast: het deel dat de meeste paletten negeren

Een palet kan mooi zijn en toch falen op toegankelijkheid: lichtgrijs op wit leest geweldig in Figma en verdwijnt voor slechtziende gebruikers. WCAG 2.2 eist een 4,5:1 contrastverhouding voor body-tekst en 3:1 voor grote tekst. Na het extraheren van je palet, run elke tekst-op-achtergrond combinatie door een contrastchecker, en gebruik de donkerste geëxtraheerde toon voor body-copy, nooit de mooiste.

Mooi palet + slecht contrast = ontoegankelijke site.

Formaten vergelijken

Kies het juiste formaat voor jouw gebruik

Kleurmodel	Formaat	Beste Voor
HEX	#RRGGBB	Snel Kopiëren/Plakken	Algemeen Webdesign
RGB	rgb(r, g, b)	Digitale Manipulatie	Schermweergave
HSL	hsl(h, s%, l%)	Tint Aanpassing	Ontwerpsystemen
Tailwind	JSON Object	Configuratie	Frontend Devs

Kleur FAQ

Snelle antwoorden over de tool

Hoe kies je dominante kleuren?

We gebruiken een Kwantisatie-algoritme dat vergelijkbare pixels groepeert en bepaalt welke tonen het meeste visuele gewicht hebben in de afbeelding, achtergrondruis negerend.

Kan ik het palet exporteren naar Photoshop of Figma?

Ja. Je kunt de HEX-codes individueel kopiëren. Voor Figma raden we het HEX-formaat aan, dat is de universele standaard.

Is het genereren van paletten gratis?

Volledig. Geen limieten of watermerken. Je kunt de tool gebruiken voor al je persoonlijke of commerciële projecten.

Wat is een kleurtriade?

Het is een combinatie van drie kleuren equidistant op het kleurenwiel. Het genereert hoog contrast met behoud van harmonie. Onze tool kan triaden voorstellen op basis van je hoofdkleur.

Werkt het met WebP en SVG afbeeldingen?

Ja, de extractor ondersteunt JPG, PNG, WebP en SVG. Als de afbeelding zichtbaar is in de browser, kunnen we de kleuren extraheren.

Hoe gebruik ik de Tailwind config?

Kopieer de JSON-code die we genereren en plak hem in de theme.extend.colors sectie van je tailwind.config.js bestand. Dit creëert klassen zoals bg-primary of text-accent automatisch.

Worden mijn afbeeldingen ergens opgeslagen?

Nee. De analyse is 100% Client-Side. Je afbeelding wordt geladen in het tijdelijke geheugen van je browser, geanalyseerd en weggegooid. Niemand, ook wij niet, ziet wat je uploadt.

Kan ik mijn palet opslaan?

Momenteel kun je een tekstbestand met de codes downloaden of een screenshot maken. We werken aan een PDF-exportfunctie.

Hoe extraheer ik een merkpalet uit een logo?

Upload het logo PNG of JPG. De extractor vindt de dominante tonen, voor de meeste logo's zijn dat 2-4 merkkleuren plus een neutrale. Sla de HEX-waarden op in je ontwerpsysteem als --brand-primary, --brand-secondary, etc. Voor maximale getrouwheid, werk vanuit de originele vector (SVG) bron als je die hebt, aangezien JPG-compressie logokleuren met 1-2% per kanaal kan verschuiven.

Wat is het verschil tussen complementair, analoog en triadisch?

Complementair = kleuren tegenover elkaar op het wiel (rood ↔ groen), hoog contrast, opvallend. Analoog = buren op het wiel (blauw → blauw-groen → groen), kalm, harmonieus. Triadisch = drie kleuren equidistant (120° uit elkaar), levendig maar gebalanceerd. Kies complementair voor CTA's, analoog voor achtergronden, triadisch voor kindvriendelijke of speelse merken.

Kan ik paletten extraheren uit screenshots en UI-ontwerpen?

Ja, drop een Figma-export, een Dribbble-shot, een screenshot van de homepage van een concurrent. De tool extraheert de daadwerkelijke gerenderde kleuren, niet de bron-CSS. Handig voor reverse-engineering van een ontwerpsysteem, of voor het snel matchen van een nieuw component aan een bestaand. Alle verwerking lokaal, je screenshots verlaten de browser nooit.