Kleurharmonieën-generator

Hoe de Color Harmonies Generator werkt

Wat de tool doet

De Color Harmonies Generator berekent wiskundig verwante kleurensets op basis van één basiskleurtoon: complementair, analoog, triadisch, tetradisch, vierkant, gesplitst-complementair, monochroom en tinten. Elk palet wordt weergegeven met HEX-, RGB- en HSL-waarden die je met één klik kunt kopiëren en direct kunt gebruiken in CSS of design tokens.

Veelvoorkomende use-cases voor ontwikkelaars

Designers prototypen merkpaletten door te verkennen hoe een merkkleurtoon zich ontwikkelt onder verschillende harmonierregels. Frontendontwikkelaars leiden accentkleuren voor knoppen, meldingen en badges af van een primaire merkkleur. Data-viz-engineers kiezen categorische kleurensets die bewust gekozen ogen, maar toch onderscheidbaar blijven. Productmanagers vergelijken paletopties bij het beoordelen van ontwerpvoorstellen zonder speciale designtools nodig te hebben.

Gegevensformaten, typen of varianten

Er zijn acht schema's beschikbaar: Complementair (basis + 180°), Analoog (basis ± 30°), Triadisch (3 kleuren 120° uit elkaar), Tetradisch (rechthoekig 4-kleuren), Vierkant (4 kleuren 90° uit elkaar), Gesplitst-complementair (basis + ±150°), Monochroom (dezelfde kleurtoon met variërende lichtheid 10–90%) en Tinten (dezelfde kleurtoon, donker naar licht). Elke kleur bevat zijn HEX-, RGB- en HSL-weergaven, samen met een roletiket.

Veelvoorkomende valkuilen en edge-cases

Harmonieën die zijn afgeleid van extreem onverzadigde of bijna grijstinten basiskleuren zien er over de verschillende schema's heen niet te onderscheiden uit — begin met een verzadigde basis. Zeer verzadigde basiskleuren in combinatie met triadische of tetradische schema's kunnen schreeuwerige, moeilijk te balanceren paletten opleveren; overweeg de verzadiging te verlagen voor UI-gebruik. Sommige combinaties die uit harmonieën voortkomen halen de WCAG-contrastnorm niet — controleer altijd tekst/achtergrond-paren in de Color Contrast-tool voordat je live gaat.

Wanneer je deze tool gebruikt vs code

Gebruik de browsertool voor ideevorming, snelle verkenning en designreview. In code laten bibliotheken zoals chroma.js, colord of culori je harmonieën programmatisch berekenen, ze integreren in build-pipelines voor design tokens en harmoniemath combineren met perceptueel uniforme kleurruimten zoals Oklch voor gelijkmatiger ogende paletten.