Softonic

Färgkodsomvandlare

Steg 1 / 2
Nästa

Klistra in en färg som hex (#ff6600 eller #f60), rgb(255, 102, 0), kommaseparerad 255, 102, 0 eller hsl(24, 100%, 50%), så returnerar omvandlaren den direkt i de andra två formaten, med en direkt färgprovsförhandsvisning och kopiering med ett klick per format.

Så fungerar färgkodskonvertering

  1. 1

    Ange en färg i ett format som stöds

    Hex (#abc, #abcdef), rgb(r, g, b), kommaseparerad r, g, b eller hsl(h, s%, l%).

  2. 2

    Parsas till en intern representation

    Verktyget konverterar värdet internt till RGB och härleder sedan hex- och HSL-motsvarigheterna från det.

  3. 3

    Alla format visas

    De matchande hex-, RGB- och HSL-strängarna visas sida vid sida.

  4. 4

    Direkt färgprovsförhandsvisning

    Visar den resulterande färgen i en blick så att du kan bekräfta konverteringen innan du kopierar.

Format som stöds

Format Exempel Användning
Hex 3 #F66 Förkortning; bara för färger med upprepade siffror
Hex 6 #FF6B6B Standard för CSS och grafisk design
RGB rgb(255, 107, 107) CSS, JS, designprogram
Kommaseparerad 255, 107, 107 Samma som RGB utan funktionssyntax
HSL hsl(0, 100%, 71%) Lättare att tänka kring nyans/mättnad/ljushet

När du använder vilket

  • Hex för statisk CSS och designöverlämning.
  • RGB när du skickar kanalerna till JavaScript eller designprogram.
  • HSL när du justerar ljushet eller mättnad, den mentala modellen är tydligare än RGB.

Andra format som HSV, CMYK, LAB, LCH och OKLCH finns i designverktyg. De beskriver samma färg på olika sätt, men den här omvandlaren fokuserar på de tre grundläggande webbformaten ovan.

Noggrannhet

  • Konverteringar mellan hex, RGB och HSL är exakta: hex och RGB är samma färgmodell, och HSL härleds från RGB med en standardformel.
  • HSL-värden avrundas till heltal, så en tur och retur kan flytta den sista siffran. Den synliga färgen är identisk; använd hex när du behöver en bit-exakt kopia.

Vanliga frågor

Hex eller rgb() för bred kompatibilitet. hsl() när du vill ha läsbarhet. Moderna webbläsare stöder även oklch() och andra format, men hex är fortfarande det säkraste standardvalet.

Nej, omvandlaren accepterar bara opaka färger: hex med 3 eller 6 siffror, rgb() och hsl() utan alfakanal. Använd rgba() eller 8-siffrigt hex direkt i din CSS.

Nej, omvandlaren accepterar bara de tre numeriska formaten. Använd en färgväljare eller en sökning online för att först konvertera den namngivna färgen till hex.

HSL visas med heltalsvärden för nyans, mättnad och ljushet, så en tur och retur kan flytta värdet en enhet. Den synliga färgen är identisk; använd hex när du behöver en exakt kopia.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Markdown-förhandsvisare

Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.

Verktyget finns på andra språk