Zo gebruik je Kleurenpalet & contrastchecker
- 1
Begin met een kleur
Typ of kies een basiskleur en kies een harmonie zoals analoog, triadisch of gesplitst complementair – of laat een willekeurig palet schudden.
- 2
Vergrendel en verfijn
Vergrendel de kleurstalen die je mooi vindt voordat je opnieuw schudt, pas elk kleurstaal direct aan of haal de vijf dominante kleuren uit een foto.
- 3
Controleer de leesbaarheid
Open Contrast om tekst op achtergrond te testen tegen WCAG 2.2 AA en AAA, pas een voorgestelde oplossing toe en bekijk het palet voor kleurenblindheid.
- 4
Exporteren
Kopieer CSS-variabelen, een Tailwind v4-thema of v3-config, SCSS of JSON met tinten van 50–950, of download PNG-kleurstalen.
Limieten en Pro
Alles is gratis: paletten van 5 kleuren, 6 harmonieën, onbeperkt schudden en exporteren, afbeeldingen tot 50 MB voor kleurextractie, PNG-kleurstalen van 1600 pixels breed.
Over Kleurenpalet & contrastchecker
De kleurenpalet-generator bouwt een kleurenschema van vijf kleuren en alles wat een designsysteem eromheen nodig heeft. Harmonieën draaien de basistint rond op het HSL-kleurenwiel: analoog gaat 30° naar beide kanten, complementair voegt de tegenovergestelde tint toe, gesplitst complementair neemt de twee tinten naast de tegenovergestelde, triadisch verdeelt drie tinten op 120° afstand, tetradisch gebruikt een vierkant van 90° en monochroom houdt één tint aan in vijf helderheidsniveaus. De willekeurige modus houdt rekening met vergrendelde kleurstalen en de afbeeldingsoptie groepeert de pixels van een foto in OKLab om de vijf meest voorkomende, duidelijk verschillende kleuren te vinden.
Voor elke kleur maakt het tabblad Tinten een reeks van 11 stappen van 50–950 in OKLCH, waarbij de stap die het dichtst bij je kleur ligt de exacte waarde is, of de 13 tonen van het Material 3 HCT-systeem samen met de vijf sleutelpaletten die een Material-thema zou afleiden. De contrastcontrole gebruikt de WCAG 2.2-luminantieformule, rondt een verhouding nooit omhoog af en stelt de dichtstbijzijnde geslaagde kleur voor door alleen de helderheid te wijzigen, zodat de tint behouden blijft. Een raster toont de verhouding van elk paar in het palet tegen wit en zwart.
De simulaties omvatten protanopie, deuteranopie, tritanopie en achromatopsie met de Machado-matrices en markeren kleurstalen die in elkaar overlopen. Exports noemen kleuren naar hun tint en accepteren je eigen namen. De tool beoordeelt niet of kleuren bij een merk passen, en simulaties benaderen hoe mensen met een kleurenzichtstoornis zien; ze vervangen niet het testen met die mensen zelf.
Privacy
Alle kleurberekeningen, contrastcontroles en beeldanalyse gebeuren in dit tabblad: een foto die je voor kleuren gebruikt, wordt van je schijf in een klein canvas gelezen en nooit geüpload. Het palet kan in het paginaadres worden opgeslagen, zodat een gekopieerde link het weer opent; er wordt niets op een server bewaard.
Functies
Zes harmonieën en afbeeldingskleuren
Van analoog tot tetradisch vanuit één basiskleur, willekeurig schudden met vergrendeling, of de dominante kleuren van een foto.
WCAG 2.2-contrast met oplossingen
AA en AAA voor normale en grote tekst plus UI-graphics, met de dichtstbijzijnde geslaagde kleur met één klik.
Exports voor ontwikkelaars
CSS-variabelen, Tailwind v4 en v3, SCSS en JSON in HEX, RGB, HSL of OKLCH, plus PNG-kleurstalen.