Kies een kleur of voer waarden in elk formaat in. Converteert direct tussen HEX, RGB en HSL met een live voorbeeldstalen en één‑klik kopiëren.
Krijg toegang tot onze volledige reeks lokale SEO‑tools, ranktracking en AI‑gestuurde optimalisatie.
Gratis aanmeldenKleur is een van de krachtigste ontwerpelementen op het web, en het kiezen van het juiste formaat voor je CSS kan een groot verschil maken in de efficiëntie van je workflow. De drie meest gebruikte kleurformaten — HEX, RGB en HSL — vertegenwoordigen elk hetzelfde spectrum van meer dan 16 miljoen kleuren, maar ze verschillen aanzienlijk in hoe intuïtief ze te lezen en te bewerken zijn. HEX-codes zoals #3b82f6 zijn compact en alomtegenwoordig in CSS, terwijl RGB-waarden zoals rgb(59, 130, 246) direct overeenkomen met de rode, groene en blauwe lichtkanalen die je scherm gebruikt om kleur weer te geven.
HSL (Tint, Verzadiging, Helderheid) wordt steeds meer geprefereerd door ontwerpers omdat het aansluit bij hoe mensen van nature over kleur denken. In plaats van abstracte kanaalwaarden te mengen, kies je een tint op het kleurenwiel (0-360 graden), stel je de intensiteit in met verzadiging (0-100%) en regel je de helderheid met lichtheid (0-100%). Dit maakt het eenvoudig om harmonieuze paletten te creëren: houd de tint constant en varieer verzadiging en helderheid om tinten, schaduwen en tonen van dezelfde kleur te produceren. Moderne CSS‑custom properties werken bijzonder goed met HSL, waardoor je een basistint kunt definiëren en een volledig palet ervan kunt afleiden.
Kleuren kiezen die er goed uitzien is slechts de helft van de vergelijking — ze moeten ook toegankelijk zijn. De Web Content Accessibility Guidelines (WCAG 2.1) vereisen een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. Ongeveer 8 % van de mannen en 0,5 % van de vrouwen heeft een vorm van kleurenblindheid, dus alleen op kleur vertrouwen om informatie over te brengen is een veelvoorkomende toegankelijkheidsvalkuil. Combineer je kleurkeuzes altijd met een contrastchecker en overweeg hoe je ontwerp eruitziet onder gesimuleerde kleurenblindheidsfilters. Deze converter helpt je snel te itereren op kleurwaarden zodat je verschillende combinaties kunt testen en de perfecte balans tussen esthetiek en leesbaarheid kunt vinden.