Gratis Tool
Kleurenpalet Generator
Vul één merkkleur in en krijg een volledig, toegankelijk palet: een licht-naar-donker schaduw-reeks, een bijpassend accent, een neutrale grijsschaal en echte WCAG-contrastverhoudingen voor elke kleur, live berekend in je browser.
Schaduw-reeks
Je basiskleur lichter en donkerder gemaakt in 10 stappen, steeds dezelfde tint en verzadiging, berekend via echte HSL-lichtheid-interpolatie. Gebruik lichtere stappen voor achtergronden en hover-states, donkerdere stappen voor tekst en randen.
Accentkleur
Een tweede, andere tint voor de hierboven geselecteerde harmoniemodus, handig wanneer je een echt contrasterend accent nodig hebt in plaats van nog een tint van je merkkleur.
Neutrale schaal
Een grijsschaal afgeleid van de tint van je merkkleur bij lage verzadiging, zodat achtergronden, randen en gedempte tekst als onderdeel van hetzelfde palet voelen in plaats van een generiek standaardgrijs.
Exporteren
#965829 vs witte tekst: 5.64:1 · #965829 vs zwarte tekst: 3.72:1
Wat berekent deze tool eigenlijk?
Vul één hexkleur in en deze tool voert echte kleurwiskunde volledig uit in je browser: het zet je kleur om naar HSL en interpoleert lichtheid over 10 stappen om een tint/schaduw-reeks te bouwen, draait de tint 180 graden (of 120/240 voor triadisch, of ±30 voor analoog) om een echte accentkleur te berekenen, en leidt een neutrale schaal met lage verzadiging af van dezelfde tint voor achtergronden en bodytekst. Niets hier is een opzoektabel met vooraf ingestelde paletten: elke kleur wordt berekend op basis van de exacte kleur die je hebt ingevoerd.
Waarom is een consistent, toegankelijk palet belangrijk voor een klein bedrijf?
Een merk dat bewust dezelfde vijf of zes kleuren gebruikt op zijn site, facturen en social posts oogt gevestigder en betrouwbaarder dan een merk dat steeds een net iets andere tint kiest op het oog. Toegankelijkheid versterkt dat vertrouwenssignaal direct: tekst die niet aan de WCAG-contrastrichtlijnen voldoet, is aantoonbaar moeilijker te lezen voor gebruikers met slechtziendheid of kleurenblindheid, en in verschillende rechtsgebieden is toegankelijk contrast een wettelijke vereiste voor publieksgerichte sites, niet zomaar een leuke extra. De reeks en het contrast in één keer goed doen, vóór een site live gaat, is veel goedkoper dan het achteraf herstellen.
WebAIM's contrastchecker, voor een tweede mening over elk kleurenpaarVeelgestelde vragen
Hoe weet ik of mijn merkkleuren toegankelijk zijn?
Controleer de daadwerkelijke contrastverhouding tussen je tekstkleur en de achtergrond, niet alleen hoe het eruitziet op je scherm. De WCAG 2.1-standaard vereist minimaal 4,5:1 voor normale bodytekst en 3:1 voor grote tekst (18pt of 14pt vet en groter) om het AA-niveau te halen waar de meeste toegankelijkheidswetten naar verwijzen. Deze tool berekent die exacte verhouding voor elke tint tegen zowel witte als zwarte tekst, zodat je kunt zien welke combinaties écht slagen voordat je ze sitebreed vastlegt.
Waarom genereert de tool een grijsschaal in plaats van gewoon grijs te gebruiken?
Een puur grijs zonder verzadiging naast een warme of koele merkkleur oogt vaak net niet passend, een klein maar echt polish-signaal dat bezoekers oppikken, ook al kunnen ze het niet benoemen. Door de neutrale schaal af te leiden van de tint van je basiskleur bij lage verzadiging, voelen achtergronden, randen en gedempte tekst als onderdeel van dezelfde palet in plaats van een generieke standaard die achteraf is toegevoegd.
Wat is het verschil tussen de tint/schaduw-reeks en de complementaire kleur?
De tint/schaduw-reeks is je ene basiskleur lichter en donkerder gemaakt in stappen, handig voor hover-states, achtergronden en tekst met verschillende gewichten terwijl het herkenbaar "on brand" blijft. De complementaire kleur is een tweede, andere tint (berekend door 180 graden rond het kleurenwiel te draaien), handig wanneer je een echt accent nodig hebt dat contrasteert met je hoofdkleur in plaats van nog een tint van dezelfde kleur.