Kleurenpalet Generator

Advertentie

Maak prachtige kleurpaletten met harmonieën, Material Design-tinten en meerdere exportformaten.

?Maakt paletten op basis van kleurenwielrelaties (complementair, analoog, triadisch, enz.). Kleuren zijn wiskundig gerelateerd voor visueel evenwicht.
?Genereer paletten op stemming, thema of zoekwoord. Pas de temperatuur- en energieschuifbalken aan.
?Genereert esthetisch aantrekkelijke willekeurige paletten met gulden-snit-verdeling. Stel een seedwaarde in om later hetzelfde palet te reproduceren.
?Maakt een tonaal palet met 10 tinten (50-900) op basis van Material Design-principes. Ideaal voor UI-ontwerp met een consistente licht-naar-donker-overgang.
?Genereert een palet met semantische rollen: primair, secundair, succes, waarschuwing, fout en info. Kleuren worden geharmoniseerd naar uw primaire kleur volgens Material Design 3-principes — elke semantische tint wordt subtiel aangepast voor een samenhangend geheel.
Druk op Spatie om met een willekeurige kleur opnieuw te genereren
Koel Warm
Temperatuur
Rustig Levendig
Energie
Rollen Alles selecteren | Geen

Palette

?Klik op een kleurstaal om de HEX-code te kopiëren. Gebruik deze kleuren in uw CSS, designtools of stijlgidsen.

Toegankelijkheid

?Controleer of kleurencombinaties voldoen aan de WCAG-contrastrichtlijnen (4,5:1 voor AA). Gebruik de kleurenblindheidsimulatie om te zorgen dat uw palet voor alle gebruikers werkt.
Verhouding: Helderheidsverschil tussen kleuren (hoger is beter voor leesbaarheid) AA: Minimaal 4,5:1 voor normale tekst, 3:1 voor grote tekst (WCAG Niveau AA) AAA: Verbeterd: 7:1 voor normale tekst, 4,5:1 voor grote tekst (WCAG Niveau AAA)
?Normaal kleurenzicht (trichromasie). Toont hoe het palet eruitziet voor mensen met typisch kleurenzicht.
?Roodblindheid (protanopie). Treft ~1% van de mannen. Rood lijkt donkerder en rood-groen-onderscheidingen zijn moeilijk. Test uw palet op toegankelijkheid.
?Groenblindheid (deuteranopie). De meest voorkomende vorm, treft ~6% van de mannen. Groenperceptie is verminderd, rood-groen-verwarring komt vaak voor.
?Blauwblindheid (tritanopie). Zeldzaam, treft <0,01% van de mensen. Blauw-geel-verwarring treedt op. Kleuren lijken meer roze/groen getint.

Schaduwsjablonen

?Tinten voegen wit toe (lichter), schaduwen voegen zwart toe (donkerder), transparantie maakt doorschijnende varianten. Gebruik deze voor hoverstaten, achtergronden en visuele hiërarchie.
Weergave:
Opnemen in export: ?Selecteer welke informatie u wilt opnemen bij het exporteren naar PNG, PDF of HTML. Code-exports (CSS, SCSS, JSON) bevatten altijd de geselecteerde opties.
Advertentie

Over deze tool

De kleurpalet-generator is een professioneel ontwerpgereedschap waarmee ontwerpers, ontwikkelaars en kunstenaars visueel harmonieuze kleurenschema's kunnen maken, gebaseerd op eeuwen kleurtheorie. Het ondersteunt negen verschillende kleurharmonierelaties van het kleurenwiel: complementair, analoog, triadisch, tetradisch, gesplitst complementair, monochromatisch, dubbel complementair, contrast en pentadisch. Elk harmonietype produceert wiskundig nauwkeurige kleurcombinaties voor visueel evenwicht. Kleurtheorie als formele discipline vindt zijn oorsprong in Sir Isaac Newtons publicatie "Opticks" uit 1704, waarin hij kleuren voor het eerst in een cirkeldiagram rangschikte. Het moderne kleurenwiel werd verder verfijnd door kunstenaars en wetenschappers waaronder Johann Wolfgang von Goethe, Michel Eugene Chevreul en Johannes Itten aan de Bauhaus-school. Verken deze concepten via de kleurtheoriebronnen van de Interaction Design Foundation en de W3C WCAG 2.1 contrastrichtlijnen. Naast traditionele harmonieen genereert deze tool Material Design tonale paletten met 10 gekalibreerde tinten (50 tot 900), willekeurige paletten met gulden-snit-verdeling en complete semantische ontwerpsystemen met rollen zoals primair, secundair, succes, waarschuwing en fout. Ingebouwde WCAG-toegankelijkheidscontrole waarborgt dat uw kleurkeuzes aan contrastvereisten voldoen, terwijl kleurenblindheidsimulatie onthult hoe ongeveer 8% van de mannen en 0,5% van de vrouwen uw palet zullen waarnemen. Exporteer naar CSS, SCSS, Tailwind, JSON, Markdown, PNG, PDF of DOCX. Alle verwerking vindt lokaal in uw browser plaats.

Bronnen: W3C

Hoe te gebruiken

  1. Kies een generatiemodus: Harmonie (kleurenwielrelaties), Willekeurig (gulden snede), Material (tonale tinten) of Semantisch (ontwerpsysteem).
  2. Stel uw basiskleur in met de kleurkiezer of door een HEX-code in te voeren. Voor willekeurige paletten kunt u optioneel een seedwaarde instellen voor reproduceerbare resultaten.
  3. Bekijk uw palet, controleer de toegankelijkheidscontrastwaarden en exporteer in uw gewenste formaat (CSS, SCSS, Tailwind, JSON, HTML, PDF of PNG).

De Wetenschap van Kleurharmonie

De menselijke waarneming van kleurharmonie wordt al eeuwenlang bestudeerd en verbindt kunst, natuurkunde en neurowetenschappen. Toen Isaac Newton in 1666 wit licht door een prisma splitste, onthulde hij het zichtbare spectrum en legde hij de basis voor het begrijpen van hoe kleuren zich tot elkaar verhouden. Zijn rangschikking van deze spectraalkleuren in een wiel werd de basis voor alle kleurharmoniesystemen die volgden. In het begin van de 19e eeuw ontdekte de Franse chemicus Michel Eugene Chevreul de wet van het gelijktijdig contrast terwijl hij werkte bij de Gobelins-tapijtmanufactuur. Hij observeerde dat aangrenzende kleuren elkaars waargenomen verschijning beinvloeden, waardoor naburige kleuren verschuiven naar elkaars complement. Deze ontdekking beinvloedde de impressionistische schilders diepgaand en blijft fundamenteel voor het begrijpen waarom bepaalde kleurcombinaties evenwichtig aanvoelen. De Bauhaus-school (1919-1933) formaliseerde kleurtheorie voor design-educatie door het werk van Johannes Itten, Josef Albers en Wassily Kandinsky. Ittens zeven kleurcontrasten (tint, licht-donker, koud-warm, complementair, simultaan, verzadiging en uitbreiding) boden een systematisch raamwerk dat ontwerpers nog steeds raadplegen. Albers toonde later in "Interaction of Color" aan dat kleur inherent relatief is en dat identieke kleuren er volledig anders uit kunnen zien afhankelijk van hun context. Moderne kleurwetenschap bouwt voort op de CIE 1931-kleurruimte, die menselijke kleurwaarneming wiskundig in kaart brengt. De CIELAB-kleurruimte uit 1976 modelleert perceptuele uniformiteit zodat gelijke numerieke veranderingen overeenkomen met gelijke waargenomen verschillen. Deze wetenschap ondersteunt tools zoals WCAG-contrastcontrole, waar de relatieve luminantieformule zorgt dat kleurcombinaties voldoende leesbaarheid bieden. Vandaag leiden deze principes de creatie van ontwerpsystemen die door miljarden mensen worden gebruikt bij bedrijven als Google, Apple en Microsoft.

Je resultaten begrijpen

Bij het beoordelen van een gegenereerd palet, overweeg het visuele gewicht en de emotionele impact van elke kleur. Warme kleuren (rood, oranje, geel) neigen ertoe visueel naar voren te komen en energie te creeren, terwijl koele kleuren (blauw, groen, paars) terugwijken en rust oproepen. Een goed uitgebalanceerd palet gebruikt doorgaans een dominante kleur voor 60% van het ontwerp, een secundaire kleur voor 30% en een accent voor 10%. De contrastverhouding-nummers in het toegankelijkheidspaneel geven de leesbaarheid aan. Een verhouding van 4,5:1 of hoger (AA geslaagd) betekent dat het kleurenpaar veilig is voor lopende tekst. Verhoudingen tussen 3:1 en 4,5:1 zijn alleen geschikt voor grote tekst (18pt of 14pt vet). Verhoudingen onder 3:1 moeten worden vermeden voor tekstinhoud. Bij het bekijken van kleurenblindheidsimulaties, let vooral op of de belangrijkste onderscheidingen van uw palet zichtbaar blijven. Als twee semantisch verschillende kleuren (zoals succes-groen en fout-rood) identiek lijken onder deuteranopie-simulatie, overweeg dan secundaire aanwijzingen zoals pictogrammen, patronen of tekstlabels toe te voegen.

Hoe te gebruiken

  1. Kies een generatiemodus: Harmonie (kleurenwielrelaties), Willekeurig (gulden snede), Material (tonale tinten) of Semantisch (ontwerpsysteem).
  2. Stel uw basiskleur in met de kleurkiezer of door een HEX-code in te voeren. Voor willekeurige paletten kunt u optioneel een seedwaarde instellen voor reproduceerbare resultaten.
  3. Bekijk uw palet, controleer de toegankelijkheidscontrastwaarden en exporteer in uw gewenste formaat (CSS, SCSS, Tailwind, JSON, HTML, PDF of PNG).

Methodologie

Kleurharmonieen worden berekend met nauwkeurige HSL-transformaties (Tint, Verzadiging, Helderheid) op het kleurenwiel. De tintcomponent wordt geroteerd met specifieke graadintervallen voor elk harmonietype: 180 graden voor complementair, 30 graden voor analoog, 120 graden voor triadisch, 90 graden voor tetradisch en 72 graden voor pentadisch. Gesplitst complementair combineert de basis met twee kleuren naast het complement bij 150 en 210 graden. Material Design tonale paletten worden gegenereerd door de helderheid en verzadiging van de basiskleur systematisch aan te passen over tien gekalibreerde stappen. Lichtere tinten (50-300) verlagen de verzadiging licht terwijl de helderheid toeneemt, en donkerdere tinten (600-900) verlagen de helderheid terwijl de verzadiging behouden of licht verhoogd wordt om kleurrijkheid te bewaren. Willekeurige paletgeneratie gebruikt de gulden hoek (ongeveer 137,5 graden), afgeleid van de gulden snede (phi = 1,618), om tinten gelijkmatig over het kleurenwiel te verdelen. Toegankelijkheidsvalidatie volgt de WCAG 2.1 relatieve luminantieformule, die contrastwaarden berekent tussen voorgrond- en achtergrondkleuren. Kleurenblindheidsimulatie past klinisch gevalideerde transformatiematrices toe die de kegelresponsfuncties van protanopie, deuteranopie en tritanopie modelleren.

Praktische voorbeelden

Een tech-startup zou een triadisch palet kunnen gebruiken met een levendig blauw (#2563EB), warm oranje accent (#EA580C) en fris groen voor succestoestanden (#16A34A). Dit creert een dynamische, energieke merkidentiteit met behoud van duidelijke visuele hierarchie. Een e-commerce modesite zou een analoog palet van zachte roze en mauve tinten kunnen gebruiken voor een luxueus gevoel, met een enkel complementair goud accent voor actieknoppen. Een gezondheidszorgapplicatie profiteert van een monochromatisch blauw palet dat vertrouwen en professionaliteit uitstraalt, met semantisch rood exclusief gereserveerd voor kritieke waarschuwingen en foutstatussen.

Tips en Best Practices

Begin met de primaire kleur van uw merk en bouw uit met harmonieen. Analoge paletten voelen samenhangend en rustig aan, terwijl complementaire paletten levendig contrast creeren. Voor de meeste webprojecten volstaat een palet van 5-7 kleuren in combinatie met tinten en schaduwen. Test uw palet altijd tegen zowel witte als donkere achtergronden. Een kleur die er perfect uitziet op wit kan impact verliezen in donkere modus. Gebruik de schaduwsjablonen om tinten en schaduwen te genereren die in beide contexten werken. Beperk verzadigde kleuren tot accentelementen zoals knoppen en links. Grote gebieden met sterk verzadigde kleur veroorzaken visuele vermoeidheid. Gebruik in plaats daarvan onverzadigde versies voor achtergronden en containers, en reserveer volledige verzadiging voor interactieve elementen.

Bronnen

Alle berekeningen worden lokaal in je browser uitgevoerd. Er worden geen gegevens naar een server gestuurd.

Deze tool insluiten

Code ophalen →

Was deze tool nuttig?
Wil je ons meer vertellen?
0/500
Wil je dat we contact opnemen?
Bedankt voor je feedback!

Veelgestelde vragen
Wat zijn kleurharmonieën?
Kleurharmonieën zijn combinaties van kleuren gebaseerd op hun posities op het kleurenwiel. We bieden 9 harmonietypen: Complementair (180° uit elkaar), Analoog (naburig, ±30°), Triadisch (120° uit elkaar), Tetradisch (90° vierkant), Gesplitst Complementair (basis + twee naast het complement), Monochromatisch (variaties van één tint), Dubbel Complementair (twee naburig + hun complementen), Contrast (opzettelijke spanning bij 90°) en Pentadisch (vijf kleuren, 72° uit elkaar).
Wat is een Material Design tonaal palet?
Material Design tonale paletten bestaan uit 10 tinten van één kleur, genummerd van 50 (lichtst) tot 900 (donkerst). Dit omvat: 50, 100, 200, 300, 400, 500 (basis), 600, 700, 800 en 900. Dit systeem biedt consistente lichte en donkere varianten voor UI-ontwerp en zorgt voor goed contrast en visuele hiërarchie.
Hoe zorg ik dat mijn kleuren toegankelijk zijn?
Gebruik het toegankelijkheidspaneel om WCAG-contrastwaarden te controleren. Voor normale tekst moet het contrast minimaal 4,5:1 zijn (AA-niveau). Voor grote tekst (18pt+) is 3:1 voldoende. Voor AAA-naleving streeft u naar 7:1 voor normale tekst. Onze tool toont de status geslaagd/niet geslaagd voor elke kleurcombinatie en simuleert hoe kleurenblinde gebruikers uw palet zien.
Welke exportformaten zijn beschikbaar?
Exporteer uw palet als: CSS custom properties (:root-variabelen), SCSS/Sass-variabelen, Tailwind CSS-configuratie, JSON-gegevens, Markdown-documentatie, PNG-afbeelding, PDF-document met kleurdetails of DOCX Word-document. Elk formaat is geoptimaliseerd voor het beoogde gebruik in ontwikkeling of ontwerpdocumentatie.
Worden mijn gegevens naar een server gestuurd?
Nee. Alle paletgeneratie en kleurberekeningen gebeuren volledig in uw browser met JavaScript. Er worden geen kleurgegevens, voorkeuren of paletten naar een server verzonden. Uw kleurkeuzes blijven volledig privé op uw apparaat.
Kan ik later hetzelfde palet reproduceren?
Ja. Voor op harmonie gebaseerde paletten voert u dezelfde basiskleur in en selecteert u hetzelfde harmonietype voor identieke resultaten. Voor willekeurige paletten gebruikt u de seedwaarde om exact hetzelfde palet op elk moment te reproduceren. U kunt uw palet ook exporteren als JSON of CSS en opslaan voor toekomstig gebruik.