Kleurconverter – HEX, RGB, HSL

Kleuren omrekenen tussen HEX, RGB en HSL

Als je met verschillende design- en ontwikkeltools werkt, moet je regelmatig kleurwaarden omzetten naar een ander formaat. Deze kleurconverter ondersteunt de drie meestgebruikte kleurformaten in webdesign: HEX, RGB en HSL.

Typ of plak een kleurwaarde – het formaat wordt automatisch herkend. Je ziet direct de overeenkomstige waarden in alle drie de formaten, klaar om te kopiëren.

Ondersteunde kleurformaten

• HEX – bijv. #3B82F6 of #f00 (verkorte notatie)
• RGB – bijv. rgb(59, 130, 246)
• HSL – bijv. hsl(217, 91%, 60%)

Alle uitvoerwaarden zijn opgemaakt als CSS-waarden die je direct in je code kunt plakken.

Hoe gebruik je de kleurconverter?

1. Voer een kleurwaarde in het invoerveld in – als HEX, RGB of HSL
2. Het formaat wordt automatisch gedetecteerd
3. Onder het invoerveld verschijnen de omgerekende waarden in alle drie de formaten
4. Klik op de kopieerknop naast het gewenste formaat om het naar je klembord te kopiëren

Veelvoorkomende toepassingen

• Een HEX-code uit een designbestand omzetten naar RGB voor CSS
• De HSL-waarde van een kleur opvragen om de helderheid of verzadiging aan te passen
• RGB-waarden uit een beeldbewerkingsprogramma vertalen naar HEX voor HTML
• Snel controleren of twee kleurwaarden in verschillende formaten dezelfde kleur weergeven

HEX, RGB of HSL – wanneer gebruik je welk formaat?

HEX is het meest compacte formaat en wordt het vaakst gebruikt in CSS en HTML. RGB kom je vooral tegen in grafische programma's en beeldbewerkingssoftware. HSL is het meest leesbaar voor mensen: het scheidt tint, verzadiging en helderheid, waardoor je kleuren gemakkelijk handmatig kunt bijstellen.

Er is geen enkel 'beste' formaat – gebruik wat je workflow vereist. En als je moet wisselen tussen formaten, doet deze converter dat in een oogwenk.

Veelgestelde vragen

Hoe reken ik een HEX-code om naar RGB?

Plak je HEX-code (bijv. #3B82F6) in het invoerveld. De bijbehorende RGB-waarde verschijnt direct eronder.

Hoe converteer ik RGB naar HEX?

Voer je RGB-waarde in het formaat rgb(59, 130, 246) in. De HEX-code en de HSL-waarde worden automatisch berekend en getoond.

Wat is HSL?

HSL staat voor Hue (tint), Saturation (verzadiging) en Lightness (helderheid). Het beschrijft kleuren op een manier die voor mensen heel intuïtief is – je kunt de helderheid of levendigheid van een kleur aanpassen zonder de basistint te veranderen.

Worden verkorte HEX-codes ondersteund?

Ja. Je kunt verkorte codes zoals #f00 of #abc invoeren. Ze worden automatisch uitgebreid en correct omgerekend.

Is de kleurconverter gratis?

Ja. ColourPicker.app is volledig gratis te gebruiken, zonder registratie.

Werkt deze tool ook op mijn telefoon?

Ja. De kleurconverter werkt op elk apparaat met een moderne browser – desktop, tablet of smartphone.