Kleurharmonie-generator

Wat is kleurharmonie?

Kleurharmonie is de kunst van het kiezen van paletten waarvan de tinten doelbewust voelen in plaats van willekeurig — en achter de kunst zit eenvoudige geometrie. Het kleurenwiel ordent tinten in een cirkel naar hun positie in het zichtbare spectrum; harmonieuze paletten zijn sets punten op die cirkel waarvan de relatieve hoeken betrouwbare visuele relaties opleveren. Complementaire paren (tegenover elkaar) maximaliseren contrast en energie. Analoge sets (dicht bij elkaar) lezen rustig en verenigd. Triadische trio's zijn levendig maar in balans. Elk schema is een geteste formule, geen harde regel — het geeft je een startpunt dat je vanaf daar kunt fijntunen.

Hoe gebruik je deze generator

Kies een basiskleur en pak een schema. Het grid toont elke kleur in de harmonie, met hex, RGB en HSL. Klik op een kaart om de hex te kopiëren; klik Kopiëren onder het codeblok voor een kant-en-klare :root-declaratie van CSS custom properties. Wissel van schema om te vergelijken — dezelfde basiskleur produceert wild verschillende stemmingen via andere geometrische relaties.

Het juiste schema voor de klus kiezen

Complementair werkt voor calls-to-action en waarschuwingssystemen waar contrast het punt is. Analoog is onverslaanbaar voor hero-gradiënten, mood-pieces en natuurlijk aanvoelende merken. Triadisch is geweldig voor kinderproduct-UI, gaming-merken en infographics met drie categorische groepen. Tetradisch en square geven vier kleuren maar kunnen vechten als alle vier even zwaar gebruikt worden — kies een dominant, een accent en gebruik de andere twee spaarzaam. Monochromatische paletten gaan prachtig samen met één sterke neutraal en oogen nooit gedateerd.

De wiskunde: tint-rotatie

Elk schema is een rotatie rond de HSL-tint-ring, waarbij verzadiging en lightness van de basis ongewijzigd blijven. complementair is (h + 180°). split-complementair neemt de basis plus (h + 150°) en (h + 210°) — een zachter alternatief voor zuiver complement. analoog is (h − 30°, h, h + 30°). triadisch is (h, h + 120°, h + 240°). tetradisch is de rechthoek op (h, h + 60°, h + 180°, h + 240°). square verdeelt vier punten gelijk: (h, h + 90°, h + 180°, h + 270°). monochromatisch houdt de tint en varieert lightness in vijf gelijk verdeelde stappen.

Cheatsheet: schema en stemming

Complementair — energiek, opvallend, polariserend. Split-complementair — bold maar zachter dan vol complement; geweldig voor eerste palet-bouwers. Analoog — kalm, harmonieus, ideaal voor natuur- en wellness-merken. Triadisch — speels, balansvol, levendig. Tetradisch — veelzijdig, rijk, vraagt om een dominant. Square — bold en gebalanceerd; lastiger te krijgen dan tetradisch. Monochromatisch — minimalistisch, verfijnd, toegankelijk wanneer gepaard met een neutraal.

Veelgestelde vragen

Hoe kies ik een basiskleur?

Begin bij de meest gebruikte tint van het merk — of, start je vanaf nul, kies een kleur waarvan de stemming bij het merk past: warme gelen en oranjes voor energiek, koele blauwen en teal voor betrouwbaar, diepe roden voor serieus, groenen voor natuurlijk. Het schema verspreidt die stemming dan over de secundaire slots.

Waarom zien mijn kleuren er washed-out uit in monochromatische modus?

Monochromatisch varieert lightness en houdt tint en verzadiging gelijk. Heeft je basiskleur weinig verzadiging, dan comprimeren de lichtere en donkerdere varianten richting grijs. Voor rijkere monochromatische paletten begin je vanuit een verzadigde basis en pas je verzadiging naast lightness aan in een paint-app.

Moet ik alle vier kleuren van een tetradisch palet gelijk gebruiken?

Bijna nooit. Gebruik de 60-30-10-10-regel: 60% dominante kleur, 30% secundair, 10% en 10% voor de twee accenten. Vier-kleur-paletten met gelijk gewicht voelen chaotisch — geef één kleur de spotlight en de andere ondersteunende rollen.

Zijn deze schema's wetenschappelijk accuraat?

Ze zijn geometrisch gedefinieerd, niet perceptueel gekalibreerd. Het HSL-kleurenwiel weerspiegelt niet hoe het oog tint-afstand waarneemt — geel en groen lijken dichterbij dan de wiskunde suggereert, terwijl groenen een veel breder waargenomen gebied beslaan dan blauwen. Gebruik de schema's als startpunt en pas op het oog aan.

Kan ik mijn palet opslaan?

Klik op Kopiëren bij het CSS-variabelen-blok om het palet naar je klembord te zetten en plak het in de stylesheet van je project. We slaan paletten niet server-side op — alles is lokaal in je browser.

Wat is het verschil tussen split-complementair en complementair?

Pure complementair gebruikt twee kleuren recht tegenover elkaar op het wiel — maximaal contrast maar visueel intens. Split-complementair vervangt het ene tegenover door twee kleuren erflankend (±30° van het tegenover), wat het contrast verzacht maar de energie behoudt. Het is het makkelijkere schema als je nog nooit een palet hebt gebouwd.

Kleurharmonie-generator