Kleurconverter

Converteer tussen HEX, RGB en HSL met live preview.

Developer

Over kleurconverter

Webkleuren worden vaak gespecificeerd in HEX (bijv. voor CSS), RGB (voor ontwerptools) of HSL (voor eenvoudig aanpassen van tint en verzadiging). Deze tool converteert tussen alle drie en toont een live voorvertoning zodat je de waarde die je nodig hebt in je project kunt plakken.

Hoe te gebruiken Color Converter

  1. Voer een kleurwaarde in een van de drie velden in: HEX (bijv. #2563EB), RGB (bijv. 37, 99, 235), of HSL (bijv. 220, 84%, 53%).
  2. De andere twee formaten worden direct bijgewerkt, samen met een live kleurvoorvertoning.
  3. Gebruik de Kopieer-knoppen om de waarde te kopiëren die je nodig hebt voor CSS, ontwerptools of documentatie.

Belangrijkste kenmerken

  • Bidirectionele conversie tussen HEX-, RGB- en HSL-kleurformaten
  • Live kleurvoorvertoningsstaal dat in realtime wordt bijgewerkt
  • Ondersteunt verkorte HEX (#F00), volledige HEX (#FF0000) en diverse invoerstijlen
  • Kopiëren met één klik voor elk formaat — klaar om in CSS of ontwerptools te plakken
  • 100% browsergebaseerd — geen servercommunicatie, geen gegevens geüpload
  • Werkt samen met de Kleurenpaletgenerator voor complete kleurworkflows

Wanneer dit hulpmiddel te gebruiken

  • Een HEX-kleur uit een merkgids converteren naar RGB voor gebruik in een ontwerptool
  • Tint en verzadiging aanpassen in HSL en vervolgens het HEX-resultaat kopiëren voor CSS
  • Kleurspecificaties documenteren in meerdere formaten in stijlgidsen
  • CSS-kleurproblemen debuggen door de numerieke waarden achter een HEX-code te verifiëren
  • Snelle referentie wanneer een klant of ontwerper een kleur in een ander formaat levert dan wat je nodig hebt

Technische details

HEX-naar-RGB-conversie parseert de hexadecimale string in drie 8-bits gehele getallen (0–255) voor rood, groen en blauw. RGB-naar-HSL-conversie normaliseert de RGB-waarden naar 0–1, berekent de tint op basis van welk kanaal dominant is en leidt verzadiging en lichtheid af van het min/max van de drie kanalen. HSL-naar-RGB gebruikt het standaardalgoritme dat tint (0–360°), verzadiging (0–100%) en lichtheid (0–100%) terugbrengt naar 0–255 RGB-waarden. Alle conversies zijn wiskundig verliesvrij op de precisie van 8-bits kleur (256 niveaus per kanaal). De tool gebruikt puur JavaScript zonder externe bibliotheken.

Conclusie

De Kleurconverter is een essentiële tool voor webontwikkelaars en ontwerpers die snel moeten wisselen tussen HEX-, RGB- en HSL-kleurformaten. Met live voorvertoning en kopiëren met één klik stroomlijnt het elke kleurworkflow — allemaal binnen de privacy van je browser.

Veelgestelde vragen

Welke formaten worden ondersteund?
HEX (bijv. #FF5733 of FF5733), RGB (bijv. 255, 87, 51) en HSL (bijv. 11, 100%, 60%). Voer een waarde in elk formaat in en de andere worden bijgewerkt met een live voorvertoning.
Worden mijn gegevens naar een server gestuurd?
Nee. Alle conversie en voorvertoning gebeurt in je browser. Er wordt niets geüpload.
Kan ik de CSS-waarde kopiëren?
Ja. Gebruik de Kopieer-knoppen om de huidige kleur te kopiëren als hex, rgb() of hsl() voor gebruik in CSS.
Wat is het verschil tussen RGB en HSL?
RGB definieert kleur door de intensiteit van Rood, Groen en Blauw kanalen (elk 0–255). HSL definieert kleur door Tint (0–360° op het kleurenwiel), Verzadiging (0–100%) en Lichtheid (0–100%). HSL is vaak intuïtiever voor het aanpassen van kleuren omdat je helderheid of levendigheid kunt veranderen zonder de basistint te beïnvloeden.