Kleurconverter
Voer een hex-kleurcode in om de RGB- en HSL-equivalenten te zien met individuele rode, groene en blauwe kanaalwaarden.
Hoe u deze kleurconverter gebruikt
- Voer de hex-kleurcode in
Typ een 6-cijferige hex-code in het veld Hex-kleurcode (bijv. FF6B35 of 00FF88). Laat het #-symbool weg.
- Lees de RGB-waarden af
De resultaten voor het rode, groene en blauwe kanaal tonen de waarden van 0–255 voor elke component.
- Bekijk de HSL-output
Bekijk het HSL-resultaat voor tint (0–360°), verzadiging en lichtheid — handig voor kleuraanpassingen.
Hoe deze kleurconverter werkt
Deze tool zet een hexadecimale kleurcode om naar RGB (rood, groen, blauw) en HSL (tint, verzadiging, lichtheid) weergaven. Elk hex-paar komt overeen met een 8-bit kanaalwaarde (0–255), en de HSL-conversie maakt gebruik van standaard wiskunde voor kleurruimten.
R = hex[0:2] → decimaal; G = hex[2:4] → decimaal; B = hex[4:6] → decimaal Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%).
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — puur zwart.
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — puur wit. Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — middelgrijs.
- ✓ Invoer is een geldige 6-cijferige hex-kleurcode.
- ✓ Alfakanaal wordt niet ondersteund in deze versie.
- CMYK-conversie vereist een kleurprofiel en is hier niet inbegrepen.
Kleurmodellen begrijpen
HEX, RGB en HSL zijn verschillende manieren om dezelfde kleur te beschrijven. HEX codeert RGB als een 6-cijferige hexadecimale reeks: elk paar tekens is één 8-bits kanaal (0–255). RGB drukt dezelfde waarden uit als drie getallen, de additieve primaire kleuren die schermen uitstralen. HSL (Hue, Saturation, Lightness) is een cilindrisch model: tint (hue) is de hoek op het kleurenwiel (0° rood, 120° groen, 240° blauw), verzadiging (saturation) is de kleurintensiteit en lichtheid (lightness) is de helderheid. Ontwerpers geven vaak de voorkeur aan HSL bij het programmatisch aanpassen van kleuren — door alleen de lichtheid te veranderen wordt een kleur donkerder of lichter zonder de tint te wijzigen, en het aanpassen van de verzadiging regelt de levendigheid.
Toepassingen voor kleurconversie voor ontwikkelaars
Ontwikkelaars converteren kleuren bij het bouwen van ontwerpsystemen, het implementeren van thema's, het genereren van kleurenpaletten en het debuggen van CSS. Design tokens slaan kleuren vaak op in hex; converteren naar RGB of HSL maakt runtime-berekeningen mogelijk, zoals transparantie-overlays of toegankelijkheidscontroles voor contrast. Thema-wisselaars moeten mogelijk lichtere of donkerdere varianten afleiden van een basiskleur met behulp van HSL. Geautomatiseerde toegankelijkheidstools converteren kleuren om luminantie en contrastverhoudingen te berekenen. Bij het debuggen van lay-out- of themafouten helpt het zien van een hex-waarde als RGB of HSL om te identificeren welk kanaal afwijkt. Kleurconversie wordt ook gebruikt in datavisualisatie, grafiekbibliotheken en dynamische UI-thema's.
Veelgestelde vragen
Kan ik een 3-cijferige hex-code invoeren?
Momenteel verwacht deze tool een 6-cijferige code. Voor een 3-cijferige afkorting zoals F60, breid deze eerst uit naar FF6600.
Wat is HSL?
HSL staat voor Hue, Saturation, Lightness. Het is een alternatieve manier om kleuren te beschrijven die sommige ontwerpers intuïtiever vinden dan RGB.