Kleurenpalet genereren vanuit één basiskleur
Met deze kleurenpalet generator maak je vanuit een HEX-kleur direct een complementair, analoog, triadisch, gesplitst complementair, tetradisch of monochromatisch palet. Kies een kleur met de kleurkiezer of voer een code zoals #3B82F6 in. Daarna kun je iedere kleur afzonderlijk kopiëren of alle HEX-codes als CSS-variabelen gebruiken.
HEX, RGB en HSL begrijpen
Een HEX-kleur beschrijft rood, groen en blauw met zes hexadecimale tekens. #FF0000 is volledig rood, terwijl #000000 zwart is. RGB toont dezelfde kanalen als waarden van 0 tot 255. HSL beschrijft kleurtoon, verzadiging en lichtheid en is daardoor praktisch voor het maken van kleurvariaties.
De generator zet de basiskleur om van HEX naar RGB en vervolgens naar HSL. Voor harmonieën wordt vooral de kleurtoon over de kleurcirkel verschoven, terwijl verzadiging en lichtheid grotendeels gelijk blijven. De uiteindelijke kleuren worden weer als HEX weergegeven.
Complementaire en analoge kleuren
Een complementaire kleur ligt 180 graden tegenover de basiskleur en geeft sterk contrast. De complementaire modus van deze tool toont daarnaast enkele tussenliggende kleurtonen, zodat je niet beperkt bent tot twee kleuren. Gebruik het grootste contrast bijvoorbeeld voor accenten, maar vermijd grote oppervlakken met twee zeer verzadigde tegenkleuren wanneer dat onrustig oogt.
Analoge kleuren liggen dicht bij elkaar op de kleurcirkel. De generator gebruikt verschuivingen van min en plus 30 en 60 graden. Zulke paletten voelen vaak samenhangend aan en zijn geschikt voor achtergronden, illustraties en interfaces met een rustige kleurfamilie.
Triadisch, split-complementair en tetradisch
Een triadisch palet gebruikt drie kleurtonen met telkens 120 graden verschil. Split-complementair combineert de basiskleur met de twee kleuren naast haar directe complement, hier op 150 en 210 graden. Tetradisch gebruikt vier tinten met stappen van 90 graden. Deze schema's bieden variatie, maar vragen om hiërarchie: kies één dominante kleur en gebruik de overige kleuren gecontroleerd als ondersteuning of accent.
Monochromatisch palet
Monochromatisch houdt dezelfde kleurtoon en verzadiging aan en verandert de HSL-lichtheid. De tool genereert vijf niveaus van 15 tot 75 procent lichtheid. Dat is nuttig voor statussen, kaarten en componentvarianten, maar een extreem lichte of donkere basiskleur kan minder bruikbare resultaten geven. Pas kleuren handmatig aan wanneer tussenstappen onvoldoende onderscheid tonen.
Kleurcontrast en toegankelijkheid
Een harmonieus palet is niet automatisch toegankelijk. Controleer tekst en pictogrammen met de contrastcriteria die voor je toepassing gelden. Beoordeel normale, grote en interactieve tekst afzonderlijk en vertrouw niet alleen op kleur om een fout, status of selectie over te brengen. Test ook focus, hover en disabled states.
De tekstkleur die in de kleurstalen wordt gekozen is slechts een eenvoudige helderheidsinschatting en geen volledige WCAG-contrastmeting. Gebruik voor publicatie een gespecialiseerde contrastchecker.
Palet toepassen in CSS
Met “Kopieer CSS-variabelen” krijg je aangepaste eigenschappen zoals --color-1. Geef ze in een echt project betekenisvolle namen, bijvoorbeeld --color-primary, --color-surface en --color-accent. Controleer het palet op verschillende schermen, in lichte en donkere thema's en bij kleurenblindheidssimulaties. De generator biedt een wiskundig startpunt; merkidentiteit en bruikbaarheid vragen altijd visuele beoordeling.
Reacties