Kleurenpaletgenerator: harmonieuze kleurenschema's op basis van één kleur
Met de kleurenpaletgenerator maak je online een kleurenpalet op basis van één basiskleur: kies een kleur of voer een HEX-code in en er verschijnen direct zes harmonieuze kleurenschema's, elk met HEX, RGB en HSL. Gratis, zonder registratie en volledig berekend in je browser.
Gebouwd door Justin Schuessler
Kleurenpalet klaar? Zet jouw site online met snelle, betrouwbare webhosting.
Basiskleur kiezen
Alle onderstaande kleurenschema's worden direct op basis van deze kleur berekend.
Complementair
De basiskleur plus de tegenoverliggende kleur op de kleurencirkel (180°): sterk contrast, goed voor accenten.
Analoog
Drie aangrenzende kleurtinten (±30°) – harmonieus en rustig, vaak te vinden in de natuur.
Triadisch
Drie gelijkmatig verdeelde kleurtinten (120° afstand) – levendig, maar evenwichtig.
Gesplitst complementair
De basiskleur plus de twee buurkleuren van haar complementaire kleur: contrast met minder spanning.
Tetradisch
Vier kleurtinten in twee complementaire paren (90° uit elkaar) — rijk aan kleur, bij voorkeur met één dominante kleur.
Monochroom
Vijf gradaties van dezelfde kleur (tints, tones, shades): subtiel en gegarandeerd harmonieus.
Verder met de basiskleur: Contrast controleren · Bekijken in de kleurenblindheidssimulator · Openen in de Color Picker
Hiervan wordt niets opgeslagen of verzonden: elke kleur wordt uitsluitend in je browser berekend.
Functies
Wat de kleurenschemagenerator kan
Eén basiskleur is genoeg: de generator berekent daaruit harmonieuze kleurencombinaties volgens de regels van de kleurtheorie.
Zes kleurenschema's in één oogopslag
Complementair, analoog, triadisch, split-complementair, tetradisch en monochromatisch staan naast elkaar en worden bij elke wijziging van de basiskleur direct bijgewerkt, zonder knop om ze te genereren.
Kies zelf een basiskleur
Kleurvlak voor verzadiging en helderheid, schuifregelaar voor de kleurtoon, HEX-veld (zes cijfers of een verkorte vorm van drie cijfers) of RGB-waarden van 0 tot 255. Je kunt ook beginnen met ‘Willekeurige kleur’.
HEX, RGB en HSL voor elke kleur
Elk kleurvak toont de HEX-code, RGB-waarde en HSL-waarde. Klik op een kleurvak of op de grote voorvertoning van de basiskleur om de HEX-code naar het klembord te kopiëren.
Kleurenpalet delen via een link
De basiskleur staat automatisch in de URL, bijvoorbeeld ?color=3b82f6. Wie de link opent, ziet dezelfde basiskleur en dezelfde zes kleurenschema's.
Berekend in je browser
Alle kleuren worden in je browser berekend. Je hebt geen account nodig en je kleurkeuze wordt niet opgeslagen of naar een server verzonden.
Verder naar contrast en toegankelijkheid
Onder de kleurenschema's kun je de basiskleur met één klik doorgeven aan de contrastchecker, de kleurenblindheidssimulator of de Color Picker.
Zo werkt het
Zo maak je een kleurenpalet op basis van een basiskleur
Zes stappen van de eerste kleur tot een compleet kleurenpalet.
Stap 1
Basiskleur kiezen
Klik of sleep in het kleurvlak om verzadiging en helderheid in te stellen. Stel de kleurtoon in met de schuifregelaar eronder.
Stap 2
HEX-code of RGB-waarden invoeren
Je kunt ook een HEX-code zoals #3B82F6 of drie RGB-waarden invoeren. Met ‘Willekeurige kleur’ begin je met een willekeurige basiskleur.
Stap 3
Kleurenschema's vergelijken
De zes kleurenschema's (complementair, analoog, triadisch, split-complementair, tetradisch en monochromatisch) worden direct bijgewerkt.
Stap 4
Kleurcode kopiëren
Klik op een kleurvak om de HEX-code te kopiëren. De RGB- en HSL-waarden staan er direct onder.
Stap 5
Kleurenpalet delen
Kopieer de URL uit de adresbalk. De basiskleur staat als ?color=… in de link. Zo kun je het palet later opnieuw openen of doorsturen.
Stap 6
Contrast controleren
Open de basiskleur via ‘Contrast controleren’ in de contrastchecker of bekijk hem in de kleurenblindheidssimulator.
Kleurharmonie
De zes kleurenschema's op een rij
Elke kleurtoon komt overeen met een hoek tussen 0° en 360° op de kleurencirkel. Vijf van de zes kleurenschema's ontstaan door de kleurtoon van de basiskleur met een vaste hoek te verschuiven. De verzadiging en helderheid blijven daarbij gelijk. Het monochromatische schema verandert in plaats daarvan alleen de helderheid.
Complementair
2 kleuren · basiskleur + 180°
De basiskleur en de kleur die er op de kleurencirkel precies tegenover ligt. Maximaal kleurcontrast, geschikt voor accenten zoals knoppen.
Analoog
3 kleuren · −30°, basiskleur, +30°
De basiskleur met de twee direct aangrenzende kleuren op de kleurencirkel. Oogt rustig en harmonieus.
Triadisch
3 kleuren · 0°, 120°, 240°
Drie kleurtonen, gelijkmatig verdeeld over de kleurencirkel. Levendiger dan een analoog schema en toch evenwichtig.
Gesplitst complementair
3 kleuren · basiskleur + complementaire kleur ±30°
In plaats van de complementaire kleur zelf gebruikt dit schema de twee aangrenzende kleuren. Bijna evenveel contrast als een complementair schema, maar met minder spanning.
Tetradisch
4 kleuren · 0°, 90°, 180°, 270°
Twee complementaire kleurparen op 90° afstand. Rijk aan kleuren; werkt het best met één dominante kleur.
Monochroom
5 kleuren · dezelfde kleurtoon, vijf helderheidsniveaus
Kleurtoon en verzadiging blijven gelijk; alleen de helderheid verandert van donker naar licht. Ook bij zeer lichte of zeer donkere basiskleuren blijven de vijf niveaus van elkaar te onderscheiden.
Achtergrond
Complementaire kleur vinden en kleuren combineren
Kleurencirkel voor beeldschermen in plaats van verf
De generator verschuift de kleurtoon op de HSL-kleurencirkel, het kleurmodel voor beeldschermen. Zuiver groen #00FF00 levert daar magenta #FF00FF op, zuiver blauw #0000FF levert geel #FFFF00 op. Op de klassieke kleurencirkel uit de schilderkunst (rood, geel, blauw) zijn de paren daarentegen groen en rood, en blauw en oranje. Beide antwoorden kloppen binnen hun eigen kleurmodel.
Kleuren verdelen in je ontwerp
Een bekende vuistregel is de 60-30-10-regel: ongeveer 60 % hoofdkleur, 30 % secundaire kleur en 10 % accentkleur. De generator past die niet automatisch toe. Je bepaalt zelf welke rol elke kleur in een schema krijgt, bijvoorbeeld de basiskleur als hoofdkleur en de complementaire kleur als accent.
Harmonieus betekent niet leesbaar
Een harmonieus kleurenschema biedt niet automatisch voldoende contrast tussen tekst en achtergrond. Controleer je definitieve combinatie daarom met de contrastchecker voordat je die op een website of in een app gebruikt. De link ‘Contrast controleren’ onder de kleurenschema's stuurt je basiskleur daar rechtstreeks naartoe.
Meer ontdekken
Meer tools voor kleuren en toegankelijkheid
Kleurkiezer
Kleuren direct omzetten tussen HEX, RGB, HSL, HSV en CMYK, de dichtstbijzijnde CSS-kleurnaam vinden en het WCAG-contrast met zwart/wit controleren – volledig in de browser.
Gebouwd door Justin Schuessler
Contrastcontrole
Bereken de WCAG-contrastverhouding tussen twee kleuren live en toets deze aan AA/AAA en UI-componenten, volledig in de browser.
Gebouwd door Justin Schuessler
Kleurenblindheidssimulator
Simuleer live hoe kleurenpaletten en eigen afbeeldingen worden waargenomen bij protanopie, deuteranopie, tritanopie en achromatopsie – volledig berekend in de browser.
Gebouwd door Justin Schuessler
Kleurkiezer voor afbeeldingen
Lees een kleurcode uit een afbeelding af: kleurenpipet met vergrootglas, HEX, RGB en HSL, het kleurenpalet van de afbeelding en een contrastindicatie. De afbeelding blijft in de browser.
Gebouwd door Dimitri Heissler
FAQ
Veelgestelde vragen over Kleurenpaletgenerator
Korte antwoorden over kleurenpaletten, kleurharmonie en deze tool.
Stel in het kleurvlak de verzadiging en helderheid in, pas de kleurtoon aan met de schuifregelaar of voer een HEX-code of RGB-waarden in. Je kunt ook op ‘Willekeurige kleur’ klikken. Alle zes kleurenschema's worden direct bijgewerkt, zonder knop om ze te genereren. Elk kleurvak toont HEX, RGB en HSL; met één klik kopieer je de HEX-code.
Voer je kleur in als HEX-code of RGB-waarden en bekijk het schema ‘Complementair’: het toont je basiskleur en de kleur die er op de kleurencirkel tegenover ligt (kleurtoon 180° verschoven). De generator gebruikt de HSL-kleurencirkel voor beeldschermen: zuiver groen #00FF00 levert magenta #FF00FF op, zuiver blauw #0000FF levert geel #FFFF00 op. Op de klassieke kleurencirkel uit de schilderkunst zouden dat respectievelijk rood en oranje zijn.
Drie kleuren leveren drie van de zes schema's op: triadisch (drie kleurtonen met telkens 120° ertussen, levendig en evenwichtig), analoog (de basiskleur en de aangrenzende kleuren op −30° en +30°, rustig en harmonieus) en split-complementair (de basiskleur plus de twee kleuren naast de complementaire kleur, contrastrijk met minder spanning). Voer je basiskleur in en vergelijk ze alle drie naast elkaar.
Een monochromatisch kleurenschema houdt dezelfde kleurtoon en verzadiging en verandert alleen de helderheid. De generator maakt vijf helderheidsniveaus van donker naar licht, die ook bij zeer lichte of zeer donkere basiskleuren van elkaar te onderscheiden blijven. Het resultaat oogt subtiel en samenhangend, bijvoorbeeld voor achtergronden en vlakken.
Harmonieus betekent niet automatisch goed leesbaar: vooral tekst- en achtergrondkleuren met te weinig verschil in helderheid zijn problematisch. Controleer je combinatie daarom vóór gebruik met de contrastchecker. De link ‘Contrast controleren’ onder de kleurenschema's stuurt je basiskleur daar rechtstreeks naartoe.
De 60-30-10-regel is een vuistregel uit de vormgeving: ongeveer 60 % hoofdkleur, 30 % secundaire kleur en 10 % accentkleur. De generator past die niet automatisch toe. Je verdeelt de kleuren van een schema zelf, bijvoorbeeld de basiskleur als hoofdkleur en de complementaire kleur als accent.
Ja. De basiskleur staat automatisch als parameter in de URL, bijvoorbeeld ?color=3b82f6. Kopieer de URL uit de adresbalk: wie de link opent, ziet dezelfde basiskleur en dezelfde zes kleurenschema's. Je hebt hiervoor geen account nodig.
De kleurenpaletgenerator is gratis en zonder registratie te gebruiken. Alle kleuren worden in je browser berekend. Je kleurkeuze wordt niet opgeslagen of naar een server verzonden. Als je het tabblad sluit, kun je het palet alleen terugvinden via een link die je eerder hebt gekopieerd.
Nog vragen?
Contact opnemen met supportOp zoek naar een server voor je volgende project?
Een ZAP-Hosting VPS geeft je volledige controle over je eigen infrastructuur, inclusief eigen SSH-toegang, firewall en volledige roottoegang.
Geen installatie. Geen risico. Binnen enkele seconden online.
Op zoek naar meer tools? Alle beeld- en ontwerptools bekijken
Voorkeursbron bij Google
