𝗙𝗿𝗲𝗲𝗧𝗼𝗼𝗹 DEV

Kleurenpalet Generator

Maak harmonieuze kleurenpaletten online. Genereer willekeurige of thematische kleuren, vergrendel je favorieten, bekijk kleurenschalen, controleer contrast en simuleer kleurenblindheid, en exporteer in CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL of OKLCH.

Klik op een palet om het in de editor te openen

Kleur bewerken

Over deze tool

Maak harmonieuze kleurenpaletten in enkele seconden. Blader door de galerie met automatisch gegenereerde paletten of open de editor om variaties te maken, favoriete kleuren te vergrendelen, het aantal kleuren aan te passen en te exporteren voor je projecten. Kleuren worden berekend in de perceptuele Okhsl-kleurruimte, die tonen visueel in balans houdt en veelvoorkomende vertekeningen van traditionele HSL vermijdt.

Belangrijkste functies

Genereer willekeurige of thematische paletten — pastel, levendig, donker, vintage en aarde
Vergrendel favoriete kleuren, genereer nieuwe variaties en pas de paletgrootte aan
Bekijk perceptuele kleurenschalen, controleer WCAG-contrast en simuleer kleurenblindheid
Exporteer in HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON of Tailwind en deel via link

Veelvoorkomende toepassingen

  • Nieuwe paletten en combinaties ontdekken voor interfaces en design systems, met perceptueel gebalanceerde en gebruiksklare tinten
  • Kleurenschema's definiëren voor presentaties, posts en marketingmateriaal met visuele harmonie
  • Kleurwaarden in HEX, RGB, HSL of OKLCH direct naar CSS kopiëren, zonder kleuren handmatig te berekenen
  • Verschillende kleurharmonieën (analoog, monochromatisch, complementair, triadisch, tetradisch) testen bij interface-redesigns vóór de definitieve afronding
  • Contrasttoegankelijkheid controleren en visualiseren hoe het palet eruitziet voor mensen met kleurenblindheid

Hoe te gebruiken

1

Blader door de galerie

De pagina opent met meerdere automatisch gegenereerde paletten. Kies tussen de willekeurige en thematische modus, druk op de spatiebalk om nieuwe opties te genereren, of klik op 'Meer laden' om de galerie uit te breiden.

2

Openen in de editor

Klik op een palet om het in de editor te openen. Vergrendel de kleuren die je wilt behouden en genereer opnieuw om alleen de andere te variëren.

3

Aanpassen en exporteren

Pas het aantal kleuren aan, bekijk kleurenschalen, controleer contrast en kleurenblindheid, en exporteer in het gewenste formaat of deel via link.

Technische notities

Enkele details helpen te begrijpen hoe kleuren worden gegenereerd en waarom ze in balans blijven:

Kleuren worden gegenereerd in de Okhsl-ruimte, die perceptueel uniform is: het variëren van helderheid produceert visueel gelijkmatige stappen, in tegenstelling tot HSL waar dezelfde helderheidswaarde bij geel lichter lijkt dan bij blauw
Door op 'kleurenschaal bekijken' van een kleur te klikken, wordt een ramp van 50 tot 900 gegenereerd waarbij tint en verzadiging vast blijven en alleen de perceptuele helderheid varieert — klaar voor design-systeemschalen en kopieerbaar als CSS of Tailwind
De contrastcontrole gebruikt de WCAG-verhouding tussen de kleur en de leesbare tekst erop; het AA-badge geeft een verhouding van minstens 4,5:1 aan
De simulatie van kleurenblindheid is een benadering voor een snelle controle en vervangt geen tests met echte gebruikers

Veelgestelde vragen

Hoe maak ik een kleurenpalet?

De pagina opent al met meerdere automatisch gegenereerde paletten. Druk op de spatiebalk (of de knop Nieuwe genereren) om er meer te maken, of kies een thema zoals pastel of donker. Door op een palet te klikken, opent de editor om kleuren te vergrendelen en naar wens aan te passen.

Wat is het verschil tussen de willekeurige en de thematische modus?

In de willekeurige modus kunnen kleuren van elk punt van het spectrum komen. In de thematische modus is de generatie gericht op een specifiek uiterlijk — pastel gebruikt lichte en zachte kleuren, donker gebruikt tinten met lage helderheid, vintage gebruikt verouderde en verzadigingsarme tinten, enzovoort.

Wat is de Okhsl-kleurruimte en waarom is die belangrijk?

Okhsl is een perceptueel uniform kleurmodel. In de praktijk betekent dit dat het aanpassen van de helderheid van een kleur veranderingen produceert die het oog als gelijkmatige stappen ervaart, wat resulteert in meer gebalanceerde paletten en tinten dan traditionele HSL — vooral bij het vergelijken van zeer verschillende kleuren zoals geel en blauw.

Hoe sla ik een palet op of deel ik het?

In de editor kopieert de knop Delen een link met de kleuren gecodeerd in de URL. Iedereen die die link opent, ziet exact hetzelfde palet in de editor. Je kunt de kleuren ook exporteren als CSS, SCSS, JSON, Tailwind of als HEX-lijst.

Zie ook