Gratis online kleurconverter — HEX, RGB, HSL, CMYK

Converteer kleuren direct tussen de formats HEX, RGB, HSL en CMYK. Deze gratis kleurconverter biedt een live voorbeeld en bidirectionele conversie voor webontwikkeling, drukwerk en grafisch ontwerp.

Wat is een kleurconverter?

Een kleurconverter vertaalt kleurwaarden tussen verschillende formats die worden gebruikt in digitale en printontwerpen. Webontwikkelaars gebruiken HEX en RGB, designers werken vaak in HSL voor intuïtieve kleuraanpassing, en drukwerk gebruikt CMYK.

In plaats van handmatig conversies te berekenen of een ontwerptoool te openen, geeft deze converter alle formats tegelijk — met een live voorbeeld zodat u precies kunt zien welke kleur u werkt.

Hoe gebruikt u deze kleurconverter

1. Voer een kleur in — Typ een HEX-waarde of voer RGB-, HSL- of CMYK-nummers in.
2. Zie alle formats — Alle andere formats worden direct bijgewerkt.
3. Kopieer wat u nodig heeft — Klik op de kopieerknop naast elk format.
4. Gebruik het voorbeeld — Het kleurvak toont de exacte kleur met een contrastlabel.

Belangrijke functies

Functie	Voordeel
Ondersteuning voor 4 formats	HEX, RGB, HSL, CMYK — allemaal tegelijk
Bidirectionele conversie	Bewerk elk format en de rest wordt bijgewerkt
Live voorbeeld	Zie de exacte kleur met zijn HEX-label
Kopieerknoppen per format	Één-klik-kopieerfunctionaliteit voor elk format
Printklaar CMYK	Ontvang nauwkeurige CMYK-waarden voor drukwerk

Begrijpen van kleurformats

HEX

Hexadecimale kleurnotatie gebruikt zes tekens (0-9, A-F) om rode, groene en blauwe waarden weer te geven:

• #FF0000 = rood op volle intensiteit
• #3B82F6 = Tailwind CSS blue-500

Vaak gebruikt in CSS, HTML en ontwerptoole. Altijd begint met #.

RGB (Rood, Groen, Blauw)

Additieve kleurmodel waarbij elke kanaal van 0 tot 255 loopt:

• rgb(255, 0, 0) = zuiver rood
• rgb(59, 130, 246) = Tailwind blue-500

Gebruikt in CSS (rgb() functie) en meeste programmeercontexten.

HSL (Hue, Saturation, Lightness)

Een intuïtiever model voor het aanpassen van kleuren:

• Hue (0-360): Positie op de kleurwiel (0=rood, 120=groen, 240=blauw)
• Saturation (0-100%): Intensiteit van de kleur (0%=grijs, 100%=volle kleur)
• Lightness (0-100%): Lichtheid (0%=zwart, 50%=normaal, 100%=wit)

Gebruikt in CSS (hsl() functie) en verkozen door ontwerpers voor het maken van kleurpaletten.

CMYK (Cyan, Magenta, Yellow, Key/Black)

Subtractieve kleurmodel gebruikt in drukwerkproductie:

• Elke waarde loopt van 0% tot 100%
• Vertegenwoordigt inktdekking op papier
• Niet direct bruikbaar in CSS (browsers gebruiken RGB intern)

Essentieel voor het voorbereiden van ontwerpen voor professioneel drukwerk.

Kleurformatenvergelijking

Format	Toepassing	Voorbeeld	Bereik
HEX	Web CSS, HTML	#3B82F6	00-FF per kanaal
RGB	Web CSS, programmeren	rgb(59, 130, 246)	0-255 per kanaal
HSL	Ontwerp, CSS	hsl(217, 91%, 60%)	H: 0-360, S/L: 0-100%
CMYK	Drukwerkproductie	cmyk(76%, 47%, 0%, 4%)	0-100% per kanaal

Real-life toepassingen

Webontwikkeling

Kopieer HEX of rgb() waarden direct naar uw CSS. HSL is ideaal voor het genereren van kleurschalen (bijvoorbeeld variërende lichtteken voor hover-toestanden).

Ontwerpstelsels

Converteer merkkleuren tussen formats. Een ontwerper geeft u HSL uit Figma — u hebt HEX voor CSS nodig. Dat is in één klik gedaan.

Drukwerk

Gebruik CMYK voor nauwkeurige kleurweergave in printproducten.

Grafisch ontwerp

Gebruik RGB en HSL voor digitale projecten en CMYK voor printwerken.

Tips voor het werken met kleuren

Tip	Uitleg
Gebruik altijd een kleurpalet	Zorg voor consistentie in uw project
Test kleuren op verschillende schermen	Kleuren kunnen variëren afhankelijk van het scherm
Gebruik contrasttesttools	Zorg voor toegankelijkheid volgens WCAG-richtlijnen
Sla kleuren op in een kleurbestand	Voor toekomstige projecten en samenwerking

Vaak gestelde vragen

Wat is het verschil tussen RGB en HSL?
RGB is een additief model dat licht gebruikt, terwijl HSL een intuïtief model is dat gebaseerd is op kleur, verzadiging en lichtteken.

Hoe verhoog ik de verzadiging van een kleur?
Verhoog de verzadigingswaarde in HSL om de kleur intenser te maken.

Waarom gebruiken drukwerken CMYK?
CMYK is een subtractief model dat inkt gebruikt, wat beter aansluit bij het drukproces.

Hoe controleer ik de toegankelijkheid van kleuren?
Gebruik tools zoals Contrast Checker of WCAG-richtlijnen om de contrastverhouding te testen.