De kleurcodeomzetter gebruiken
- Kies de bestaande notatie: HEX, RGB of HSL. De invoervelden passen zich daaraan aan.
- Voer elk kanaal in. HEX accepteert drie of zes cijfers; RGB gehele waarden 0–255; HSL elke numerieke tint en percentages 0–100.
- Kies de doelnotatie en Kleur omzetten. Code en kleurvlak verschijnen samen om tekst en zichtbare kleur te controleren.
- Kopieer voor CSS of ontwerpnotities. Notaties omwisselen maakt de omgezette notatie bewerkbaar met behoud van kleur. Elke veldwijziging wist het oude resultaat tot de volgende omzetting.
HEX, RGB en HSL beschrijven dezelfde webkleur
HEX en RGB coderen rode, groene en blauwe lichtkanalen. Zescijferige HEX gebruikt twee hexadecimale cijfers per kanaal: #3366FF is rood 0x33 = 51, groen 0x66 = 102 en blauw 0xFF = 255. De korte #0F8 herhaalt elk cijfer tot #00FF88. Uitvoer is altijd zescijferige HEX in hoofdletters voor consistent kopiëren.
HSL beschrijft tint, verzadiging en lichtheid. Tint is een hoek op de kleurcirkel, verzadiging de mate van levendigheid of grijsheid, en lichtheid loopt van zwart bij 0% via de gekozen kleur rond 50% naar wit bij 100%. HSL helpt verwante kleuren aan te passen zonder direct in RGB-kanalen te denken.
Omzetrichting en formules
HEX naar RGB maakt elk hexadecimaal paar een geheel getal 0–255. RGB naar HEX doet het omgekeerde en vult losse cijfers met een voorloopnul aan. RGB naar HSL schaalt kanalen eerst naar 0–1, zoekt hoogste en laagste waarde en leidt lichtheid, verzadiging en tintsector af. HSL naar RGB berekent chroma uit verzadiging en lichtheid, plaatst die in de tintsector en voegt lichtheidsverschuiving toe vóór kanaalafronding.
Alle zes richtingen worden ondersteund: HEX↔RGB, HEX↔HSL en RGB↔HSL. Tussen HEX en HSL wordt intern RGB gebruikt. Het resultaat beschrijft dezelfde kleur binnen de gehele-kanaalgrenzen van CSS RGB en zescijferige HEX.
Bereiken, tintomloop en precisie
- HEX-invoer is precies drie of zes hexadecimale cijfers, eventueel voorafgegaan door #. Alfa, kleurnamen, achtcijferige HEX, CSS-variabelen en willekeurige CSS-uitdrukkingen vallen buiten deze pagina.
- RGB-kanalen zijn gehele waarden 0–255. Decimalen, negatieve en te grote waarden worden geweigerd in plaats van ongemerkt begrensd.
- Verzadiging en lichtheid accepteren decimalen van 0–100%. Tint is periodiek: 360° = 0°, 420° = 60° en −120° = 240°.
- RGB en HEX gebruiken gehele uitvoer. HSL toont maximaal twee decimalen zonder eindnullen. Zwart, wit en grijs gebruiken tint 0°, omdat tint bij 0% verzadiging niet zichtbaar is.
- Het kleurvlak is een visuele controle, geen gekalibreerd bewijs. Scherm, browserkleurbeheer, omgevingslicht en toegankelijkheidscontrast beïnvloeden hoe kleur wordt ervaren.
Praktische toepassingen en uitvoer
- Zet een HEX-ontwerptoken om naar RGB voor code, documentatie of software met aparte kanalen.
- Zet RGB naar HSL om voordat je tint, verzadiging of lichtheid voor een verwante hover-, rand- of achtergrondkleur aanpast.
- Vergelijk geplakte waarden met het kleurvlak vóór kopiëren. Het voorbeeld gebruikt de berekende zescijferige HEX lokaal en stuurt geen kleurinvoer naar analyses.
- Kopiëren geeft één doelwaarde, zoals rgb(51, 102, 255) of hsl(225deg, 100%, 60%). Deze tool maakt geen paletten, haalt geen kleuren uit afbeeldingen en biedt geen CMYK-drukprofielen.
Omzetrichtingen voor HEX, RGB en HSL
Kies het paar dat bij je bron- en doelcode past. Elke richting hieronder bevat volledige namen, omrekenregel en een invoer-naar-resultaatvoorbeeld.
HEX hexadecimaal naar RGB rood, groen, blauw
Splits zescijferige HEX in rode, groene en blauwe paren en zet elk paar om naar een tientallig geheel getal. #3366FF geeft 0x33 = 51, 0x66 = 102 en 0xFF = 255, dus rgb(51, 102, 255). Een korte waarde zoals #0F8 wordt eerst #00FF88.
RGB rood, groen, blauw naar HEX hexadecimaal
Zet elk geheel kanaal van 0–255 om naar twee hexadecimale cijfers en zet ze na #. rgb(255, 87, 51) geeft FF, 57 en 33, dus #FF5733. Een kanaal onder 16 krijgt een voorloopnul.
HEX hexadecimaal naar HSL tint, verzadiging, lichtheid
Decodeer eerst naar RGB, normaliseer kanalen naar 0–1 en bereken tint, verzadiging en lichtheid uit maximum, minimum en kanaalverschil. #3366FF wordt bijvoorbeeld hsl(225deg, 100%, 60%).
HSL tint, verzadiging, lichtheid naar HEX hexadecimaal
Kies met tint de kleurcirkelsector, combineer verzadiging en lichtheid tot RGB, rond kanalen af en codeer als HEX. hsl(60deg, 100%, 50%) wordt #FFFF00. Tint 420° geeft hetzelfde omdat tint elke 360° herhaalt.
RGB rood, groen, blauw naar HSL tint, verzadiging, lichtheid
Normaliseer RGB, zoek maximum en minimum, gebruik hun midden voor lichtheid en hun verschil voor verzadiging en tint. rgb(128, 128, 128) wordt ongeveer hsl(0deg, 0%, 50.2%); bij nul verzadiging verandert tint het zichtbare grijs niet.
HSL tint, verzadiging, lichtheid naar RGB rood, groen, blauw
Bereken chroma uit verzadiging en lichtheid, plaats die in de tintsector en tel de lichtheidsverschuiving op vóór schalen naar 0–255. hsl(240deg, 100%, 50%) wordt rgb(0, 0, 255). RGB-kanalen worden op gehele getallen afgerond.
Uitgewerkte omrekenvoorbeelden
Voorbeeld 1: HEX naar RGB en HSL
Voer #3366FF als HEX in. HEX naar RGB geeft rgb(51, 102, 255). Wijzig na geslaagde omzetting het doel naar HSL: het resultaat wordt direct hsl(225deg, 100%, 60%). Het kleurvlak blijft hetzelfde blauw, omdat alleen de notatie veranderde.
Voorbeeld 2: HSL-tintomloop naar HEX
Kies HSL en voer H = 420, S = 100 en L = 50 in. Tint herhaalt elke 360°, dus 420° is hetzelfde als 60°. HSL naar HEX geeft #FFFF00 en naar RGB rgb(255, 255, 0), beide geel.
Veelgestelde vragen
Kan ik de korte #RGB-notatie invoeren?
Ja. Driecijferige HEX herhaalt elk cijfer: #0F8 wordt #00FF88. Vier- en achtcijferige alfavormen worden niet ondersteund.
Waarom heeft grijs tint 0°?
Bij 0% verzadiging geeft elke tint hetzelfde grijs. De omzetting gebruikt 0° als vaste conventie; dit betekent niet dat grijs rood is.
Waarom wist of verandert een notatiewijziging het resultaat?
Vóór de eerste geslaagde omzetting en na veldbewerking houden notatiewijzigingen het resultaat leeg. Na geslaagde omzetting werkt alleen notatie wijzigen direct bij, omdat de bevestigde kleur gelijk blijft.
Krijg ik bij terugzetten altijd dezelfde HSL-decimalen?
De kleur wordt via gehele RGB-kanalen hersteld. Verschillende HSL-decimalen kunnen dezelfde RGB-kleur geven; heen en terug kan dus iets andere HSL-getallen geven terwijl HEX en zichtbare kleur gelijkwaardig blijven.
Vervangt dit drukkleurbeheer of contrastcontrole?
Nee. Dit omvat alleen browsergerichte HEX-, RGB- en HSL-notatie. CMYK-profielen, steunkleuren, schermkalibratie, paletgeneratie en WCAG-contrast vereisen aparte tools en context.