Softonic

Aanvullende kleurenzoeker

Stap 1 / 3

Voer een basiskleur in

Ondersteunt #RGB, #RRGGBB, rgb() met gehele getallen en hsl() met percentages. De berekening blijft in de browser; de kleur staat in de URL die bij elke pagina-aanvraag wordt verstuurd.

Complementaire kleuren liggen tegenover elkaar op een digitaal kleurenwiel. Voer een strikt HEX-, RGB- of HSL-getal in om het HSL-complement, gesplitste complementen, tetradische begeleiders en exacte WCAG-contrastwaarden te berekenen. Alles wordt lokaal in de browser berekend.

Hoe het complement wordt berekend

  1. 1

    Voer een willekeurige kleur in

    Gebruik #RGB, #RRGGBB, rgb() met gehele getallen of hsl() met percentages. De volledige waarde wordt vóór de berekening gevalideerd.

  2. 2

    Draai de tint 180°

    HSL-aanvulling: voeg 180° toe aan de tint, houd verzadiging en lichtheid hetzelfde.

  3. 3

    Split-complement afgeleid

    Twee kleuren op 150° en 210° vanaf de basis, een zachter alternatief voor directe aanvulling wanneer het contrast te hoog is.

  4. 4

    Er verschijnen toegankelijkheidstips

    Contrastverhouding van het paar ten opzichte van wit en zwart, plus een waarschuwing als het paar waarschijnlijk niet zal slagen voor WCAG AA bij gebruik als fg/bg.

Voorbeelden

Basiskleur Hex Aanvulling (HSL) Hex
Puur rood #FF0000 Cyaan #00FFFF
Koraal #FF7F50 Aqua blauwgroen #50D0FF
Bosgroen #228B22 Paars #8B228B
Koningsblauw #4169E1 Goud-oranje #E1B941
Lavendel #E6E6FA Lichtgeel #FAFAE6

De getoonde HEX-, RGB- en HSL-waarden beschrijven dezelfde sRGB-kleur. Kopieer een resultaat voor CSS of een ander ontwerpprogramma.

HSL-complement versus RYB-complement

  • HSL (scherm): rood ↔ cyaan, groen ↔ magenta, blauw ↔ geel. Dit is de geometrie van de uit sRGB afgeleide HSL-hoek in CSS, geen simulatie van lichtmenging.
  • RYB (kunstenaar): rood ↔ groen, blauw ↔ oranje, geel ↔ paars. Dit is een traditionele onderwijsconventie, geen voorspelling van het mengen van specifieke pigmenten.

Deze vinder gebruikt uitsluitend het digitale HSL-model. Er is geen omzetting naar het RYB-verfwiel, omdat pigmentcomplementen afhangen van materiaal en menging.

Waar complementen goed werken

  • CTA-knoppen tegen merkachtergronden. Combineer primair met zijn complement om de knop te laten knappen.
  • Gegevens grafieken met dubbele reeksen (winst versus verlies, vóór versus na).
  • Illustratieschaduwen: de schaduw van een oranje pompoen ziet er overtuigender uit in blauw dan in donkerder oranje.
  • Sportbranding: veel teams gebruiken complementaire of gesplitste complementaire paletten (blauw/oranje, rood/groen, geel/paars).

Waar ze falen

  • Hoofdtekst op achtergrond: directe aanvullingen (rood op groen, blauw op oranje) zijn ongemakkelijk om te lezen. Hoge chromatische aberratie veroorzaakt visuele vermoeidheid.
  • Volledig gebruik: een scherm dat 50% rood en 50% groen is, is vermoeiend. Gebruik een aanvulling voor accenten (5-10% van het oppervlak), niet de hoofdkleur.
  • Merkcoherentie: aanvullingen voelen druk aan. De meeste moderne merken gebruiken monochromatisch of analoog + één accent, geen dubbele aanvulling.

Split-complement

Het split-complement (basis + 150° + 210°) is vaak een betere praktische keuze:

  • Behoudt een hoog contrast met de complementregio.
  • Vermijdt de directe complementtrilling.
  • Biedt twee accenten voor een gelaagd ontwerp.

Voorbeeld: basis = blauw → complement = oranje (hard) → split-complement = rood-oranje + geel-oranje (rijker).

Deverzadigende aanvullingen

Pure aanvullingen zien er zelden goed uit bij volledige verzadiging. Verlaag de verzadiging met 20-40% op één of beide voor een rustiger palet:

  • Rood (S=100%) + Cyaan (S=100%) = trillend.
  • Rood (S=60%) + Cyaan (S=60%) = klassiek posterpalet.
  • Merksteen (S=45%) + Stoffig blauwgroen (S=30%) = modern, bruikbaar.

Gezondheidscontrole voor gebruik

  • Contrastverhouding van paar: de vinder meldt dit. Onder 4,5:1 faalt AA voor tekst.
  • Test op neutrale achtergrond: complementen zien er anders uit tegen wit, grijs en zwart.
  • Afdruktest als dat de bestemming is: CMYK kan de verzadiging verschuiven en relaties aanvullen ten opzichte van RGB.

Veelgestelde vragen

Ze ordenen tinten volgens verschillende conventies. HSL gebruikt een uit sRGB afgeleide numerieke hoek; het traditionele RYB-wiel zet bekende kunstenaarsprimairen op een conceptuele cirkel. Geen van beide voorspelt de uitkomst van het mengen van echte lichtbronnen of verf.

Ja, ze zijn synoniem in de kleurentheorie. ‘Tegenovergestelde op het kleurenwiel’ en ‘complementair’ verwijzen naar dezelfde relatie.

Zelden. Directe complementen falen meestal in WCAG-contrast wanneer ze worden gebruikt als fg/bg, omdat ze een vergelijkbare lichtheid hebben. Vergroot het lichtheidsverschil (donkere tekst op lichte achtergrond) om door te gaan.

Ja: het resultatenpaneel bevat direct complement, split-complement (twee kleuren flankerend) en tetradisch viervoudig. Kies wat het beste bij uw ontwerpdoel past.

Gerelateerde tools

Binair naar hex-converter

Converteer binaire invoer naar een gewone uppercase hexwaarde. Niet-binaire tekens worden genegeerd en voorloopnullen blijven niet behouden.

HEX-kleurkiezer

Kies of typ een HEX-kleur en krijg RGB, HSL, geschat CMYK, relatieve luminantie en contrast tegen wit en zwart.

BBCode naar HTML-converter

Converteer BBCode (bulletin-board markup) naar schone HTML. Verwerkt opmaaktags, lijsten, quotes, code, afbeeldingen, links en tabellen.

Base64 naar Hex converteren

Converteer een Base64-string naar de onderliggende bytes als hexadecimaal. Handig voor het inspecteren van tokens, sleutels, certificaten en JWTs.

Binair naar ASCII-converter

Plak binaire data (spatiegescheiden bytes of een lange bitstream) en krijg de ASCII-tekst die die data vertegenwoordigt. Verwerkt 7-bit en 8-bit encodings.

Binair naar decimaal

Converteer binaire getallen direct naar decimaal. Toont de positionele uitwerking zodat je ziet hoe elke bit bijdraagt.