Softonic

Triadische kleurgenerator

Stap 1 / 2
Volgende

Een triadisch palet gebruikt drie kleuren die 120° van elkaar liggen op de kleurencirkel; rood, geel en blauw is het schoolvoorbeeld. Het resultaat is van nature evenwichtig en energiek, zonder chaotisch te worden. Kies met de kleurkiezer een basiskleur: de generator zet die om naar HSL, draait de tint exact +120° en +240° terwijl verzadiging en helderheid onaangeroerd blijven, en toont de drie kleurstalen met hun HEX-codes. Klik op een staal om de code te kopiëren.

Hoe het palet wordt opgebouwd

  1. 1

    Kies een basiskleur

    Gebruik de kleurkiezer om de tint te kiezen waar het palet omheen wordt gebouwd.

  2. 2

    Twee partners worden berekend

    De tool draait de tint +120° en +240° in de HSL-ruimte; verzadiging en helderheid blijven identiek voor een samenhangende triade.

  3. 3

    Lees de HEX-codes af

    Base, Triadic +120° en Triadic +240° staan naast elkaar, elk met hun zescijferige HEX-waarde als label.

  4. 4

    Klik om te kopiëren

    Eén klik op een kleurstaal kopieert de HEX-code naar het klembord, klaar om te plakken in CSS, een Tailwind-configuratie of je designtool.

Waarom triadische paletten evenwichtig aanvoelen

Drie kleuren op gelijke afstanden op de kleurencirkel delen geen tintbuurt: ze contrasteren sterk, terwijl de afstand van 120° de frontale botsing van directe complementen (180° uit elkaar) vermijdt. Het oog leest ze als duidelijk verschillend maar harmonieus.

De wiskunde achter de kleurstalen

De generator zet je HEX-kleur om naar HSL, telt 120° en 240° bij de tint op en rekent terug. Omdat alleen de tint beweegt, delen de drie kleuren altijd dezelfde verzadiging en helderheid. Een aardig neveneffect: een draaiing van exact 120° komt neer op het doorschuiven van de rood-, groen- en blauwkanalen. De partners van #6366F1 (de standaardkleur) zijn daarom #F16366 en #66F163, dezelfde drie byteparen in een andere volgorde.

Voorbeeldtriades uit deze tool:

Basis Triadic +120° Triadic +240°
#FF0000 (rood) #00FF00 #0000FF
#6366F1 (indigo) #F16366 #66F163
#E67E22 (oranje) #22E67E #7E22E6
#0EA5E9 (hemelsblauw) #E90EA5 #A5E90E
#2ECC71 (smaragdgroen) #712ECC #CC712E

Een triade gebruiken zonder te overweldigen

Drie felle tinten op volle verzadiging is veel. De vuistregel:

  • Eén dominante kleur (60%) voor de hoofd-UI.
  • Eén secundaire kleur (30%) voor accenten en secties.
  • Eén uitschieter (10%) voor de belangrijkste interactieve elementen.

De andere knop om aan te draaien is een gedempte basis: de twee partners erven de verzadiging, dus een zachte basis geeft een zachte triade.

Triadisch versus andere harmonieën

Harmonie Structuur Gevoel
Complementair 2 kleuren, 180° uit elkaar Hoog contrast, uitgesproken
Analoog 3 kleuren, naast elkaar Kalm, samenhangend
Triadisch 3 kleuren, 120° uit elkaar Evenwichtig, energiek
Tetradisch 4 kleuren, rechthoek Rijk, lastiger in balans
Split-compl. Basis + 2 bijna-complementen Sterk zonder botsing

Tips voor UI-design

  • Controleer het contrast van elk paar. Triadische paletten garanderen geen WCAG AA-contrast op tekst; controleer elke combinatie apart.
  • Kies één kleur voor call-to-actions en houd je eraan. Knoppen die wisselen tussen de triadekleuren verwarren gebruikers.
  • Gebruik tinten en schaduwen om het palet uit te breiden zonder een vierde tint toe te voegen.
  • Test in donkere modus. Een triade die op wit werkt, kan op donkere achtergronden onderscheidend vermogen verliezen; pas de helderheid aan.

Veelgestelde vragen

Drie gelijke delen van de 360°-kleurencirkel leggen de maximale afstand tussen de tinten zonder dat er één domineert. Een kleinere afstand geeft analoge harmonie; een grotere afstand breekt de gelijke afstanden en zakt meestal weg in een split-complementair schema.

Ja, maar vaak in een verzachte vorm. Veel merken starten met een triadische basis en verlagen dan de verzadiging van twee van de drie kleuren, of dempen ze, voor een volwassener uitstraling. Een volledig verzadigde triade oogt speels of energiek: stem hem af op de merkpersoonlijkheid.

Ja. De generator behoudt de verzadiging en helderheid van je basiskleur voor beide partners, dus een ontverzadigde basis levert een even zachte triade op. Dat is een gangbare strategie voor professionele of redactionele ontwerpen.

Puur grijs heeft verzadiging nul: er is geen tint om te draaien en de drie stalen komen er hetzelfde uit. Schuif de basis richting een willekeurige tint en de drie stalen lopen meteen uiteen.

Je hoeft je niet te registreren en er wordt niets bewaard. De kleur wordt alleen gebruikt om het palet te berekenen en te tonen; in de stap-voor-stapweergave staat hij ook in de pagina-URL, waardoor je een palet makkelijk kunt bookmarken of delen.

Gerelateerde tools

Material Design-kleurkiezer

Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Instagram-grid-splitter

Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.

Afbeelding naar grijswaarden

Zet kleurenafbeeldingen in uw browser om naar grijswaarden. Gratis en privé, er wordt niets geüpload.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

Tool beschikbaar in andere talen