Gratis Kleurconverter
Converteer kleuren direct tussen HEX-, RGB-, HSL-, HSV- en CMYK-formaten. Inclusief een helderheidsschaal en vooraf ingestelde stalen.
Converteer een kleur tussen HEX, RGB, HSL, HSV en CMYK — met een live voorbeeld en één-taps kopiëren. Alles wordt in uw browser uitgevoerd.
Accepteert: HEX (#fff of #ffffff), RGB (255, 255, 255) of HSL (360, 100%, 50%)
WCAG-contrast
Op witte achtergrond
2,49:1
Op zwarte achtergrond
8,44:1
Helderheidsschaal
Klik op een kleurveld om naar die tint te schakelen
Veelvoorkomend gebruik
- Zet Kleuren om voor WebdesignHaal HEX-, RGB- en HSL-waarden op voor elke kleur — klaar om in CSS of Tailwind te plakken.
- Zet Kleuren om voor Afdrukken (CMYK)Zet schermkleuren (HEX/RGB) om in CMYK-waarden voor gebruik in printontwerp en professionele afdrukken.
- Bouw Kleurenpaletten voor OntwerpsystemenZet merktkleuren om over alle formaten en genereer consistent helderheidsschalen voor een compleet ontwerpsysteem.
- Controleer Kleurcontrast voor ToegankelijkheidConverteer kleuren om RGB-waarden op te halen voor gebruik in contrastraatgereedschappen - WCAG-conformiteit voor toegankelijk ontwerp.
- Converteer Kleuren voor FigmaKrijg exacte HEX- en RGB-waarden om in Figma-kleurkiezers en ontwerptoken-systemen in te plakken.
Hoe het werkt
Alle omzettingslogica is zelfgeschreven JavaScript dat volledig in je browser draait — geen bibliotheek, geen serveraanroep. De tool parst je invoer, stuurt die door een reeks pure wiskundige functies en levert tegelijk elf uitvoerformaten, waaronder de moderne CSS Color 4-ruimtes oklch() en lab().
- 1Flexibel parsen van invoerEen eigen parser accepteert hex (3, 4, 6 of 8 cijfers), rgb()/rgba(), hsl()/hsla() in zowel de oude syntaxis met komma's als de moderne met spaties, en losse numerieke drietallen. Alfawaarden als decimaal of percentage worden genormaliseerd naar het bereik 0–1 voordat de omzetting begint.
- 2RGB als centrale omzettingsvormElk geaccepteerd formaat wordt eerst omgezet naar een canoniek RGB-drietal. Vanuit die ene representatie waaiert de tool uit: HSL en HSV gebruiken de standaard min/max/chroma-formules; CMYK wordt afgeleid door het key-kanaal te bepalen; en sRGB-linearisatie (de stuksgewijze gammacurve uit IEC 61966-2-1) wordt toegepast vóór de berekeningen in perceptuele ruimtes.
- 3Perceptuele kleurruimtes vanaf nul berekendoklch() wordt berekend met de 3×3-referentiematrices van Björn Ottosson (LMS-ruimte met derdemachtswortel). lab() en lch() gebruiken Bradford-chromatische adaptatie om van het witpunt D65 naar D50 om te rekenen, zoals CSS Color 4 lab() definieert. Dit zijn dezelfde formules die rendering-engines van browsers gebruiken — hier geïmplementeerd zonder externe afhankelijkheid.
- 4WCAG-contrast en lichtheidsschaalDe relatieve luminantie wordt berekend volgens de WCAG 2.1-formule (gelineariseerde R, G, B gewogen 0.2126/0.7152/0.0722) en de contrastverhouding tegenover wit en zwart krijgt het oordeel AA-groot, AA, AAA of Onvoldoende. Een lichtheidsstrook van negen stappen ontstaat door het HSL-lichtheidskanaal van 10% tot 90% te laten oplopen; klik op een staal om die tint om te rekenen.
Gerelateerde tools
Kleurenkiezer en palettengenerator
Kies kleuren, converteer HEX/RGB/HSL en genereer harmonieuze paletten.
Willekeurige kleurengenerator
Genereer willekeurige kleuren één voor één of als palet van vijf, vergrendel de kleuren die je mooi vindt, kopieer HEX-, RGB- of HSL-waarden en exporteer het palet als PNG of CSS.
Kleurpalet-generator
Genereer complementaire, analoge, triadische en monochromatische kleurpaletten van elke basiskleur. Kopieer hexcodes met één klik.