Kleurcode Converter

Converteer kleurcodes in bulk tussen HEX, RGB, HSL formaten. Plak meerdere kleuren en krijg alle conversies tegelijk.

Belangrijkste functies

Bulkconversie van kleuren
Ondersteuning voor HEX, RGB, HSL, RGBA, HSLA
Individuele of alle resultaten kopiëren
Kleurvoorvertoning voor elke invoer

Guide

Kleuren in digitale systemen worden vertegenwoordigd door numerieke codes. Verschillende contexten vereisen verschillende kleurcode-indelingen. Webontwikkelaars gebruiken hex-codes en CSS-kleurfuncties. Grafisch ontwerpers werken met CMYK voor print en RGB voor scherm. UI-ontwerpers verwijzen naar HSL voor intuïtieve kleuraanpassingen. Deze indelingen begrijpen, hoe ze zich tot elkaar verhouden en wanneer je elk gebruikt, is essentieel voor iedereen die met digitale kleur werkt. Deze gids behandelt de belangrijkste kleurcode-indelingen, conversiewiskunde en praktische toepassingen over ontwerp en ontwikkeling. RGB (Rood, Groen, Blauw) is het fundamentele kleurmodel voor schermen. Elke pixel op je monitor, telefoon of tablet produceert kleur door rood, groen en blauw licht te mengen op verschillende intensiteiten. Elk kanaal varieert van 0 (geen licht) tot 255 (maximale intensiteit). RGB(255, 0, 0) is puur rood. RGB(0, 255, 0) is puur groen. RGB(0, 0, 255) is puur blauw. RGB(255, 255, 255) is wit (alle kanalen op maximum). RGB(0, 0, 0) is zwart (geen licht). RGB(128, 128, 128) is een middelgrijs (gelijke delen van elk kanaal op halve intensiteit). Het RGB-model wordt additief genoemd omdat het combineren van alle kleuren op volledige intensiteit wit produceert, wat overeenkomt met hoe licht fysisch werkt. Hexadecimale kleurcodes zijn de meest voorkomende kleurindeling op het web. Een hex-code is gewoon een RGB-waarde geschreven in basis-16. De hex-code #FF0000 is RGB(255, 0, 0), wat rood is. De eerste twee tekens (FF) vertegenwoordigen het rode kanaal, de volgende twee (00) vertegenwoordigen groen en de laatste twee (00) vertegenwoordigen blauw. FF in hexadecimaal gelijk aan 255 in decimaal. 00 gelijk aan 0. 80 gelijk aan 128. Converteren tussen hex en RGB is een basisconversie: verdeel de hex-code in drie paren en converteer elk paar van basis-16 naar basis-10. Shorthand hex-codes gebruiken drie tekens in plaats van zes. #F00 is gelijk aan #FF0000. Elk teken wordt verdubbeld: #F00 wordt #FF0000, #39F wordt #3399FF, #000 wordt #000000. Deze shorthand werkt alleen wanneer elk paar uit twee identieke tekens bestaat. #3A7F2B kan niet worden ingekort omdat geen paar identieke cijfers heeft. Gebruik shorthand in code voor beknoptheid wanneer beschikbaar, maar wees ervan bewust dat sommige hulpmiddelen en ontwerpsystemen altijd de volledige zes-tekens-vorm uitvoeren. Acht-tekens-hex-codes voegen een alfa- (transparantie) kanaal toe. #FF000080 is rood op 50 procent dekking. De laatste twee cijfers (80, wat 128 in decimaal is, ruwweg 50 procent van 255) definiëren de alfa-waarde. #FF0000FF is volledig dekkend rood (identiek aan #FF0000). #FF000000 is volledig transparant rood (onzichtbaar). Acht-tekens-hex wordt ondersteund in moderne CSS en alle belangrijke browsers. Merk op dat sommige indelingen (zoals Android-ontwikkeling) het alfa-kanaal eerst plaatsen (#80FF0000), dus controleer de conventie voor je platform. HSL (Tint, Verzadiging, Lichtheid) vertegenwoordigt kleur op een manier die overeenkomt met hoe mensen over kleur denken. Tint is de kleurhoek op een kleurenwiel: 0 graden is rood, 120 graden is groen, 240 graden is blauw en 360 graden keert terug naar rood. Verzadiging is de intensiteit van de kleur van 0 procent (grijs) tot 100 procent (volledig levendig). Lichtheid is de helderheid van 0 procent (zwart) tot 100 procent (wit), waarbij 50 procent de normale kleur is. HSL(0, 100%, 50%) is puur rood. HSL(120, 100%, 50%) is puur groen. HSL(60, 100%, 50%) is puur geel, halverwege tussen rood en groen op het tintwiel. Het praktische voordeel van HSL boven RGB is intuïtieve kleurmanipulatie. Om een kleur lichter te maken, verhoog de lichtheidswaarde. Om hem meer gedempt te maken, verlaag verzadiging. Om de kleur te verschuiven (van rood naar oranje bijvoorbeeld), pas de tinthoek aan. In RGB vereist het bereiken van dezelfde aanpassingen het gelijktijdig wijzigen van meerdere kanaalwaarden, wat het moeilijker maakt het resultaat te voorspellen. Ontwerpers die kleurenpaletten bouwen werken vaak in HSL omdat ze harmonieuze variaties kunnen maken door systematisch één parameter tegelijk aan te passen. HSV (Tint, Verzadiging, Waarde) is nauw verwant aan HSL maar definieert helderheid anders. In HSV vertegenwoordigt waarde de maximale helderheid van de kleur. Op V=100 procent is de kleur zo helder als mogelijk. Op V=0 procent is de kleur zwart ongeacht tint en verzadiging. HSV is het native kleurmodel in veel ontwerphulpmiddelen inclusief de kleurkiezer van Adobe Photoshop. Het verschil tussen HSL en HSV is subtiel maar doet ertoe: HSL(0, 100%, 100%) is wit, terwijl HSV(0, 100%, 100%) puur rood is. HSV is intuïtiever voor schilders en ontwerpers die denken over tinten met wit versus schaduwen met zwart. HSL is symmetrischer en vaak geprefereerd in CSS. HWB (Tint, Witterheid, Zwartheid) is een nieuwere CSS-kleurfunctie die een ander intuïtief model biedt. De tint is hetzelfde als in HSL en HSV. Witterheid definieert hoeveel wit is gemengd (0 procent tot 100 procent). Zwartheid definieert hoeveel zwart is gemengd (0 procent tot 100 procent). HWB(0, 0%, 0%) is puur rood. HWB(0, 100%, 0%) is wit. HWB(0, 0%, 100%) is zwart. HWB(0, 50%, 0%) is een lichtroze (rood gemengd met 50 procent wit). Veel ontwerpers vinden HWB het meest intuïtieve model omdat het het fysische concept van verf mengen met wit of zwart weerspiegelt. CSS ondersteunt hwb() in alle moderne browsers. CMYK (Cyaan, Magenta, Geel, Key/Zwart) is het kleurmodel gebruikt in drukwerk. Terwijl schermen licht toevoegen (additieve kleurmenging), leggen printers inkt neer die licht absorbeert (subtractieve kleurmenging). Cyaan inkt absorbeert rood licht. Magenta absorbeert groen. Geel absorbeert blauw. Het key- (zwart) kanaal bestaat omdat het mengen van CMY-inkten theoretisch zwart produceert maar praktisch een modderig donkerbruin produceert. Een toegewijde zwarte inkt toevoegen produceert schonere donkere tinten en bespaart gekleurde inkt. CMYK-waarden variëren van 0 procent tot 100 procent voor elk kanaal. Converteren tussen RGB en CMYK is geen eenvoudige wiskundige formule. De theoretische conversie (C = 1 - R/255, M = 1 - G/255, Y = 1 - B/255, vervolgens K extraheren als het minimum van C, M, Y) geeft je een startpunt, maar werkelijke printkleuren hangen af van de inkt, het papier, de drukpers en het ICC-kleurprofiel. Professionele printworkflows gebruiken kleurbeheersystemen met gekalibreerde profielen om nauwkeurige reproductie te verzekeren. De WebRecast-converter voert de wiskundige conversie uit, wat geschikt is voor benaderingen, snelle referenties en niet-kritiek kleurwerk. Voor productie-printjobs, gebruik altijd een kleur-beheerde workflow met gekalibreerde profielen. CSS-kleurfuncties zijn in recente jaren aanzienlijk uitgebreid. De traditionele indelingen zijn hex (#FF0000), rgb(255, 0, 0) en hsl(0, 100%, 50%). Moderne CSS ondersteunt ook de hwb()-functie (Tint, Witterheid, Zwartheid), de lab()-functie (CIE LAB-kleurruimte voor perceptueel uniforme kleuren), de lch()-functie (CIE LCH, de cilindrische vorm van LAB) en de oklch()-functie (een gecorrigeerde versie van LCH die meer voorspelbare resultaten produceert). Deze nieuwere kleurruimten pakken beperkingen in RGB en HSL aan, in het bijzonder rond perceptuele uniformiteit, waar twee kleuren met dezelfde HSL-lichtheid nogal verschillend in helderheid kunnen lijken voor het menselijk oog. OKLCH verdient speciale aandacht omdat het snel de aanbevolen kleurruimte voor webontwerp wordt. OKLCH staat voor OK Lightness Chroma Hue en produceert perceptueel uniforme resultaten. Dit betekent dat een lichtheid van 70 procent even helder lijkt over alle tinten, in tegenstelling tot HSL waar geel op 50 procent lichtheid veel helderder lijkt dan blauw op 50 procent lichtheid. Voor het maken van toegankelijke kleurenpaletten, het genereren van consistente knop-zweef-statussen en het bouwen van ontwerptokensystemen produceert OKLCH betere resultaten dan HSL. De syntaxis is oklch(70% 0.15 250) waarbij 70 procent lichtheid is, 0.15 chroma (kleurintensiteit) en 250 de tinthoek is. Benoemde CSS-kleuren omvatten 148 vooraf gedefinieerde namen zoals red, blue, coral, darkslategray en papayawhip. Deze namen wijzen toe aan specifieke hex-waarden (coral is #FF7F50, papayawhip is #FFEFD5). Benoemde kleuren zijn handig voor prototyping en leesbaar in code, maar ze beperken je tot een vast palet. De meeste productie-CSS gebruikt hex-codes of HSL-functies voor nauwkeurige controle. De kleurnamen hebben historische oorsprong: sommige komen van X11-window-system-kleuren uit de jaren 80, vandaar dat er eigenaardigheden zijn zoals darkgray lichter dan gray. Alfa-transparantie (dekking) is beschikbaar in alle moderne CSS-kleurindelingen. rgba(255, 0, 0, 0.5) is rood op 50 procent dekking. hsla(0, 100%, 50%, 0.5) is dezelfde kleur. In moderne CSS (Level 4) kun je ook rgb(255 0 0 / 50%) schrijven met behulp van de spatie-gescheiden syntaxis met een schuine streep voor de alfa-waarde. Het alfa-kanaal varieert van 0 (volledig transparant) tot 1 (volledig dekkend) in CSS-functies, of 0 tot 255 in 8-tekens-hex. Het verschil tussen alfa-transparantie op een kleur en de CSS-dekingseigenschap is belangrijk: deking beïnvloedt het hele element en zijn children, terwijl kleur-alfa alleen die specifieke kleurwaarde beïnvloedt. Kleurcontrast is een kritieke overweging voor toegankelijkheid. De Web Content Accessibility Guidelines (WCAG) vereisen minimale contrastverhoudingen tussen tekst- en achtergrondkleuren. Niveau AA vereist 4,5:1 voor normale tekst en 3:1 voor grote tekst. Niveau AAA vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. Contrastverhouding wordt berekend uit de relatieve luminantie van twee kleuren met behulp van de formule (L1 + 0,05) / (L2 + 0,05), waarbij L1 de lichtere kleur is. Relatieve luminantie gebruikt een gewogen formule die rekening houdt met menselijke perceptie: L = 0,2126R + 0,7152G + 0,0722B (na gamma-correctie). Groen draagt het meeste bij aan waargenomen helderheid, vandaar dat groene tekst op wit hogere RGB-waarden nodig heeft dan rode tekst om hetzelfde contrast te bereiken. Kleurenblindheid treft ongeveer 8 procent van mannen en 0,5 procent van vrouwen. Het meest voorkomende type is rood-groen-kleurenblindheid (deuteranopie en protanopie), waarbij rood en groen vergelijkbaar lijken. Tritanopie (blauw-geel-kleurenblindheid) is zeldzaam. Achromatopsie (volledige kleurenblindheid) is extreem zeldzaam. Bij het selecteren van kleuren voor interfaces, grafieken of datavisualisaties, vermijd uitsluitend op kleur vertrouwen om informatie over te brengen. Gebruik kleur in combinatie met vormen, patronen, labels of positie. Je kleurenpalet testen met een kleurenblindheid-simulator helpt problematische combinaties identificeren. De kleuren blauw en oranje zijn onderscheidbaar door bijna alle typen kleurenblindheid. Een kleurenpalet bouwen voor een website of toepassing begint typisch met een primaire merk kleur. Vanaf die basis leid je een volledig palet af van tinten, schakeringen en complementaire kleuren. In HSL betekent schakeringen maken de lichtheid verlagen terwijl tint en verzadiging constant blijven. Tinten maken betekent lichtheid verhogen. Een complementaire kleur maken betekent 180 graden aan de tint toevoegen. Analoge kleuren bevinden zich binnen 30 graden van de basistint. Triadische kleuren zijn 120 graden uit elkaar. Split-complementaire kleuren zijn 150 en 210 graden van de basis. Deze kleurtheorie-relaties zijn gemakkelijk te berekenen in HSL en omslachtig in RGB of hex. Ontwerptokens en CSS-aangepaste eigenschappen (variabelen) zijn de moderne manier om kleuren in een codebasis te beheren. Definieer je kleuren één keer als CSS-aangepaste eigenschappen: --color-primary: hsl(220, 90%, 56%); --color-primary-light: hsl(220, 90%, 72%); --color-primary-dark: hsl(220, 90%, 40%). Verwijs naar deze variabelen door je stylesheets. Moet je de primaire kleur wijzigen, werk dan één waarde bij. Ontwerpsystemen zoals Material Design en Tailwind CSS organiseren kleuren in schalen (50, 100, 200 tot 900) die lichtheidsvariaties van elke tint vertegenwoordigen. Donkere modus vereist een andere benadering van kleur dan simpelweg alles omkeren. In donkere modus zijn achtergronden donker (niet puur zwart, wat te veel contrast en oogbelasting veroorzaakt) en tekst is licht (niet puur wit om dezelfde reden). Oppervlakken op verschillende elevatieniveaus gebruiken iets lichtere achtergrondtinten. Merkkleuren hebben vaak verminderde verzadiging en verhoogde lichtheid nodig in donkere modus om leesbaarheid te behouden zonder hard te lijken op donkere achtergronden. Een goed ontworpen kleursysteem met behulp van CSS-aangepaste eigenschappen kan wisselen tussen lichte en donkere paletten door variabelwaarden op wortelniveau te wijzigen. Kleurruimten voorbij sRGB worden belangrijk voor moderne beeldschermen. De sRGB-kleurruimte, gebruikt door standaard hex- en RGB-waarden, dekt slechts ongeveer 35 procent van zichtbare kleuren. Display P3, gebruikt door Apple-apparaten en veel moderne monitoren, dekt ongeveer 45 procent. Rec. 2020, gebruikt in HDR-televisie, dekt ongeveer 75 procent. De nieuwe CSS color-mix()-, color()- en oklch()-functies hebben toegang tot deze bredere gamut. Een kleur gespecificeerd als color(display-p3 1 0 0) produceert een levendiger rood dan #FF0000 op beeldschermen die P3 ondersteunen. Naarmate wide-gamut-beeldschermen standaard worden, wordt kleurruimten voorbij sRGB begrijpen steeds belangrijker voor het leveren van levendige visuele ervaringen. Kleuren programmatisch converteren in JavaScript gebruikt eenvoudige wiskunde. Om hex naar RGB te converteren: parseInt(hex.substring(1,3), 16) geeft het rode kanaal, en vergelijkbaar voor groen en blauw. Om RGB naar HSL te converteren: normaliseer R, G, B naar het 0-1-bereik, bereken maximale en minimale waarden, leid lichtheid af als (max+min)/2, verzadiging van het verschil tussen max en min, en tint van welk kanaal het maximum is. Deze formules zijn goed gedocumenteerd en geïmplementeerd in elke kleurmanipulatiebibliotheek (chroma.js, color, tinycolor2 in JavaScript, colour in Python en palette in Rust). Kleurverlopen gebruiken meerdere kleurcodes. Een CSS-lineair verloop overgaat tussen kleuren: background: linear-gradient(to right, #FF0000, #0000FF) creëert een rood-naar-blauw-verloop. Verlopen in RGB kunnen modderige tussenkleuren produceren omdat de rechte lijn tussen twee kleuren in RGB-ruimte mogelijk door onverzadigde regio's gaat. Verlopen in HSL of oklch produceren vaak levendigere overgangen omdat ze het kleurenwiel volgen. Moderne CSS-verloop-interpolatie met "in oklch" produceert perceptueel vloeiende overgangen: background: linear-gradient(in oklch, #FF0000, #0000FF). Dit is een merkbare verbetering voor verlopen tussen complementaire kleuren. De WebRecast-kleurconverter accepteert invoer in elke ondersteunde indeling en toont onmiddellijk de equivalente waarden in alle andere indelingen. Vul een hex-code in en zie de RGB-, HSL-, HSV- en CMYK-waarden. Vul een HSL-waarde in en ontvang de hex- en RGB-equivalenten. Dit elimineert handige conversiewiskunde en vermindert fouten bij het vertalen tussen ontwerphulpmiddelen (die mogelijk HSV tonen) en CSS (die hex, RGB of HSL gebruikt). De converter toont ook een visuele voorbeeld van de kleur zodat je kunt verifiëren dat deze overeenkomt met je intentie. Kleur in datavisualisatie vereist speciale aandacht. Grafieken, diagrammen en kaarten moeten kleuren gebruiken die van elkaar onderscheidbaar zijn, betekenisvol voor de kijker en toegankelijk voor mensen met kleurvisie-deficiënties. Sequentiële kleurschalen (licht naar donker van één tint) werken voor continue gegevens zoals temperatuur of bevolkingsdichtheid. Divergerende kleurschalen (twee tinten die samenkomen bij een neutraal middelpunt) werken voor gegevens met een betekenisvol middelpunt, zoals winst/verlies of afwijking van gemiddelde. Categorische kleurschalen (verschillende tinten) werken voor nominale gegevens zoals productcategorieën. Hulpmiddelen zoals ColorBrewer bieden op onderzoek gebaseerde paletten geoptimaliseerd voor verschillende gegevenstypes en toegankelijkheidsvereisten. Kleurbeheer over apparaten is een doorlopende uitdaging. Dezelfde hex-code kan er verschillend uitzien op verschillende schermen door variaties in beeldschermtechnologie, kalibratie, helderheid en omgevingslicht. sRGB is de standaardkleurruimte voor het web en de meeste beeldschermen zijn gekalibreerd om deze te benaderen. Professionele ontwerpers kalibreren hun monitoren met behulp van colorimeters (hardware-apparaten die beeldschermuitvoer meten) en ICC-profielen. Voor webontwikkeling waar je het beeldscherm van de gebruiker niet kunt beheersen, ontwerp met voldoende contrastmarges zodat lichte kleurweergaveverschillen de bruikbaarheid of leesbaarheid niet beïnvloeden. Kleurextractie uit afbeeldingen is nuttig voor het maken van paletten die overeenkomen met foto's, merk-assets of inspiratiebeelden. Het proces omvat het bemonsteren van dominante kleuren met behulp van algoritmes zoals k-means-clustering, mediaan-snede of octree-kwantisering. Deze algoritmes groeperen vergelijkbare pixels en identificeren de meest representatieve kleuren. Hulpmiddelen zoals Adobe Color, Coolors en verschillende npm-pakketten (color-thief, vibrant.js) automatiseren dit proces. 5 tot 8 dominante kleuren extraheren uit een hero-afbeelding en ze gebruiken als accentkleuren verzekert visuele consistentie tussen beeldmateriaal en UI-elementen. Kleurpsychologie, hoewel geen exacte wetenschap, heeft enkele gedocumenteerde effecten op perceptie. Rood verhoogt waargenomen urgentie en wordt veel gebruikt voor uitverwoopaankondigingen en foutstatussen. Blauw brengt vertrouwen en professionaliteit over, vandaar dat financiële instellingen en socialemediaplatforms het verkiezen. Groen signaleert succes, veiligheid en milieuthema's. Oranje wordt geassocieerd met actie en wordt veel gebruikt voor call-to-action-knoppen. Geel trekt aandacht en werkt voor waarschuwingen. Deze associaties worden cultureel beïnvloed: wit vertegenwoordigt rouw in sommige Oost-Aziatische culturen, terwijl rood geluk en voorspoed signaleert in de Chinese cultuur. Overweeg de culturele context van je doelpubliek bij het kiezen van kleurenschema's. Praktische tips voor het werken met kleurcodes: neem altijd het hekje (#) op bij het schrijven van hex-codes in CSS, want het is vereiste syntaxis. Gebruik kleine hex-cijfers voor consistentie (#ff0000 in plaats van #FF0000), wat ook de conventie is die door de meeste CSS-minifiers en -formatters wordt gebruikt. Verkiezen HSL in je CSS wanneer je programmatisch kleurvariaties moet maken. Gebruik 8-tekens-hex of rgba/hsla voor transparantie in plaats van de CSS-dekingseigenschap, die het hele element inclusief children beïnvloedt. Sla je merkkleuren op als ontwerptokens en verwijs er consistent door je project naar in plaats van kleurwaarden in individuele componenten hard te coderen. Bij het communiceren van kleuren met een ontwerpteam, neem zowel de hex-code als de visuele staal op om dubbelzinnigheid door schermkalibratieverschillen te vermijden.

Veelgestelde vragen

Hoe verschilt dit van een gewone kleurconverter?

Deze tool is ontworpen voor ontwikkelaars die meerdere kleuren tegelijk moeten converteren, met code-vriendelijk uitvoerformaat.

Welke kleurformaten worden ondersteund?

HEX (#RRGGBB), RGB(r,g,b), HSL(h,s%,l%), RGBA en HSLA worden allemaal ondersteund.