Vad är HEX, RGB och HSL?
HEX, RGB och HSL är tre olika sätt att representera samma färg. HEX är vanligast i HTML och CSS och skrivs som #RRGGBB där varje par är ett hexadecimalt värde 00–FF. RGB anger rött, grönt och blått var för sig som tal 0–255. HSL anger nyans (hue), mättnad (saturation) och ljushet (lightness).
Alla tre systemen representerar samma färgrymd men används i olika sammanhang. RGB och HEX är identiska i information — HEX är bara en kompaktare notation. HSL är mer intuitivt för designers som vill justera ljushet och mättnad utan att tänka på enskilda kanaler.
Hur omvandlar man HEX till RGB?
En HEX-kod som #FF5733 delas upp i tre par: FF (röd), 57 (grön) och 33 (blå). Varje par omvandlas från hexadecimalt till decimalt. Det ger RGB(255, 87, 51).
Formel
R = hex(RR), G = hex(GG), B = hex(BB) — omvandla varje hexadecimalt par till decimalt.
Räkneexempel
#1A2B3C → R = 0x1A = 26, G = 0x2B = 43, B = 0x3C = 60 → RGB(26, 43, 60). Omvänt: RGB(255, 0, 128) → R=FF, G=00, B=80 → #FF0080.
Hexadecimal notation är grunden för färgkodning på webben. Förstår du inte hur hex fungerar? Se vår talbas-omvandlare för att lära dig omvandla mellan decimalt och hexadecimalt.
Hur omvandlar man RGB till HSL?
Omvandling från RGB till HSL kräver normalisering av RGB-värdena till 0–1 och sedan beräkning av min, max och delta. Nyansen (H) beräknas utifrån vilken kanal som dominerar, mättnaden (S) utifrån delta och ljusheten (L) utifrån medelvärdet av min och max.
Räkneexempel
RGB(255, 87, 51): normaliserat (1, 0.341, 0.2). Max=1 (röd), min=0.2, delta=0.8. H = 60 × ((0.341-0.2)/0.8) = 10.6°. L = (1+0.2)/2 = 0.6 = 60%. S = 0.8/(1-|2×0.6-1|) = 1 = 100%. HSL(11°, 100%, 60%).
När använder man vilket format?
HEX är standard i HTML och CSS för statiska färger. RGB används när du behöver styra genomskinlighet med rgba(). HSL är bäst för dynamisk färggenerering i JavaScript och CSS — det är enkelt att justera ljushet eller skapa färgvarianter programmatiskt.
- HEX (#FF5733): HTML-attribut, CSS-variabler, design-verktyg
- RGB (255, 87, 51): CSS med opacity via rgba(), Canvas-API
- HSL (11°, 100%, 60%): Dynamiska teman, CSS custom properties
- RGBA / HSLA: Lägger till alfakanal för genomskinlighet
Jobbar du med teckenrepresentation i kod och vill förstå hur tecken lagras? Se vår ASCII/Unicode-omvandlare. Vill du räkna på bitvärden och bitmask-operationer? Se bitvärde-kalkylatorn.
Kortaste HEX-notation
I CSS kan HEX-koder med dubbla siffror förkortas. #FFAA00 kan skrivas #FA0 — webbläsaren expanderar automatiskt varje siffra till ett par. Det gäller bara när varje par har identiska siffror. #FF5733 kan inte förkortas eftersom paren inte är dubbletter.