Kleurenpaletgenerator
Kies een HEX-basiskleur, selecteer een harmonieschema en genereer een palet dat u direct kunt kopiëren naar een UI-mockup, landingspagina, grafiek of designsysteem. De tool normaliseert korte en volledige HEX-waarden, bouwt het palet met HSL-verschuivingen in tint en lichtheid en geeft klikbare kleurstalen plus aangepaste CSS-eigenschappen terug.
Zo werkt de paletgenerator
-
1
Voer een HEX-basiskleur in
Gebruik de kleurkiezer of typ een waarde zoals #6366F1. Driecijferige shorthand wordt automatisch uitgebreid.
-
2
Kies een harmonieschema
Kies monochromatisch, analoog, complementair, triadisch of tetradisch, afhankelijk van of u een rustige schaal, nabije tinten of sterkere accentkleuren nodig hebt.
-
3
Genereer en controleer de stalen
Het palet verschijnt als kopieerbare HEX-stalen. Controleer de kleuren in de echte interface voordat u ze definitief gebruikt.
-
4
Exporteren
In de exportstap kopieert u de HEX-lijst of CSS-variabelen zoals --palette-1, --palette-2 enzovoort.
Kies het juiste schema
| Schema | Uitvoer | Beste gebruik | Controleren voor publicatie |
|---|---|---|---|
| Monochromatisch | 5 tinten en schaduwen van één kleur | Merkschalen, kaarten, achtergronden | Voeg een accent of neutraal toe als alles te vlak oogt |
| Analoog | 5 naburige tinten | Verlopen, illustraties, rustige productschermen | Zorg dat aangrenzende kleuren voldoende onderscheid houden |
| Complementair | Basiskleuren plus de tegenoverliggende tint | CTA-accenten, badges, energieke visuals | Test tekst- en pictogramcontrast zorgvuldig |
| Triadisch | 3 gelijk verdeelde tinten | Speelse branding, grafieken, categoriekleuren | Kies één dominante kleur zodat de UI niet druk wordt |
| Tetradisch | 4 tinten rond de kleurencirkel | Dashboards, tags, bredere visuele systemen | Verlaag de verzadiging als het palet grote vlakken bedekt |
Praktische paletstructuur
Een gegenereerde harmonie is een startpunt, geen volledig designsysteem. Voor productie-UI noemt u kleuren naar hun rol in plaats van hun uiterlijk: primary, secondary, accent, surface, border, text, success, warning en error. Voeg neutrale grijzen apart toe, want die vragen meestal meer controle dan een generator op basis van tint kan geven.
Gebruik de gegenereerde HEX-kleuren eerst rechtstreeks in een prototype. Bewaar daarna alleen de kleuren die standhouden op echte schermen, lichte en donkere achtergronden, en hover- of disabled-states.
Exporteren als CSS-variabelen
De exportstap gebruikt eenvoudige aangepaste eigenschappen:
:root {
--palette-1: #6366F1;
--palette-2: #818CF8;
--palette-3: #4F46E5;
}
Hernoem deze variabelen naar de namen van uw eigen systeem wanneer u ze plakt in CSS, Tailwind theme tokens of een design-tokenbestand.
HEX, RGB en HSL
De invoer en zichtbare uitvoer zijn HEX, omdat dat het snelste formaat is om te kopiëren tussen CSS, designtools en taakreacties. Intern wordt de basiskleur omgezet naar HSL, worden tint of lichtheid verschoven en komen de resultaten terug als HEX. Hebt u RGB- of HSL-notatie nodig, haal de gegenereerde HEX-waarden dan door een kleurcodeconverter.
Contrast en toegankelijkheid
Harmonieschema’s garanderen geen toegankelijkheid. Controleer elke combinatie voor tekst, bedieningselementen of grafieken met een contrastchecker:
- Normale tekst op de achtergrond: minimaal 4,5:1 voor WCAG AA.
- Grote tekst: minimaal 3:1.
- Belangrijke niet-tekstuele UI-delen, zoals knopranden, pictogrammen, focusringen en grafiekranden: minimaal 3:1 ten opzichte van aangrenzende kleuren.
Vertrouw ook niet alleen op tint. Twee kleuren kunnen in een staal duidelijk verschillen en toch mislukken bij kleine tekst, dunne pictogrammen of statuslabels.
Tips
- Begin met een betekenisvolle basiskleur, zoals een bestaande merk-, product- of campagnekleur.
- Kies één dominante kleur en behandel de rest als ondersteuning. Gelijk gewicht maakt de meeste interfaces snel druk.
- Verlaag verzadiging voor grote vlakken, zoals app-achtergronden, panelen en hero-secties.
- Test opnieuw na theming. Een palet dat op wit werkt, kan in dark mode of in dichte grafieken falen.
Veelgestelde vragen
Nee. De tool maakt kleurharmonieën. Test belangrijke combinaties van voorgrond en achtergrond voor publicatie met een contrastchecker.
Elk schema volgt een andere relatie op de kleurencirkel. Triadisch geeft drie tinten, tetradisch vier, terwijl monochromatisch, analoog en complementair vijf stalen geven als praktischer werkset.
De huidige invoer is HEX. Zet RGB of HSL eerst om naar HEX en gebruik dat resultaat als basiskleur.
Monochromatische en analoge paletten zijn meestal het makkelijkst voor rustige UI-vlakken. Complementaire, triadische en tetradische paletten werken beter voor accenten, categoriekleuren en visuele campagnes.
Gerelateerde tools
Binair naar hex-converter
Converteer binaire invoer naar een gewone uppercase hexwaarde. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.
HEX-kleurkiezer
Kies of typ een HEX-kleur en krijg RGB, HSL, geschat CMYK, relatieve luminantie en contrast tegen wit en zwart.
BBCode naar HTML-converter
Converteer BBCode (bulletin-board markup) naar schone HTML. Verwerkt opmaaktags, lijsten, quotes, code, afbeeldingen, links en tabellen.
ASCII naar binair-converter
Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.
Base64 naar Hex converteren
Converteer een Base64-string naar de onderliggende bytes als hexadecimaal. Handig voor het inspecteren van tokens, sleutels, certificaten en JWTs.
Binair naar ASCII-converter
Plak binaire data (spatiegescheiden bytes of een lange bitstream) en krijg de ASCII-tekst die die data vertegenwoordigt. Verwerkt 7-bit en 8-bit encodings.