UI- & productdesign
Bouw primary-, secondary- en surface-kleuren consistent over schermen.
Gratis · geen accountKleurtheorie-harmonieënCSS · Tailwind · JSONDraait in de browser
Waarom hier paletten genereren
Zes harmonie-engines
Complementair, analoog, triadisch, tetradisch, monochroom en gesplitst-complementair — gebaseerd op klassieke kleurtheorie.
Vergrendelen & verfijnen
Vergrendel favoriete kleuren, vernieuw de rest en itereer tot het schema klopt.
Dev-klare exports
Kopieer CSS-variabelen, Tailwind-tokens, SCSS-maps of JSON — plak in je design system.
WCAG-contrastchecks
Test tekst-op-achtergrond-paren uit je palet voor leesbare, toegankelijke UI.
Directe feedback
Swatches, UI-mockups en codes live. Geen upload, geen wachten, geen account.
Gratis & onbeperkt
Onbeperkte paletten voor persoonlijke en commerciële projecten. Geen watermerken.
Zo maak je een kleurenpalet
- 1
Kies een basiskleur
Gebruik de colorpicker of typ een HEX. Dit is het anker voor alle harmonieberekeningen.
- 2
Kies een harmonieregel
Wissel tussen complementair, analoog, triadisch en meer om sferen te verkennen.
- 3
Vergrendel, randomiseer, verfijn
Vergrendel keepers, vernieuw of druk Spatie voor een nieuwe basis tot het bij je merk past.
- 4
Exporteer naar je stack
Kopieer HEX/RGB/HSL of exporteer CSS, Tailwind, SCSS of JSON voor design en development.
Van één HEX naar een design system-zaad
Harmonieregels, contrastchecks en exportformaten die designers en developers écht shippen.
01
Waarom harmonie wint van willekeurige swatches
Willekeurige kleuren delen zelden een relatie. Harmonieregels plaatsen tinten op het wiel met intentie — tegenover voor energie, buren voor rust, gelijk verdeeld voor speelsheid.
02
Complementair vs analoog voor product-UI
Complementair laat CTA’s knallen. Analoog past bij dashboards en long-reads. Wissel regels op dezelfde basis en vergelijk sferen direct.
03
Exportpaden voor moderne stacks
CSS-variabelen voor elk framework. Tailwind-maps in de config. SCSS-maps voor Sass design systems. JSON voor tools en docs.
04
Toegankelijkheid als first-class feature
Mooi is niet genoeg als bodytekst AA faalt. Contrast checken terwijl de picker open is voorkomt dure redesigns na accessibility-review.
Wie een kleurenpaletgenerator gebruikt
Van brandkits tot product-UI — evenwichtige schema’s beginnen met stevige kleurtheorie.
Merkidentiteit
Verken complementaire of monochrome systemen vóór brand guidelines vastliggen.
Frontend-ontwikkeling
Exporteer CSS-variabelen of Tailwind-tokens zodat code het design volgt.
Marketing & social
Genereer campagnepaletten on-brand over ads, decks en landings.
Datavisualisatie
Kies sequentiële monochrome of categorische triadische sets voor duidelijkere charts.
Kleurtheorie leren
Zie hoe harmonieregels één basis omzetten in professionele multi-swatch schema’s.
Palettips die écht helpen
Gewoontes die “mooie swatches” scheiden van bruikbare design systems.
- 1
Start met merk- of productconstraints
Heb je al een primary HEX, vergrendel die en genereer eromheen — verzin geen vijfde random accent.
- 2
Check contrast vroeg
Een mooi paar dat AA faalt breekt knoppen en bodytekst. Test tekst op surfaces vóór ship.
- 3
Minder, sterkere rollen
Noem kleuren op rol (primary, accent, muted, danger), niet alleen op hue.
- 4
Eén keer exporteren, overal hergebruiken
Zet CSS-variabelen of Tailwind-tokens in één bron van waarheid.
FAQ
Veelgestelde vragen
Wat is een kleurenpaletgenerator?
Een tool die een set gecoördineerde kleuren bouwt vanuit een startkleur of regel. Deze past kleurtheorie-harmonieën toe voor UI, branding en design systems.
Welke harmonieregels worden ondersteund?
Complementair, analoog, triadisch, tetradisch (rechthoek), monochroom en gesplitst-complementair — de zes die designers het meest gebruiken.
Kan ik kleuren die ik leuk vind vergrendelen?
Ja. Vergrendel een swatch, vernieuw niet-vergrendelde of randomiseer de basis. Vergrendelde blijven staan.
Hoe exporteer ik het palet voor code?
Gebruik Exporteren om CSS custom properties, Tailwind-map, SCSS-map of JSON te kopiëren. Per swatch ook HEX, RGB of HSL.
Wat is WCAG-contrast en waarom checken?
WCAG definieert minimumcontrast tussen tekst en achtergrond voor toegankelijkheid. De checker meet paren uit je palet voor leesbare UI-tekst.
Is dit gratis voor commerciële projecten?
Ja. Onbeperkte paletten, geen account of watermerken. Kleuren en exportcode mag je commercieel gebruiken.
Verlaten data de browser?
Nee. Kleurwiskunde, contrast en clipboard-exports draaien client-side. Niets wordt geüpload.
Hoeveel kleuren per palet?
Elke harmonie levert vijf gecoördineerde swatches — genoeg voor primary, accents en surfaces zonder overbelasting.
Professionele paletten uit kleurtheorie
De BosConvertPro Kleurenpaletgenerator maakt van één basiskleur een gebalanceerd multi-swatch schema met bewezen harmonieregels. Designers en developers vergrendelen favorieten, valideren contrast, previewen UI en exporteren production-ready tokens — in de browser, gratis, zonder account.
- Zes kleurharmonie-modi
- Kleuren vergrendelen terwijl andere vernieuwen
- WCAG-contrastchecker
- CSS-, Tailwind-, SCSS- & JSON-export
- HEX-, RGB-, HSL-kopieerformaten
- Gratis onbeperkt gebruik in de browser