Färgkodsomvandlare

Konvertera färgkoder mellan HEX, RGB, HSL, HSV och CMYK direkt. Ange valfritt format och få de övriga, med live färgförhandsvisning och kopiering med ett klick för webbdesign.

Så Använder Du

  1. Ange värden

    Fyll i de nödvändiga fälten.

  2. Klicka beräkna

    Tryck på beräkna-knappen för resultat.

  3. Se resultat

    Se resultaten och dela vid behov.

Vad är färgkodsomvandling?

Färgkodsomvandling innebär att uttrycka samma färg i olika notationssystem som HEX, RGB och HSL. En skärm skapar färg genom att blanda ljusets primärfärger — rött, grönt och blått — så varje färg reduceras i slutändan till intensiteten hos tre RGB-kanaler. HEX komprimerar dessa RGB-värden till en sexsiffrig hexadecimal sträng (#RRGGBB), medan HSL ordnar om dem så som människor uppfattar färg, med hjälp av en nyansvinkel, mättnad och ljushet.

Varför omvandling spelar roll

  • Skriva CSS — Ta HEX-koden från en designskiss och omvandla den till RGB, vilket gör det enklare att justera transparensen.
  • Färgjustering — När du bara vill mörka en färg något låter en omvandling till HSL dig justera enbart L-värdet.
  • Samarbete — Håll designerns Figma-HEX, utvecklarens RGB-variabler och tryckteamets färgreferenser i samklang.

Oavsett vilket format du anger beräknar den här omvandlaren alla övriga format på en gång och visar den verkliga färgen i en förhandsgranskning.

Omvandlingsformel

HEX → RGB delar upp det hexadecimala talet i par om två siffror och läser varje par som ett decimaltal.

R = parseInt(hex[0:2], 16); G och B beräknas på samma sätt. Exempel: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).

RGB → HSL normaliserar först varje kanal till intervallet 0-1 och beräknar sedan ljusheten.

L = (max + min) / 2
S = delta / (2 − max − min) (när L > 0,5)
där delta = max − min. I exemplet ovan ger max=1 och min=0,2 L = 0,6 (60%), S = 0,8/0,8 = 100% och en nyansvinkel H ≈ 11°, vilket omvandlas till HSL(11°, 100%, 60%).

Vanliga Frågor

Vad är skillnaden mellan HEX och RGB?
HEX uttrycker en färg hexadecimalt (#FF5733), medan RGB anger värdena för rött, grönt och blått som decimaler från 0-255 (255, 87, 51). Det är två sätt att skriva samma färg.
Hur omvandlar jag en HEX-kod till RGB?
Dela upp #RRGGBB i par om två siffror och omvandla varje par från hexadecimalt till decimalt. Till exempel ger #FF5733 FF=255, 57=87, 33=51, så det blir RGB(255, 87, 51). Varje par representerar en kanalintensitet från 00 (0) till FF (255).
När bör jag använda CMYK?
CMYK är färgmodellen för tryck som blandar bläck i cyan, magenta, gult och svart. Skärmar och webben använder RGB/HEX, som adderar ljus, medan tryckproduktion omvandlar till CMYK, som lagrar bläck. Eftersom de två färgrymderna skiljer sig kan skärmfärger se något annorlunda ut i tryck.
Vilka är fördelarna med färgmodellen HSL?
HSL består av nyans, mättnad och ljushet, vilket gör att du kan justera färger intuitivt. Genom att till exempel bara sänka ljushetsvärdet (L) behåller du nyansen och skapar enkelt en mörkare variant, vilket är praktiskt för hover-effekter och för att skapa färgpaletter.
Vad betyder nyans (H), mättnad (S) och ljushet (L) i HSL?
Nyans (H) är en vinkel på färghjulet från 0 till 360 grader, där 0° är rött, 120° grönt och 240° blått. Mättnad (S) är färgintensiteten från 0 till 100%: 0% är grått och 100% den mest livfulla färgen. Ljushet (L) är ljusstyrkan från 0 till 100%: 0% är svart, 100% vitt och 50% den renaste färgen.
Hur representeras vitt och svart?
Vitt har alla kanaler på max: #FFFFFF / RGB(255, 255, 255) / HSL(0, 0%, 100%). Svart har alla kanaler på noll: #000000 / RGB(0, 0, 0) / HSL(0, 0%, 0%). Gråtoner har en mättnad (S) på 0% och skiljer sig endast i ljushet (L).
Vad händer om RGB-värden hamnar utanför intervallet 0-255?
Varje kanal begränsas automatiskt (clamp) innan den omvandlas till HEX — värden under 0 blir 0 och värden över 255 blir 255. Till exempel behandlas RGB(300, -10, 128) som RGB(255, 0, 128), vilket blir #FF0080.
Kan jag kopiera omvandlingsresultaten direkt?
Ja. Klicka på valfri omvandlad HEX-, RGB- eller HSL-kod för att kopiera den till urklipp, och färgförhandsgranskningen låter dig visuellt bekräfta den verkliga färgen så att du kan klistra in den direkt i CSS eller ett designverktyg.
Enhetsspecifikationer 2026

Relaterade Kalkylatorer