RGB naar HEX naar HSL
Converteer tussen RGB-, HEX- en HSL-kleurformaten
Invoer en opties
Snelle voorinstellingen en voorbeelden
Draait in uw browser. Uw invoer blijft op dit apparaat.
Resultaten
Voer uw waarden in om het resultaat te zien.
Over de kleurconverter
Onze gratis kleurconverter zet kleuren naadloos en in realtime om tussen de formaten RGB, HEX en HSL. Of u nu een webdesigner bent die huiskleuren overneemt, een ontwikkelaar die CSS-thema's bouwt of een digitaal kunstenaar die paletten verfijnt: deze tool levert direct nauwkeurige omzettingen tussen kleurformaten, rechtstreeks in uw browser.
De tool heeft interactieve schuifregelaars voor zowel het RGB- als het HSL-kleurmodel, zodat u afzonderlijke kanalen visueel kunt aanpassen en het resultaat tegelijk in alle formaten ziet veranderen. Een groot kleurvoorbeeld toont uw huidige keuze, en met knoppen om met één klik te kopiëren neemt u de waarde in elk formaat over voor uw code of ontwerptool.
Een ingebouwd snelkleurenpalet geeft direct toegang tot veelgebruikte kleuren, en de generator voor willekeurige kleuren helpt u nieuwe combinaties te ontdekken. Alles draait volledig in uw browser, zonder communicatie met een server, zodat uw werkwijze snel en privé blijft.
Belangrijkste functies
- Realtime omzetting tussen de kleurformaten RGB, HEX en HSL
- Interactieve RGB-schuifregelaars met afzonderlijke controle over het rode, groene en blauwe kanaal
- HSL-schuifregelaars voor intuïtieve aanpassing van tint, verzadiging en helderheid
- Directe invoer van HEX-codes met automatische validatie
- Groot kleurvoorbeeld met direct visueel resultaat
- Kopiëren naar het klembord met één klik voor elk kleurformaat
- Generator voor willekeurige kleuren om nieuwe combinaties te ontdekken
- Snel kleurenpalet met veelgebruikte kleuren
- Kleurformaatgids die uitlegt wanneer u welk formaat gebruikt
- 100% verwerking aan de clientzijde voor volledige privacy
Zo gebruikt u de kleurconverter
- Kies uw invoermethode: Pas de RGB-schuifregelaars of HSL-schuifregelaars aan, of typ een HEX-code rechtstreeks in het HEX-invoerveld.
- Zie de resultaten live: De waarden in alle drie de kleurformaten worden direct bijgewerkt terwijl u aanpassingen maakt. Het grote voorbeeld toont uw huidige kleur.
- Kopieer de gewenste waarde: Klik op de kopieerknop naast een formaat (RGB, HEX of HSL) om het naar uw klembord te kopiëren.
- Gebruik snelkleuren: Klik op een kleurstaal in het onderdeel Snelkleuren om direct een vooraf ingestelde kleur te laden en de waarden in alle formaten te zien.
- Probeer willekeurige kleuren: Klik op de knop „Willekeurige kleur” om een willekeurige kleur te genereren en nieuwe paletten te verkennen.
Toepassingen
- CSS-ontwikkeling: Zet HEX-codes uit ontwerpmockups om naar de RGB- of HSL-waarden die u nodig hebt in CSS custom properties en verlopen.
- Beheer van huiskleuren: Zet kleuren uit huisstijlrichtlijnen om tussen formaten voor consistent gebruik op web, e-mail en drukwerk.
- Thema's voor designsystemen: Gebruik HSL-waarden om consistente kleurschalen te maken door helderheid en verzadiging aan te passen en dezelfde tint te behouden.
- Toegankelijkheidstests: Zet kleuren om naar andere formaten om contrastverhoudingen te berekenen en te voldoen aan WCAG.
- Workflows voor beeldbewerking: Stem kleuren af tussen beeldbewerkers die RGB gebruiken en webprojecten die HEX-codes vereisen.
- Ontwerp van e-mailsjablonen: Zet moderne HSL-waarden om naar HEX-codes voor e-mailclients met beperkte CSS-ondersteuning.
- Datavisualisatie: Genereer nauwkeurige kleurwaarden voor grafieken en dashboards die exacte kleurspecificaties nodig hebben.
Veelgestelde vragen
Is deze tool gratis?
Ja, onze kleurconverter is volledig gratis te gebruiken, zonder limieten en zonder registratie.
Zijn mijn gegevens veilig?
Ja. Alle kleuromzettingen gebeuren volledig in uw browser. Er worden geen gegevens naar een server verzonden of ergens opgeslagen.
Wat is het verschil tussen RGB, HEX en HSL?
RGB definieert kleuren met waarden voor het rode, groene en blauwe kanaal (0-255). HEX is een compacte hexadecimale weergave van RGB-waarden, gebruikt in CSS en HTML. HSL beschrijft kleuren met tint (0-360°), verzadiging (0-100%) en helderheid (0-100%), wat het intuïtiever maakt om kleuren handmatig aan te passen.
Welk kleurformaat moet ik gebruiken voor webontwikkeling?
HEX is het meest gebruikte formaat in CSS. HSL verdient de voorkeur als u programmatisch kleurvarianten (lichtere of donkerdere tinten) wilt maken. RGB is handig als u met doorzichtigheid werkt via rgba()-waarden.
Kan ik kleuren met transparantie omzetten?
Deze tool zet dekkende kleuren om tussen RGB, HEX en HSL. Voor kleuren met transparantie kunt u na de omzetting handmatig een alfakanaal toevoegen (bijvoorbeeld rgba() of hsla() in CSS).
Tips & best practices
- Gebruik HSL voor thema's: Met HSL maakt u eenvoudig consistente kleurpaletten door alleen de helderheid aan te passen en tint en verzadiging vast te houden.
- Controleer contrastverhoudingen: Zorg bij het kiezen van tekst- en achtergrondkleuren voor voldoende contrast voor leesbaarheid. WCAG adviseert minimaal 4.5:1 voor normale tekst.
- Blijf bij webveilige kleuren: Kies voor maximale compatibiliteit tussen apparaten bij voorkeur kleuren die op alle schermen consistent worden weergegeven.
- Bewaar uw palet: Kopieer uw omgezette kleurwaarden en bewaar ze in een design tokens-bestand of in CSS custom properties voor consistent hergebruik.
- Gebruik de HEX-verkorting: Gebruik waar mogelijk HEX-codes van 3 cijfers (#F00 in plaats van #FF0000) voor overzichtelijkere CSS.
- Test in beide modi: Controleer uw kleurkeuzes altijd in zowel de lichte als de donkere modus voor leesbaarheid en visuele harmonie.