Kleureneditor
Pas kleuren nauwkeurig aan. Wijzig tint, verzadiging en helderheid, genereer kleurenschalen en controleer het toegankelijkheidscontrast voor tekst.
Over deze tool
De Kleureneditor is een volledig hulpmiddel om elke kleur nauwkeurig aan te passen en te verfijnen. Voer een kleur in als HEX, RGB, HSL of zelfs als naam en gebruik de schuifregelaars voor Tint (de kleurschakering), Verzadiging (de kleurintensiteit) en Helderheid (hoe licht of donker de kleur is). Wijzigingen worden in realtime toegepast, zodat je het resultaat direct ziet en de leesbaarheid met lichte en donkere tekst kunt controleren. Bovendien converteert het hulpmiddel de kleur automatisch naar de meest gebruikte formaten in webdesign en -ontwikkeling, waaronder HEX, RGB, HSL, HSV en OKLCH.
Functies
Waarvoor Je de Kleureneditor Kunt Gebruiken
- Consistente paletten maken voor design systems, componenten en webinterfaces
- Controleren of kleurencombinaties voldoen aan de WCAG- en APCA-toegankelijkheidscriteria vóór publicatie
- Merkkleuren aanpassen voor verschillende contexten zoals donkere modus, hover en uitgeschakelde staten
- Kleurenschalen in Tailwind-stijl genereren voor export als CSS-variabelen of designtokens
- Kleuren converteren tussen HEX, RGB, HSL en OKLCH bij het combineren van verschillende ontwerp- en ontwikkeltools
Hoe Je de Kleureneditor Gebruikt
Voer de basiskleur in
Typ een willekeurige HEX-waarde, RGB, HSL of kleurnaam in het veld Basiskleur. Het hulpmiddel laadt de kleur automatisch en converteert deze naar alle beschikbare formaten
Pas aan met de schuifregelaars
Gebruik de regelaars voor Tint, Verzadiging en Helderheid om de kleur in realtime te wijzigen. Alle uitvoerwaarden en de kleurenschaal worden direct bijgewerkt
Controleer het contrast
De toegankelijkheidssectie toont de contrastverhouding met witte en zwarte tekst volgens WCAG 2.1 en APCA, met vermelding of de combinatie slaagt of mislukt
Kopieer de waarden
Klik op een formaatblok (RGB, HSL, HSV, OKLCH) om de waarde direct te kopiëren. De HEX-waarde wordt weergegeven in de hoofdvoorbeeldweergave
Exporteer de kleurenschaal
Kies in de sectie Tints & Shades het exportformaat (CSS, SCSS, JSON, Tailwind) en het kleurformaat (HEX, RGB, HSL of OKLCH). Klik op Kopiëren om het in je project te gebruiken
Veelgestelde Vragen
WCAG 2.1 gebruikt een eenvoudige wiskundige formule om het contrast tussen kleuren te berekenen. APCA (Accessible Perceptual Contrast Algorithm) is een moderner model dat rekening houdt met hoe het menselijk oog helderheid waarneemt in verschillende leescontexten. Voor normale lopende tekst wordt een APCA-waarde van 60 of hoger als voldoende beschouwd.
Selecteer het Tailwind-exportformaat en het gewenste kleurformaat. De gegenereerde code kan direct in tailwind.config.js of als CSS custom properties worden geplakt. Bij gebruik van OKLCH is het native compatibel met Tailwind 4.
OKLCH is een perceptueel uniforme kleurruimte — dat wil zeggen dat het wijzigen van helderheid of chroma visueel voorspelbare resultaten oplevert. Het is het formaat dat intern door Tailwind 4 en CSS Color Level 4 wordt gebruikt en is ideaal voor het genereren van kleurenschalen die perceptueel consistenter zijn dan HSL.