Skip to content
⚡
ToolK.ioBloggGuider

Byggt med Next.js. Ingen data lagras. 100% i webbläsaren.

OmKontaktAnvändarvillkorIntegritetspolicyJuridiskt meddelande
© 2026 ToolK.io — Alla rättigheter förbehållna.
Utvecklare5 min läsning

HEX, RGB, HSL: Förstå webbfärgkoder

En enkel guide till HEX-, RGB- och HSL-färgkoder för designers och utvecklare som vill förstå webbfärger.

Publicerad den 21 mars 2026

HEX, RGB, HSL: Förstå webbfärgkoder

Du redigerar en webbplats och ser #FF5733 i CSS:en. Eller jobbar med en designer som skickar rgb(255, 87, 51). Eller ett designverktyg visar en färg som hsl(11, 100%, 60%). Alla dessa beskriver exakt samma färg — en livlig rödorange — men i tre olika format.

Om du någonsin blivit förvirrad av webbfärgkoder, den här guiden klargör allt på fem minuter.

16,7MFärger tillgängliga i HEX
3Vanliga färgformat
1996År då CSS-färgstöd började

Hur digitala färger fungerar

Varje färg på din skärm skapas genom att blanda tre primärfärger av ljus: Röd, Grön och Blå. Det är RGB-färgmodellen. Genom att variera intensiteten hos varje kanal från noll (av) till maximum (full ljusstyrka) kan du skapa ungefär 16,7 miljoner färger som en standardskärm kan visa.

  • Röd 255, Grön 0, Blå 0 = rent röd
  • Röd 0, Grön 255, Blå 0 = rent grön
  • Röd 0, Grön 0, Blå 255 = rent blå
  • Röd 255, Grön 255, Blå 255 = vit (alla kanaler på max)
  • Röd 0, Grön 0, Blå 0 = svart (alla kanaler av)
  • Röd 255, Grön 255, Blå 0 = gul (röd + grön)

Varje färgformat som används på webben är helt enkelt ett annat sätt att uttrycka dessa kanalvärden.

Visste du att? Siffran 16,7 miljoner färger kommer från 256 nivåer per kanal (0–255) över tre kanaler: 256 × 256 × 256 = 16 777 216 möjliga färger.

HEX-färger

Hur de ser ut

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Hur de fungerar

En HEX-färgkod är en sexsiffrig sträng föregången av ett brädgårdstecken. De sex tecknen delas upp i tre par, där varje par representerar en färgkanal i hexadecimalt (bas 16):

Par Kanal Intervall
Första två tecknen Röd 00 till FF
Mellersta två tecknen Grön 00 till FF
Sista två tecknen Blå 00 till FF

Hexadecimalt använder siffrorna 0–9 och bokstäverna A–F, där A=10, B=11, C=12, D=13, E=14, F=15. Alltså är FF i hexadecimalt lika med 255 i decimal (15 × 16 + 15 = 255).

Nedbrytning av #FF5733:

  • FF = Röd vid 255 (maximum)
  • 57 = Grön vid 87
  • 33 = Blå vid 51

Det ger en livlig rödorange.

Förkortning

När varje par har två identiska tecken kan du använda en trekarakters förkortning:

  • #FF0000 kan skrivas som #F00
  • #3366FF kan skrivas som #36F
  • #000000 kan skrivas som #000

Tips HEX-koder är det mest använda formatet i webbutveckling. Om du bara lär dig ett format, lär dig det här.

RGB-färger

Hur de ser ut

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Hur de fungerar

RGB-notation anger direkt kanalvärden för rött, grönt och blått som decimaltal från 0 till 255. Det är det mest intuitiva formatet eftersom talen direkt motsvarar intensiteten hos varje ljuskanal.

rgb(255, 87, 51) betyder:

  • Röd: 255 (maximum)
  • Grön: 87 (ungefär en tredjedel)
  • Blå: 51 (ungefär en femtedel)

RGBA: Lägga till transparens

RGBA lägger till ett fjärde värde för opacitet (alfa), från 0 (helt transparent) till 1 (helt ogenomskinlig):

rgba(255, 87, 51, 0.5)   /* 50% transparent */
rgba(0, 0, 0, 0.8)        /* 80% ogenomskinlig svart */

Det är användbart för överlägg, skuggor och designelement som behöver visa innehåll bakom sig.

HSL-färger

Hur de ser ut

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Hur de fungerar

HSL står för Nyans (Hue), Mättnad (Saturation), Ljushet (Lightness). I stället för att tänka i termer av kanal­blandning för röd/grön/blå beskriver HSL färg på det sätt som människor naturligt tänker på det.

Nyans är själva färgen, uttryckt som en grad på färghjulet (0–360):

  • 0° / 360° = Röd
  • 60° = Gul
  • 120° = Grön
  • 180° = Cyan
  • 240° = Blå
  • 300° = Magenta

Mättnad är hur livlig färgen är, från 0 % (grå) till 100 % (fullt mättad).

Ljushet är hur ljus eller mörk färgen är, från 0 % (svart) till 100 % (vit). 50 % är "normal" ljushet.

hsl(11, 100%, 60%) betyder:

  • Nyans: 11° (något orangeröd)
  • Mättnad: 100 % (fullt livlig)
  • Ljushet: 60 % (något ljusare än normal)

Visste du att? HSL anses vara det mest designervänliga färgformatet eftersom det mappar till hur vi naturligt beskriver färger. "Gör den lite ljusare" innebär att öka L-värdet. "Gör den mindre livlig" innebär att minska S-värdet. "Flytta den mot blå" innebär att ändra H-värdet. Med HEX eller RGB kräver dessa justeringar att man ändrar flera värden samtidigt.

HSLA: Lägga till transparens

Precis som RGBA lägger HSLA till en alfakanal:

hsla(11, 100%, 60%, 0.5)   /* 50% transparent */

När ska man använda vilket format?

Format Bäst för Fördel
HEX CSS-stylesheets, designspecifikationer Kompakt, universellt förstådd
RGB Programmatisk färgmanipulering Intuitiva kanalvärden
HSL Designarbete, skapa färgscheman Matchar mänsklig färguppfattning

För webbutveckling

HEX är de facto-standarden. De flesta CSS skrivs med HEX-koder eftersom de är kompakta och alla utvecklare känner igen dem.

För designsystem

HSL är idealiskt för att skapa konsekventa färgpaletter. För att skapa ljusare och mörkare varianter av en varumärkesfärg justerar du helt enkelt ljushets­värdet:

  • Primär: hsl(210, 80%, 50%)
  • Ljus variant: hsl(210, 80%, 70%)
  • Mörk variant: hsl(210, 80%, 30%)

Nyans och mättnad förblir desamma, vilket garanterar att varianterna är samma "färg" vid olika ljusstyrkor.

För transparens

Använd RGBA eller HSLA när du behöver halvtransparenta färger för överlägg, skuggor eller glaseffekter.

Välj en färg
Välj rätt format
Konvertera vid behov
Använd i ditt projekt

Konvertera mellan format

Du behöver ofta konvertera mellan format. En designer skickar HSL-värden men din kodbas använder HEX. En varumärkesguide anger RGB men du behöver HSL för att skapa varianter.

Matematiken är enkel men tråkig att göra manuellt. Ett konverteringsverktyg hanterar det direkt.

Tips Konvertera mellan HEX, RGB, HSL och mer: Så konverterar du färgkoder. Ange en färg i vilket format som helst och få alla de andra direkt.

Börja arbeta med färger:

  • Konvertera färgkoder
  • Färgkonverteringsverktyg
  • Färgpalettgenerator

Alla verktyg är gratis och fungerar direkt i webbläsaren.

Så löser du det