Konvertera Färger Mellan HEX, RGB och HSL
Snabbt svar
För att konvertera en färg: öppna Color Converter, ange en färg i valfritt format (HEX, RGB, HSL) och verktyget visar omedelbart motsvarigheter i alla andra format. All konvertering sker lokalt —ingen data laddas upp.
Introduktion
Färger kan representeras i flera format: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) och andra. Olika verktyg och kontexter använder olika format —CSS använder ofta HEX eller RGB, design-verktyg HSL, och API:er valfritt. Konvertering mellan format låter dig använda en färg från ett system i en kontext som kräver ett annat.
Steg för steg
-
Öppna verktyget Color Converter
Gå till verktygssidan för färgkonvertering. Verktyget stöder formaten HEX, RGB, HSL, HSV och CMYK.
-
Ange din färg
Skriv eller klistra in ett färgvärde i valfritt format som stöds. Exempel: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. Verktyget känner automatiskt av inmatningsformatet.
-
Granska alla formatekvivalenter
Verktyget visar färgen i alla format samtidigt: HEX, RGB, HSL, HSV och CMYK. Den visar också en förhandsgranskning av färg så att du kan verifiera att konverteringen är korrekt.
-
Kopiera formatet du behöver
Klicka på knappen Kopiera bredvid valfritt format för att kopiera det värdet till ditt urklipp. Använd den i din CSS, designverktyg eller applikation.
-
Justera färgen (valfritt)
Vissa verktyg låter dig justera färgen med reglage (för HSL: nyans, mättnad, ljushet) och se alla format uppdateras i realtid. Detta är användbart för att hitta relaterade färger eller nyanser.
Exempel
HEX till RGB och HSL
Input: #ff6600
Produktion: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB till HEX
Input: rgb(0, 128, 255)
Produktion: __BEHÅLL_35__: #0080ff
HSL: hsl(210, 100%, 50%)
HSL till HEX
Input: hsl(120, 100 %, 50 %)
Produktion: __BEHÅLL_35__: #00ff00
RGB: rgb(0, 255, 0)
Vanliga problem
- HEX med vs utan # — vissa verktyg kräver prefixet #, andra inte. Vår omvandlare accepterar båda.
- 3-siffrig vs 6-siffrig HEX —#f60 är en förkortning för #ff6600. Båda är giltiga; omvandlaren normaliseras till 6 siffror.
- HSL nyansintervall — nyansen är 0-360 grader (en cirkel). 0 och 360 är båda röda. Värden över 360 går runt.
- Färgrymdsskillnader —HEX, RGB och HSL är alla sRGB. CMYK är en annan färgrymd (tryck) och konverteringen är ungefärlig.
Tips
- Använd HSL för att skapa färgvariationer — att justera nyans, mättnad eller ljushet är mer intuitivt än RGB.
- Använd HEX för CSS — det är det mest kompakta och brett stödda formatet i stilmallar.
- Använd RGB när du behöver ställa in alfatransparens —rgb(255, 102, 0, 0.5) för 50 % opacitet (eller använd 8-siffrig HEX: #ff660080).
- Använd vår färgkonverterare för omedelbar, privat konvertering mellan alla färgformat.