Hex, RGB en HSL
Vul de kleur in in het formaat dat je hebt, dan vullen de andere zich. Alle drie de velden hangen samen.
Zo ziet de kleur eruit
Tekst op wit · 3,89
Tekst op zwart · 5,39
- Hex#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Kanalen
- Rood224
- Groen82
- Blauw31
- Tint16°
- Verzadiging76%
- Lichtheid50%
Reeks lichtheden
Dezelfde tint en verzadiging, lichtheid van 10 tot 90%. Klik op een vlak om het over te nemen.
Zo werkt het
Hex is hetzelfde als RGB, alleen met hexadecimale cijfers geschreven. Elk paar tekens staat voor een kanaal, van 00 tot ff, dus 0 tot 255.
De korte vorm met drie tekens is een afkorting waarbij elk teken wordt verdubbeld. #f30 betekent dus #ff3300, waardoor maar 4.096 van de 16,7 miljoen kleuren zo te schrijven zijn.
HSL beschrijft dezelfde kleuren met tint, verzadiging en lichtheid in plaats van met drie lichtbronnen. De tint is een hoek op de kleurencirkel, waarbij 0 rood is, 120 groen en 240 blauw.
Met HSL werkt het prettiger als je varianten van dezelfde kleur wilt. Houd tint en verzadiging vast en verander alleen de lichtheid, dan krijg je een reeks die bij elkaar past.
Het omrekenen tussen RGB en HSL is in beide richtingen exact, maar het afronden op hele graden en procenten in HSL kan een kanaal één stap verschuiven als je heen en weer gaat.
Zo rekent de tool om
Van RGB naar HSL wordt elk kanaal eerst door 255 gedeeld. De lichtheid L is het gemiddelde van het grootste en het kleinste kanaal. De verzadiging S is het verschil tussen die twee gedeeld door 1 − |2L − 1|. De tint H hangt af van welk kanaal het grootst is en wordt in graden gegeven. De andere kant op gebruikt dezelfde kleurencirkel in zes sectoren, en de kanalen worden op hele getallen afgerond. De regels met hex, RGB en HSL tonen hele getallen, terwijl de lichtheden onderaan met de onafgeronde waarden worden berekend.
Rekenvoorbeeld
#1e90ff is rood 30, groen 144 en blauw 255, dus 0,118, 0,565 en 1. Het grootst is 1 en het kleinst 0,118, dus L = (1 + 0,118) / 2 = 0,559, ofwel 55,9%. Het verschil 0,882 gedeeld door 1 − |2 × 0,559 − 1| = 0,882 geeft S = 1, ofwel 100%. Blauw is het grootst, dus H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 graden.
De tool schrijft de kleur als hsl(210, 100%, 56%). Typ je die tekst in, dan krijg je #1f8fff terug en niet #1e90ff, omdat het afronden op hele graden en procenten rood en groen elk een stap heeft verschoven.
HSL-lichtheid is geen waargenomen lichtheid
CSS Color 4 wijst erop dat geel en blauw allebei een HSL-lichtheid van 50% hebben, terwijl het geel er veel lichter uitziet. De contrastgetallen van de tool zelf laten hetzelfde zien: hsl(60, 100%, 50%) geeft tegen wit een verhouding van 1,07 en hsl(240, 100%, 50%) geeft 8,59. De lichtheden onder de kleur houden tint en verzadiging vast en veranderen alleen de lichtheid, in stappen van 10 procentpunten. Daardoor zien de stappen er niet even groot uit.
Wat de tool leest
De velden volgen CSS Color 4: hex met drie, vier, zes of acht tekens, rgb() met getallen of procenten, waarbij 100% 255 is, en hsl() met de tint in graden of in de eenheden deg, rad, grad en turn. Waarden mogen door komma’s of spaties worden gescheiden. Zo wordt rgb(50%, 50%, 50%) rgb(128, 128, 128), en krijgt hsl(0.5turn, 100%, 50%) de tint 180 graden, dus #00ffff.
Transparantie, in hex met vier of acht tekens, als vierde waarde of na een schuine streep, vervalt: de tool rekent met dekkende kleuren en meldt hoeveel transparantie er was. Waarden buiten hun bereik, zoals rgb(300, 0, 0), worden afgewezen zodat een tikfout opvalt, hoewel CSS ze naar de grens zou terugbrengen.