Kleurformaten Uitgelegd: HEX, RGB en HSL
Snel antwoord
HEX (#RRGGBB) en RGB (0–255 per kanaal) coderen direct rood-, groen- en blauwintensiteiten. HSL (tint 0–360°, verzadiging/lichtigheid 0–100%) codeert kleur op een manier die overeenkomt met menselijke waarneming. Zet tussen alle drie om met onze Color Converter.
Invoering
Webkleuren worden gespecificeerd in drie dominante formaten: HEX (base-16 rood, groen, blauw), RGB (decimaal 0–255 per kanaal) en HSL (tint, verzadiging, lichtheid). Alle drie beschrijven dezelfde sRGB-kleurruimte maar ontsluiten verschillende assen: HEX en RGB zijn hardware-georiënteerd, terwijl HSL mens-georiënteerd is. Moderne CSS ondersteunt ook alpha via HEX8, rgba() en hsla().
Stap voor stap
-
Begrijp de HEX-notatie
HEX schrijft elk kanaal als een tweecijferig basis-16-nummer: #RRGGBB. 00 is uit, FF (255) is volledige intensiteit. #FF0000 is puur rood, #00FF00 puur groen, #0000FF puur blauw, #FFFFFF wit, #000000 zwart. Een 4-cijferige afkorting #RGB breidt uit naar #RRGGBB, en #RRGGBBAA voegt alfa toe (bijvoorbeeld #FF573380 is 50% alfa).
-
Begrijp de RGB-notatie
RGB gebruikt decimalen 0-55 per kanaal: rgb(255, 87, 51) is hetzelfde als #FF5733. De functie rgba() voegt een 0- alpha toe: rgba(255, 87, 51, 0,5) is 50% ondoorzichtig. RGB is gelijk aan HEX: het is gewoon decimaal in plaats van grondtal 16.
-
Begrijp de HSL-notatie
HSL gebruikt tint (0-60° op het kleurenwiel: 0=rood, 120=groen, 240=blauw), verzadiging (0% = grijs, 100% = kleur) en lichtheid (0% = zwart, 50% = normaal, 100% = wit). hsl(11, 100%, 60%) is levendig oranje. HSL maakt het triviaal om tinten (lichtheid verhogen) en tinten (lichtheid verlagen) van dezelfde tint op te bouwen.
-
Converteren tussen formaten
HEX→RGB: analyseer elk paar als basis-16. RGB→HEX: converteer elk kanaal naar 2-cijferige base-16. RGB→HSL: bereken max/min van genormaliseerde kanalen, lichtheid = (max+min)/2, verzadiging hangt af van lichtheid, tint is de hoek van het dominante kanaal. Gebruik onze Color Converter om dit allemaal direct te doen.
-
Kies het juiste formaat voor de taak
Gebruik HEX voor compactheid in ontwerptokens en assets. Gebruik RGB/rgba() wanneer u kanalen moet interpoleren of animeren. Gebruik HSL/HSLA bij het genereren van paletten, tinten of themavariaties. Het aanpassen van de helderheid met 10% is veel eenvoudiger dan redeneren over RGB delta's.
Voorbeelden
Puur rood in alle drie de formaten
Invoer: #FF0000
Uitvoer: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Een levendige sinaasappel
Invoer: #FF5733
Uitvoer: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Wit en zwart
Invoer: #FFFFFF en #000000
Uitvoer: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Een tint in 5 stappen opbouwen vanuit één HSL tint
Invoer: hsl(210, 70%, 50%) —varieer de lichtheid 30/40/50/60/70%
Uitvoer: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 —een samenhangend blauwpalet
Veelvoorkomende problemen
- Combinatie van 3-cijferige en 6-cijferige HEX: #F00 en #FF0000 hebben dezelfde kleur, maar sommige parsers accepteren slechts één formulier. Normaliseer de code naar 6 cijfers om verrassingen te voorkomen.
- We vergeten dat HSL lichtheid 50% niet 'halve helderheid' is: bij 100% verzadiging is 50% lichtheid de pure tint; boven de 50% kleurt het naar wit, onder de 50% kleurt het naar zwart. '50% grijs' is hsl(0, 0%, 50%).
- Alfakanaalverwarring: #RRGGBBAA (HEX8) wordt ondersteund in moderne browsers, maar niet in oudere browsers; rgba()/hsla() heeft bredere ondersteuning. Test altijd de doelomgeving.
- Niet-overeenkomende kleurruimte: HEX, RGB en HSL beschrijven allemaal sRGB. Als u converteert naar/van P3 of Lab/OKLCH (gebruikt door moderne beeldschermen), produceert een naïeve kanaalkopie verkeerde kleuren. Gebruik een goede kleurenbibliotheek.
Tips
- Gebruik HSL bij het ontwerpen van een palet: kies één tint en varieer vervolgens de lichtheid (bijvoorbeeld 30/50/70%) en verzadiging (bijvoorbeeld 60/80/100%) om samenhangende tinten en tinten te genereren.
- Controleer voor toegankelijkheid de contrastverhouding ten opzichte van de achtergrond. WCAG AA vereist 4,5:1 voor normale tekst, AAA 7:1. Gebruik onze Color Converter om de relatieve luminantie en het contrast te berekenen.
- Geef de voorkeur aan moderne CSS color-mix() of oklch() voor perceptueel uniforme interpolatie —RGB interpolatie kan door modderige grijstinten gaan bij het mengen van complementaire kleuren.
- Wanneer u gradiënten genereert, converteert u de eindpunten eerst naar hetzelfde formaat. Het combineren van HEX en HSL in één enkele gradiëntdeclaratie kan onverwachte middelpunten opleveren.