Färgkodsomvandlare

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