Kleurconverter

Wat is een kleurconverter?

De kleurconverter is een online tool waarmee je kleuren direct tussen HEX, RGB en HSL omzet. Dat is handig wanneer één kleur consequent moet terugkomen in een website, design system, componentbibliotheek of merkdocumentatie zonder alles handmatig opnieuw te berekenen.

Je voert een waarde in of kiest een kleur in de browser en krijgt meteen de equivalente notaties in de andere formaten te zien. Daarnaast kun je losse waarden of kant-en-klare CSS kopiëren, recente kleuren terughalen en de overdracht tussen design en frontend een stuk sneller maken.

Wanneer deze tool handig is

• Webontwikkeling – Kleuren uit een ontwerpbestand vertalen naar bruikbare waarden voor CSS, SCSS en design tokens
• UI/UX-ontwerp – Lichtheid of verzadiging aanpassen zonder de kleurfamilie van een interface te verlaten
• Design systems – Eén kleur consequent documenteren in HEX, RGB en HSL voor ontwerpers en developers
• Toegankelijkheid – Exacte kleurwaarden controleren voordat je contrast en leesbaarheid beoordeelt
• Werken tussen tools – Kleuren gelijk houden tussen Figma, Photoshop, Illustrator en de uiteindelijke implementatie
• Presentaties en merkwerk – Projectkleuren snel hergebruiken in decks, rapporten en andere branded materialen

Belangrijkste functies

• Directe omzetting – Zodra HEX, RGB of HSL verandert, worden de andere formaten meteen bijgewerkt.
• Visuele kleurkeuze – Kies een kleur rechtstreeks in de browser en controleer direct hoe die eruitziet in de preview.
• Kopiëren per formaat – Neem afzonderlijk HEX, RGB, HSL of de volledige CSS-declaratie over, afhankelijk van je workflow.
• Lokale kleurgeschiedenis – Onlangs gebruikte kleuren blijven in de browser beschikbaar zodat je ze snel opnieuw kunt gebruiken.
• Willekeurige kleur als startpunt – Genereer met één klik een nieuwe referentiekleur als je wilt variëren of inspiratie zoekt.
• Invoer met geldige grenzen – RGB en HSL blijven binnen logische limieten, en HEX werkt ook met de verkorte notatie.

Zo gebruik je de kleurconverter

1. Kies de startkleur – Gebruik de kleurkiezer of vul direct een bekende HEX-, RGB- of HSL-waarde in.
2. Controleer de preview – Kijk in het bovenste vlak of de kleur echt past bij je interface, merk of component.
3. Lees de equivalenten af – De tool toont dezelfde kleur tegelijk in de drie meest gebruikte webformaten.
4. Kopieer het juiste resultaat – Neem het gewenste formaat over of gebruik “CSS kopiëren” om de code meteen in je stylesheet te plakken.

HEX, RGB en HSL uitgelegd

HEX

HEX is de gebruikelijkste manier om kleuren op het web te noteren en gebruikt de structuur #RRGGBB. Elk tekenpaar beschrijft de intensiteit van rood, groen en blauw in hexadecimale vorm, waardoor dit formaat heel geschikt is voor stylesheets, design tokens en technische documentatie.

• Voorbeelden: #D4AF37 voor goud, #FF5733 voor oranje en #3498DB voor blauw
• Korte vorm: #FF0000 kan als #F00 worden geschreven als de tekenparen gelijk zijn
• Wanneer gebruiken: CSS, componentdocumentatie, snelle overdracht tussen ontwerp en ontwikkeling

RGB

RGB beschrijft een kleur via de kanalen rood, groen en blauw met waarden van 0 tot 255. Dat is handig wanneer je kleuren met scripts wilt aanpassen, animaties wilt bouwen of exports uit ontwerptools wilt vergelijken.

• Voorbeelden: rgb(212, 175, 55), rgb(255, 255, 255) en rgb(0, 0, 0)
• Principe: alle kanalen op 0 leveren zwart op, alle kanalen op 255 leveren wit op
• Wanneer gebruiken: JavaScript, canvas, animaties en logica per kleurkanaal

HSL

HSL ordent kleur via tint, verzadiging en lichtheid. Dit is vooral handig wanneer je een kleur lichter, zachter of donkerder wilt maken zonder de onderliggende kleurfamilie te veranderen.

• Voorbeelden: hsl(46, 67%, 52%) voor goud en hsl(0, 100%, 50%) voor zuiver rood
• Tint (H): beweegt over een cirkel van 0° tot 360°
• Verzadiging (S): geeft de intensiteit weer van 0% tot 100%
• Lichtheid (L): plaatst de kleur tussen zwart, de pure tint en wit

Praktische tips

• Maak varianten vanuit HSL – Houd dezelfde tint aan en werk vooral met lichtheid om hover states en ondersteunende achtergronden te maken.
• Bewaar belangrijke referenties – Via de geschiedenis vergelijk je meerdere opties zonder steeds opnieuw codes in te voeren.
• Controleer contrast voor livegang – Een merkvaste kleur is niet automatisch goed leesbaar voor tekst en CTA’s.
• Kies het formaat op basis van de workflow – HEX is praktisch voor CSS, RGB voor scripts en HSL voor visueel experimenteren met varianten.

Details

De resultaten van de kleurconverter worden berekend op basis van de ingevoerde waarde en het gekozen bronformaat.

Als de kleur deel uitmaakt van een brand guide of een toegankelijkheidsreview, vergelijk haar dan ook nog met de officiële projectbron.

Veelgestelde vragen