Kleurenpalet generator

Mooie 5-kleurenpaletten — spatiebalk om te genereren, vergrendelen om te bewaren, extraheren uit afbeeldingen

Harmonie:

Kleuren extraheren uit afbeelding

📁 Klik om te uploaden of sleep een afbeelding

JPG, PNG, WebP — tot 10 MB

Je afbeelding verlaat nooit je apparaat — alle verwerking gebeurt in je browser.

Palet exporteren


      

WCAG-contrastcontrole

Opgeslagen paletten

Alle opgeslagen paletten wissen?

Hoe paletontwerpgeneratie werkt

Elk palet wordt gegenereerd met behulp van de HSL-kleurruimte — Hue (0–360°), Saturation (0–100%) en Lightness (0–100%). HSL is intuïtief voor harmonieregels omdat kleurrelaties gebaseerd zijn op hoekafstanden rondom het kleurenwiel.

Analoog

Kleurtinten binnen 30° van elkaar. Harmonieus en rustgevend. Ideaal voor natuur- en oceaanthema's.

Complementair

Twee kleurtinten 180° van elkaar. Hoog contrast en levendig. Veelgebruikt in sportbranding.

Triadisch

Drie kleurtinten gelijkmatig verdeeld over 120°. Evenwichtig maar kleurrijk. Goed voor speelse merken.

Monochromatisch

Dezelfde kleurtint, gevarieerde verzadiging en helderheid. Elegant en samenhangend. Perfect voor minimalistisch ontwerp.

Gesplitst complement

Eén basiskleur plus twee kleurtinten 150° aan weerszijden. Contrast zonder spanning.

Tetradisch

Vier kleurtinten met tussenruimte van 90°. Rijk en complex. Werkt het beste als één kleur domineert.

Uitgewerkt voorbeeld — analoog palet

Startkleur: H = 210° (een blauw). Analoge regel: 5 kleurtinten met tussenruimte van 15°.
Kleurtinten: 195°, 205°, 215°, 225°, 235°.
Verzadiging: gevarieerd van 55% tot 70% voor diepte. Helderheid: gevarieerd van 45% tot 70% voor bereik.
Resultaat: een samenhangend oceaanblauw kleurverloop met natuurlijk contrast.

Kleurenpalettips voor ontwerpers

  • Volg de 60-30-10-regel. Gebruik je dominante kleur voor 60% van het ontwerp (achtergronden, grote vlakken), een secundaire kleur voor 30% (secties, UI-panelen) en een accentkleur voor 10% (CTA's, highlights). Een 5-kleurenpalet sluit hier goed op aan.
  • Controleer altijd het contrast voor tekst. Een mooi palet kan alsnog WCAG AA mislukken als tekstkleur en achtergrond niet minimaal een contrastverhouding van 4,5:1 hebben. Gebruik de ingebouwde contrastcontrole hierboven.
  • Beperk je palet in productie. Vijf beschikbare kleuren betekent niet dat je ze allemaal op elk scherm gebruikt. De meeste gepolijste ontwerpen gebruiken 2–3 kleuren dominant en bewaren de andere voor specifieke momenten.
  • Vergrendel je merkkleur eerst. Als je een merkkleur hebt, klik dan op het vergrendelingsicoon op dat kleurvlak voordat je opnieuw genereert — de tool bouwt een harmonieus palet rondom je vergrendelde kleur.
  • Afbeeldingsextractie voor sfeerovereenkomst. Upload een foto die de sfeer weergeeft die je ontwerpt (een landschap, een productfoto, een lifestyleafbeelding) — het geëxtraheerde palet sluit al emotioneel aan op de richting van je merk.

Veelgestelde vragen

Paletten gebruiken HSL (Hue, Saturation, Lightness) harmonieregels. Analoog kiest bijvoorbeeld kleurtinten binnen 30° van elkaar, Complementair gebruikt kleurtinten 180° van elkaar en Triadisch kiest drie kleurtinten 120° van elkaar. Verzadiging en helderheid worden gevarieerd voor visueel aantrekkelijk contrast binnen elk palet.
Nee — je afbeelding verlaat je apparaat nooit. De tool gebruikt de Canvas API van de browser om pixeldata lokaal te lezen en dominante kleuren te extraheren via een frequentiegroeperingsalgoritme. Geen server, geen upload, geen tracking.
Klik direct op een kleurvlak of het bijbehorende hexcode-label om de hexcode naar je klembord te kopiëren. Er verschijnt kort een bevestigingsbericht.
Je kunt exporteren als CSS custom properties (--color-1 t/m --color-5), een Tailwind CSS-configuratiefragment, SCSS-variabelen, een JSON-object of een kommagescheiden hexlijst. Klik op een exportknop om direct naar het klembord te kopiëren.
De contrastcontrole toont WCAG AA geslaagd/mislukt-badges voor elke palet kleur weergegeven als tekst op witte (#fff) en zwarte (#000) achtergronden. Kleuren die voldoen aan de 4,5:1-verhouding voor normale tekst krijgen een groene 'AA Geslaagd'-badge.
Tot 50 paletten kunnen worden opgeslagen in de localStorage van je browser. Ze blijven bewaard tussen sessies. Je kunt opgeslagen paletten bekijken, opnieuw laden of verwijderen via het Geschiedenispaneel.