Kleurschemagenerator

Kies een basiskleur en krijg een volledig palet, complementair, analoog, triadisch, tetradisch of monochromatisch. Kopieer elk staal als HEX, RGB of HSL. Er verlaat niets je browser.

Hoe Kleurschemagenerator werkt

Kleurenschema-generator bouwt complete kleurenpaletten op basis van een door jou gekozen basiskleur: complementair (tegenoverliggend op het kleurwiel), analoog (aangrenzende tinten), triadisch (drie gelijkmatig verdeelde), tetradisch (vier tinten in twee complementaire paren) en monochromatisch (variërende helderheid en verzadiging van dezelfde tint). Alle paletlogica draait in de browser; niets dat je invoert, verlaat je apparaat.

Elk gegenereerd palet toont stalen met hun HEX- en RGB-waarden klaar om te kopiëren. Dit geeft ontwerpers een startpunt gebaseerd op kleurtheorie in plaats van giswerk. Omdat de generator offline-geschikt is na de eerste paginagrootte, kun je vrijelijk experimenteren met merkkleuren tijdens een klantbijeenkomst zonder een netwerkverbinding nodig te hebben. Voer je basiskleur in welke notatie je ook hebt, HEX, RGB of HSL, en elk gegenereerd staal wordt teruggegeven in alle drie, zodat je degene kunt kopiëren die je ontwerptool verwacht.

Geschreven door Bastien Sulyan

Hoe je Kleurschemagenerator gebruikt, stap voor stap

Kies een basiskleur met de kleurkiezer of door een HEX-waarde te typen.
Kies een harmonietype uit de tabbladen: complementair, analoog, triadisch, tetradisch of monochromatisch.
De palet stalen verschijnen direct met hun HEX- en RGB-waarden.
Klik op een staal om de HEX-waarde naar je klembord te kopiëren.
Pas de basiskleur aan om variaties te verkennen en zie het hele palet bijwerken.

Veelvoorkomende toepassingen

Een ontwerper die een nieuwe merkidentiteit start, kiest zijn primaire kleur en genereert een triadisch palet om driekleurscombi naties voor te stellen aan een klant.
Een ontwikkelaar die een donker-modusthema bouwt, gebruikt het monochromatische palet om een reeks tinten en schaduw en te genereren vanuit een enkele merkkleur.
Een contentmaker kiest een analoog palet om accentkleuren te kiezen voor een presentatie die samenhangend aanvoelt zonder scherp contrast.
Een UI-ontwerper gebruikt het complementaire palet om een hoog-contrastaccentkleur te identificeren die opvalt tegen de primaire merkkleur.

Veelgestelde vragen

Hoe werkt het complementaire palet?

Een complementaire kleur is de tint die direct tegenover de basiskleur op het HSL-kleurwiel staat, 180 graden verwijderd. Complementaire kleuren naast elkaar plaatsen creëert maximaal contrast. Het hulpmiddel toont de basiskleur en zijn complement, plus lichtere en donkerdere varianten van elk.

Wat is het verschil tussen triadische en tetradische paletten?

Een triadisch palet gebruikt drie tinten gelijkmatig verdeeld op 120 graden van elkaar op het kleurwiel. Een tetradisch palet gebruikt vier tinten op 90 graden van elkaar, waarbij twee complementaire paren worden gevormd (ook wel een dubbel complementair of vierkant palet genoemd). Tetradische paletten zijn complexer en vereisen een zorgvuldig evenwicht in proporties om visuele ruis te vermijden.

Worden de kleuren die ik kies opgeslagen of ergens naartoe gestuurd?

Nee. Paletgeneratie is rekenwerk op de HSL-weergave van de basiskleur: de tinthoek met vaste hoeveelheden draaien, helderheid en verzadiging aanpassen. Elke berekening wordt lokaal in de browser uitgevoerd; er wordt niets naar een server gestuurd.

Kan ik het palet exporteren als CSS-bestand of ontwerpelement-bestand?

Het hulpmiddel toont momenteel stalen met kopieerbare HEX- en RGB-waarden. Voor een volledige CSS-aangepaste eigenschappen-export of een ontwerpelement-JSON kopieer je de waarden handmatig in het tokenbestand of CSS van je project. Een speciale exportknop kan in een toekomstige update worden toegevoegd.

Volgt deze generator een formele kleurtheoriestandaard?

De paletberekeningen gebruiken standaard tintrotatieformules in de HSL-kleurruimte, de conventie in de meeste webontwerptools. De exacte perceptuele uniformiteit van HSL heeft beperkingen in vergelijking met LAB of OKLCH, maar HSL-rotaties produceren paletten die overeenkomen met de kleurwielconventies die ontwerpers doorgaans verwachten.

Gerelateerde tools

Houd alles lokaal, verken aanvullende tools.

Alle developertools