Kleurenkiezer & paletgenerator

Elke kleur op een scherm is op drie manieren te beschrijven, en deze tool houdt ze alle drie gelijk: HEX is de verkorte notatie in CSS en ontwerptools, RGB beschrijft hoeveel rood, groen en blauw licht samen de kleur vormen, en HSL — tint, verzadiging, helderheid — beschrijft de kleur zoals mensen er echt over denken: welke tint het is, hoe levendig en hoe licht of donker. Sleep het ingebouwde kleurvlak, typ een HEX-code of pas direct een R/G/B- of H/S/L-veld aan, en alle andere velden worden meteen bijgewerkt. Zo schakel je tussen de manieren van denken waaraan je gewend bent, zonder zelf te rekenen.

Het kleurenwiel vormt de basis van zes klassieke harmonieregels, die allemaal automatisch worden gegenereerd uit de basiskleur die je kiest. Complementair combineert een kleur met zijn tegenovergestelde voor maximaal contrast; analoog kiest buren op het wiel voor een rustige, samenhangende look; triadisch en tetradisch verdelen drie of vier kleuren gelijkmatig over het wiel voor een levendig maar toch evenwichtig palet; gesplitst complementair verzacht een complementair paar door de twee kleuren naast het tegenovergestelde te gebruiken in plaats van het tegenovergestelde zelf; en monochroom blijft bij één tint en varieert alleen de helderheid — vaak de veiligste keuze voor een interface die één consistente merkkleur in meerdere tinten nodig heeft.

Niet elk goed palet begint bij kleurentheorie — soms wil je gewoon zien wat er opduikt. De generator voor willekeurige paletten (druk op de spatiebalk of klik op Genereren) maakt in één keer vijf kleuren, met tinten en helderheid die zijn afgestemd om modderige of te pastelachtige resultaten te vermijden. Klik op het slotje van een kleurvlak dat je wilt houden en genereer opnieuw: alleen de ontgrendelde kleuren veranderen, zodat je stap voor stap een palet opbouwt, net als in tools zoals Coolors. Klik op een kleurvlak om de HEX-code te kopiëren, of gebruik de knoppen onder het palet om de hele set te kopiëren als CSS custom properties, SCSS-variabelen, een Tailwind-configfragment of een JSON-array, of om een Adobe .ase-kleurenstaalbestand voor Illustrator en Photoshop te exporteren. Je kunt ook een palet uit een willekeurige afbeelding halen (lokaal verwerkt, nooit geüpload) en paletten die je mooi vindt in je browser bewaren voor later.

Een mooie kleur kiezen is niet hetzelfde als een bruikbare kleur kiezen — tekst in een kleur die qua helderheid te dicht bij de achtergrond ligt, kan onleesbaar zijn, en de Web Content Accessibility Guidelines (WCAG) stellen daarvoor concrete drempels: een contrastverhouding van minstens 4,5:1 voor normale tekst om niveau AA te halen, en 7:1 voor het strengere niveau AAA. De contrastcontrole berekent de exacte verhouding tussen je gekozen kleur en zowel witte als zwarte tekst met dezelfde relatieve-luminantieformule uit de WCAG-specificatie, en geeft aan of elke combinatie voldoet, zodat je een knop of kop met te weinig contrast ontdekt vóórdat hij live gaat in plaats van erna.