Kleur Converter

Voer een HEX-code in, of gebruik de kleurenkiezer, en de tool toont direct de RGB- en HSL-waarden. Handig als je werkt in meerdere tools of codeeromgevingen die verschillende kleurnotaties verwachten.

Laatst bijgewerkt: mei 2026

Advertentie

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
R
59
G
130
B
246

Advertentie

Kleurformaten uitgelegd: HEX, RGB en HSL

Er bestaan meerdere manieren om een kleur digitaal te beschrijven. Elk formaat heeft zijn eigen sterke punten:

FormaatSyntaxVoorbeeld (rood)Beste voor
HEX#RRGGBB#FF0000CSS, designtools, snelle notatie
RGBrgb(R, G, B)rgb(255, 0, 0)CSS, JavaScript, beeldbewerking
HSLhsl(H, S%, L%)hsl(0, 100%, 50%)Kleurtinten aanpassen, thema's

HEX is compact en de standaard in webdesign. RGB is intuïtief als je met kleurkanalen werkt. HSL is het meest mensvriendelijk: je kunt de tint (hue) aanpassen zonder de verzadiging of helderheid te veranderen.

Wanneer kies je welk kleurformaat?

  • Webdesign (CSS) — HEX is de meestgebruikte notatie. Gebruik HSL als je varianten van dezelfde kleur wilt maken (donkerder, lichter) door alleen de L-waarde aan te passen.
  • JavaScript / programmatisch — RGB is handig als je kleurwaarden berekent of animeert, omdat je de drie kanalen als getallen kunt manipuleren.
  • Designtools (Figma, Photoshop) — De meeste tools tonen HEX standaard, maar ondersteunen alle drie de formaten. Kopieer het formaat dat je nodig hebt direct vanuit deze converter.
  • Toegankelijkheid — HSL is het meest intuïtief voor het aanpassen van kleurcontrast: verhoog de lichtheid (L) voor lichtere kleuren, verlaag voor donkerdere.

Tips voor kleurgebruik op het web

  1. Contrastverhouding — Zorg voor een contrastverhouding van minimaal 4,5:1 tussen tekst en achtergrond (WCAG AA-norm). Donkerdere tekst op lichte achtergrond is het veiligst.
  2. Consistentie — Kies 2–3 hoofdkleuren en gebruik varianten via HSL (zelfde hue, andere saturation/lightness) voor een samenhangend kleurenpalet.
  3. Kleurenblindheid — Circa 8% van de mannen is kleurenblind. Gebruik niet alleen kleur om informatie over te brengen — voeg ook pictogrammen of tekst toe.

Veelgestelde vragen

Hoe converteer ik HEX naar RGB?

Voer een HEX-kleurcode in (bijv. #FF5733) en de tool toont automatisch de RGB en HSL waarden.

Wat is het verschil tussen HEX, RGB en HSL?

HEX is een hexadecimale notatie (#RRGGBB), RGB beschrijft rood/groen/blauw intensiteit (0-255) en HSL staat voor tint (hue), verzadiging en helderheid.

Kan ik ook een kleur visueel kiezen?

Ja, de tool heeft een kleurenkiezer waarmee je een kleur visueel kunt selecteren.

Hoe gebruik ik een kleurcode in mijn HTML?

Na het converteren kopieer je de HEX-code direct in je CSS. Genereer ook de bijbehorende SEO-metatags met de meta tag generator als je aan je website-opmaak werkt.

DelenWhatsAppLinkedInX