Kleurenpalet Generator - Creëer Harmonieuze Kleurenschema's

Wat is een generator voor kleurenpaletten?

Een generator voor kleurenpaletten is een hulpmiddel dat vanuit één beginkleur, de primaire kleur genoemd, een set bij elkaar passende kleuren samenstelt. Deze generator neemt een primaire kleur en een harmonietype en berekent vervolgens de rest van het palet met regels uit de kleurentheorie. De vier ondersteunde harmonietypen zijn complementair, analoog, triadisch en monochromatisch.

Hoe het hulpmiddel een palet samenstelt

Het hulpmiddel zet de primaire kleur uit een hexadecimale code (zoals #3B82F6) om naar het HSL-kleurmodel. HSL beschrijft een kleur met drie getallen:

• Kleurtoon: de positie van de kleur op een kleurencirkel van 360 graden (0° is rood, 120° is groen, 240° is blauw).
• Verzadiging: hoe intens de kleur is, van 0% (grijs) tot 100% (een zuivere kleur).
• Lichtheid: hoe dicht de kleur bij zwart of wit ligt, van 0% (zwart) tot 100% (wit).

Elk harmonietype verschuift de kleurtoon, de lichtheid of beide en zet het resultaat vervolgens terug om naar een hexadecimale code.

Complementaire kleuren berekenen

De formule:

$h' = (h + 180) \bmod 360$

waarbij h de tint van de primaire kleur in graden is en h′ de nieuwe tint. De modulo-stap brengt een resultaat dat voorbij een volledige omwenteling komt weer terug op het kleurenwiel.

Verzadiging en lichtheid blijven gelijk.

Uitgewerkt voorbeeld: Zuiver blauw, #0000FF, heeft kleurtoon 240°, verzadiging 100% en lichtheid 50%. Door 180° op te tellen, ontstaat kleurtoon 60°. Als kleurtoon 60° bij dezelfde verzadiging en lichtheid weer naar hex wordt omgezet, ontstaat #FFFF00, een gele kleur. Dit hulpmiddel koppelt blauw dus aan geel, niet aan oranje.

Dit kan verwarrend zijn, omdat in kunstlessen vaak een andere kleurencirkel wordt onderwezen: de RYB-pigmentcirkel (rood-geel-blauw), waarin oranje de tegenovergestelde kleur van blauw is. Dit hulpmiddel werkt met de op RGB gebaseerde HSL-kleurencirkel die door schermen wordt gebruikt. Daarom verschillen de complementaire kleurenparen van die op de cirkel voor verf mengen.

Analoge kleuren berekenen

Analoge kleuren liggen op de kleurencirkel dicht bij de primaire kleur. Het hulpmiddel genereert twee kleurtonen op 30° afstand en twee kleurtonen op 60° afstand van de primaire kleurtoon, allemaal met dezelfde verzadiging en lichtheid.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

waarbij h de tint van de primaire kleur is.

Uitgewerkt voorbeeld: Blauw, #0000FF (kleurtoon 240°), levert kleurtoon 270° (#8000FF), kleurtoon 210° (#0080FF), kleurtoon 300° (#FF00FF) en kleurtoon 180° (#00FFFF) op. Samen met de primaire kleur bevat het palet vijf kleuren.

Triadische kleuren berekenen

Triadische kleuren liggen 120° uit elkaar op de kleurencirkel en vormen samen met de primaire kleur een gelijkmatig verdeeld drietal.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Uitgewerkt voorbeeld: Rood, #FF0000 (kleurtoon 0°), levert kleurtoon 120° (#00FF00, groen) en kleurtoon 240° (#0000FF, blauw) op. De driekleurenset bestaat uit rood, groen en blauw, dezelfde drie kleurtonen die op digitale schermen als primaire kleuren worden gebruikt.

Monochromatische kleuren berekenen

Monochromatische kleuren behouden dezelfde kleurtoon en verzadiging en veranderen alleen de lichtheid. Het hulpmiddel verschuift de lichtheid in beide richtingen met 15 en 30 procentpunten, met een ondergrens van 5% en een bovengrens van 95%.

$l \pm 15, \qquad l \pm 30$

waarbij l de lichtheid van de primaire kleur in procentpunten is.

Uitgewerkt voorbeeld: Blauw, #0000FF (lichtheid 50%), levert lichtheid 65% (#4D4DFF), lichtheid 35% (#0000B3), lichtheid 80% (#9999FF) en lichtheid 20% (#000066) op.

Door de onder- en bovengrens van 5% en 95% kan een primaire kleur die al zeer licht of zeer donker is tweemaal dezelfde grens bereiken. Zwart, #000000, levert lichtheid 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) en opnieuw 5% (#0D0D0D) op, waardoor één kleur wordt herhaald.

De tool gebruiken

1. Kies een primaire kleur met de kleurenkiezer of typ een hexadecimale code, zoals #3B82F6.
2. Kies een harmonietype: complementair, analoog, triadisch of monochromatisch.
3. Bekijk het gegenereerde palet. Elke kleurstaal toont de hexadecimale code op een knop.
4. Klik op die knop om de hexadecimale code te kopiëren of gebruik 'Alle kleuren kopiëren' om het hele palet in één keer te kopiëren.

Contrast controleren op toegankelijkheid

Elke kleurstaal toont twee kleine badges: één voor het contrast met wit en één voor het contrast met zwart. Het hulpmiddel berekent een contrastverhouding met de WCAG-formule (Web Content Accessibility Guidelines):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

waarbij C de contrastverhouding is.

L1 is de relatieve luminantie van de lichtere kleur en L2 die van de donkerdere kleur. De luminantie wordt berekend uit de rode, groene en blauwe waarden van de kleur. Een badge toont 'AA' wanneer de verhouding 4,5 of hoger is, het WCAG-minimum voor tekst van normale grootte. Er staat '!' wanneer de verhouding lager is dan 4,5. Als je de aanwijzer boven een badge houdt, wordt de exacte verhouding weergegeven. Zwarte tekst op een witte achtergrond heeft een verhouding van 21, de hoogst mogelijke waarde.

Het hulpmiddel gebruikt dezelfde contrastregel om de kleur van de kopieerknop op elke kleurstaal te kiezen. Het vergelijkt de kleurstaal met zwart en met wit en gebruikt vervolgens de kleur waarin de tekst beter leesbaar is. De omschakeling vindt plaats bij een relatieve luminantie van ongeveer 0,179, het punt waarop beide verhoudingen gelijk zijn.

Veelgestelde vragen

Wat is een generator voor kleurenpaletten? Het is een hulpmiddel dat vanuit één primaire kleur en een gekozen harmonische regel een set kleuren produceert die bij elkaar passen.

Waarom koppelt dit hulpmiddel blauw aan geel in plaats van aan oranje bij complementaire kleuren? Het hulpmiddel draait de kleurtoon 180° op de HSL-kleurencirkel, die is gebaseerd op de manier waarop schermen rood, groen en blauw licht mengen. De rood-geel-blauwe verfcirkel die in kunstlessen wordt onderwezen, levert andere complementaire kleurenparen op, omdat die pigmenten mengt in plaats van licht.

Hoeveel kleuren produceert elk harmonietype? Complementair produceert in totaal 2 kleuren, inclusief de primaire kleur. Triadisch produceert 3 kleuren. Analoog produceert 5 kleuren. Monochromatisch produceert 5 kleuren.

Welk kleurmodel gebruikt het hulpmiddel intern? HSL (kleurtoon, verzadiging, lichtheid). Het zet de ingevoerde hexadecimale code om naar HSL, voert de berekeningen uit en zet het resultaat vervolgens terug om naar hex.

Controleert het hulpmiddel of kleuren toegankelijk zijn? Ja. Elke kleurstaal toont of het contrast met wit en zwart groot genoeg is om te voldoen aan de WCAG AA-standaard voor normale tekst, waarvoor een verhouding van ten minste 4,5 vereist is.

Kan ik meer dan één harmonietype gebruiken voor een project? Ja. Veel ontwerpen combineren harmonietypen, bijvoorbeeld een analoge set voor de hoofdkleuren en één complementaire kleur voor een knop of accent.

Kleurformaten

Het hulpmiddel schrijft elke gegenereerde kleur als een hexadecimale code van zes cijfers, voorafgegaan door het teken # (bijvoorbeeld #ff0000 voor rood). Hexadecimale codes verwijzen rechtstreeks naar rode, groene en blauwe waarden van elk 0 tot 255. De primaire kleur wordt exact weergegeven zoals deze is ingevoerd, zodat een verkorte notatie met drie cijfers, zoals #F00, kort blijft. Codes met drie cijfers geven dezelfde kleur aan als de zes-cijferige vorm: elk cijfer wordt verdubbeld, dus #F00 is #FF0000. HSL is een alternatieve manier om dezelfde kleuren te beschrijven met kleurtoon, verzadiging en lichtheid in plaats van hoeveelheden rood, groen en blauw.