Hex RGB HSL-kleurenconverter

Gratis kleurconverter: HEX naar RGB, RGB naar HEX, plus HSL, HSV, CMYK en alpha. Live schuifregelaars, kleurkiezer, EyeDropper, opgeslagen stalen, harmonieën, WCAG-contrast, voorbeeld van kleurenblindheid en code-export, geen aanmelding, werkt lokaal.

Gebouwd en onderhouden door Shehzad Munir ·

Hex RGB HSL-kleurenconverter
Loading Color Converter
Share

Converteer kleuren direct in elke richting

Converteer elke kleur tussen HEX, RGB, HSL, HSV/HSB en CMYK in beide richtingen, zodra u typt. Het is gebouwd voor ontwerpers en ontwikkelaars en voegt interactieve RGB/HSL/alpha-schuifregelaars toe met live gradiënttracks, een kleurkiezer, een scherm-eyedropper, opgeslagen en recente stalen, kant-en-klare kleurharmonieën, een tint/schaduwverloop, een tweekleurenmixer, een voorbeeld van kleurenblindheid, live WCAG-contrastcontroles en kopieerklare codefragmenten voor CSS, Tailwind, SCSS, Swift en Android, allemaal in uw browser, zonder dat er iets is geüpload.

Een kleurenconverter is alleen nuttig als deze elke notatie uitspreekt die u doet. Deze tool converteert HEX naar RGB en terug, en overbrugt ook HSL, HSV (ook wel HSB genoemd) en CMYK, allemaal tegelijk en in realtime. Typ een HEX zoals #3b82f6 en je krijgt onmiddellijk de rgb(59, 130, 246), de hsl(217, 91%, 60%), de hsv(217, 97%, 96%) en de cmyk(76%, 47%, 0%, 4%). Wijzig een enkel veld en de andere volgen, zodat u kunt redeneren in het model dat bij de taak past: HEX voor opmaak, RGB voor canvas en verlopen, HSL/HSV voor intuïtieve lichtheids- en verzadigingsaanpassingen, en CMYK wanneer een ontwerp moet worden afgedrukt.

Functies

  • Bidirectioneel HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK, met alfa
  • Interactieve RGB-, HSL- en alfa-schuifregelaars met live verlooptracks
  • Native kleurenkiezer + browser-eyedropper
  • Recente geschiedenis + opgeslagen stalen (bewaard in uw browser)
  • Ondersteuning voor CSS-kleuren (karmozijnrood, groenblauw, goud...)
  • Harmonies, tint/schaduwhelling + tweekleurenmixer
  • Voorbeeld van kleurenblindheid (protanopie, deuteranopie, tritanopie)
  • Live WCAG AA/AAA-contrastbadges
  • Kopieerklare export voor CSS, Tailwind, SCSS, Swift en Android

Hoe Hex RGB HSL-kleurenconverter te gebruiken

  1. 1

    Kies of typ een kleur

    Gebruik de kleurkiezer, de Pipet, of typ een HEX-, rgb(), hsl(), hsv()/hsb(), cmyk()-waarde of een CSS-kleurnaam zoals 'teal'. Elk ander formaat wordt onmiddellijk bijgewerkt.

  2. 2

    Lees de conversies

    De HEX-, RGB-, HSL-, HSV- en CMYK-velden blijven allemaal gesynchroniseerd. Bewerk een van deze en de rest wordt live herberekend, zodat u in elke gewenste notatie kunt werken.

  3. 3

    Ontdek paletten en harmonieën

    Klik op complementaire, analoge, triadische of tetradische stalen, loop over de tint/schaduw-lichtheidshelling of meng twee kleuren met de mixer om precies de gewenste tint te krijgen.

  4. 4

    Kopieer en controleer het contrast

    Kopieer elk formaat met één klik en lees de WCAG AA/AAA-badges om te bevestigen dat uw kleur leesbaar blijft in wit of zwart voordat u deze verzendt.

Veelvoorkomende gebruiksscenario's

  • Converteer HEX naar RGB (of RGB naar HEX) tijdens het schrijven van CSS of JSX.
  • Vertaal een merk-HEX naar HSL/HSV voor thema- en alfa-aanpassingen.
  • Zet een kleur om in CMYK voor print- en prepress-workflows.
  • Bouw toegankelijke paletten met directe WCAG-contrastfeedback.
  • Genereer complementaire en analoge schema's voor gebruikersinterface en illustraties.
  • Pak een kleur rechtstreeks van het scherm met de EyeDropper.

Gedetailleerde gids

Van HEX tot RGB, HSL, HSV en CMYK zonder wiskunde

Onder de motorkap normaliseert de converter elke invoer naar een enkele RGB-triple en past vervolgens de standaard sRGB-formules toe om de andere ruimtes af te leiden, dezelfde wiskundige browsers en ontwerptools gebruiken, zodat de cijfers overeenkomen met wat je ziet in Figma, Photoshop of Chrome DevTools. Het begrijpt ook steno HEX (#fff), 8-cijferige HEX met alfa (#3b82f6aa), rgb()/rgba(), hsl()/hsla() en veelgebruikte CSS-namen zoals karmozijnrood, groenblauw en goud, zodat u nooit een formule hoeft te onthouden of van tabblad hoeft te wisselen. Elk formaat heeft een kopieerknop en het grote voorbeeldstaal toont uw kleur op een echte achtergrond, zodat u deze in één oogopslag kunt controleren.

Ontwerp betere paletten met harmonieën en hellingen

Het kiezen van een enkele kleur is eenvoudig; het opbouwen van een samenhangend palet is het moeilijkste deel. De converter genereert kleurharmonieën op basis van kleurtheorieregels, complementair (tegenovergesteld op het wiel), analoog (buren), triadisch en tetradisch (gelijkmatig verdeeld), als klikbare stalen die u rechtstreeks in uw project kunt plaatsen. Een lichtheidshelling loopt van bijna zwart naar bijna wit met dezelfde tint en verzadiging, waardoor je de tinten en tinten krijgt waar ontwerpers naar streven als ze hover-, rand- en uitgeschakelde staten nodig hebben. Met een tweekleurenmixer kunt u elk paar in een gekozen verhouding mengen om tussenvormen te creëren, en met een fijnafgestelde rij kunt u de tint met één klik lichter, donkerder, verzadigen, desatureren of roteren.

Toegankelijkheid en privacy ingebouwd

Goede kleur is leesbare kleur. De converter toont de WCAG-contrastverhouding van uw kleur ten opzichte van zowel wit als zwart en markeert de naleving van AA (4,5:1) en AAA (7:1), zodat u tekst met laag contrast kunt opvangen voordat deze wordt verzonden, een natuurlijke aanvulling op de speciale contrastcontrole. En omdat alles lokaal in uw browser draait, verlaten uw kleuren uw apparaat nooit: er is geen upload, geen account en geen tracking, waardoor het werk van merk en klant privé blijft terwijl de tool direct beschikbaar blijft.

Veelgestelde vragen

Hoe converteer ik HEX naar RGB?

Typ of plak een HEX-waarde (zoals #3b82f6 of #fff) in het HEX-veld, of gebruik de kleurkiezer. De RGB-waarde verschijnt onmiddellijk als rgb(r, g, b) en u kunt deze met één klik kopiëren. De conversie werkt ook andersom: typ een rgb()-waarde en de HEX-updates worden live uitgevoerd.

Kan ik tegelijkertijd naar HSL, HSV en CMYK converteren?

Ja. Elk veld: HEX, RGB, HSL, HSV/HSB en CMYK blijft gesynchroniseerd. Bewerk er één en de anderen worden onmiddellijk opnieuw berekend, zodat u alle vijf de notaties voor dezelfde kleur kunt lezen zonder afzonderlijke hulpmiddelen uit te voeren.

Wat is het verschil tussen HSL en HSV?

Beide beschrijven een kleur op basis van tint, maar HSL (lichtheid) en HSV/HSB (waarde/helderheid) modelleren de verzadiging anders. HSL plaatst pure kleuren op een lichtheid van 50%, terwijl HSV ze op een waarde van 100% plaatst, zodat hetzelfde percentage er tussen de twee lichter of donkerder uit kan zien. Deze tool toont beide, zodat u degene kunt kiezen die uw raamwerk verwacht.

Hoe krijg ik een CMYK-waarde voor afdrukken?

Typ uw kleur in een willekeurig formaat en lees het CMYK-veld, bijvoorbeeld #3b82f6 wordt cmyk(76%, 47%, 0%, 4%). CMYK is het subtractieve model dat door drukkers wordt gebruikt, dus dit is handig wanneer een webkleur moet worden afgestemd in een brochure of verpakking.

Kan ik een kleur kiezen op mijn scherm?

Ja, in ondersteunde browsers (Chrome, Edge en andere met de EyeDropper API) opent de knop 'Kies' een pipet op het scherm, zodat u elke pixel, kleur uit een afbeelding, een website of uw bureaublad kunt samplen en deze rechtstreeks in de converter kunt laden.

Kan ik kleuren aanpassen met schuifregelaars en transparantie toevoegen?

Ja. Interactieve R-, G-, B-, H-, S-, L- en alfa-schuifregelaars tonen elk een live verloopspoor, zodat u een tint kunt verfijnen door een exacte waarde te slepen of te typen. De alpha-schuifregelaar produceert 8-cijferige HEX- en rgba()/hsla()-uitvoer voor transparantie.

Laat het zien hoe een kleur eruit ziet voor kleurenblinde gebruikers?

Ja. Het kleurenblindheidsvoorbeeld simuleert hoe uw kleur eruitziet onder protanopie, deuteranopie, tritanopsie en volledige achromatopsie, zodat u kunt controleren of een palet nog steeds communiceert voor ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen met een kleurenblindheidstekort.

Kan ik de kleur exporteren als CSS, Tailwind of app-code?

Ja. Het exportpaneel biedt kopieerklare fragmenten voor CSS-variabelen, rgb(), SCSS, een Tailwind-configuratie-item, Swift UIColor, Android Color.parseColor en JSON, plus recente en opgeslagen stalen die lokaal in uw browser zijn opgeslagen.

Is de kleurenconverter gratis en privé?

Ja. Het is volledig gratis, u hoeft zich niet aan te melden en alle conversies gebeuren lokaal in uw browser. Uw kleuren worden nooit naar een server geüpload, dus het werk van merk en klant blijft privé.

Kan ik RGB of HEX omzetten naar HSL en OKLCH?

Ja. Het converteert tussen HEX, RGB(A), HSL en modern OKLCH, zodat u het exacte formaat kunt kopiëren dat uw CSS of ontwerptool nodig heeft.

Kan het omgaan met transparantie (RGBA/HEX met alfa)?

Ja. Voeg een alfawaarde toe en het produceert RGBA en 8-cijferige hex, zodat de dekking behouden blijft wanneer u de kleur naar uw stijlen kopieert.

Uit het journaal

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min