Färgomvandlare
Konvertera färger mellan olika format: HEX, RGB, HSL och HSV. Oumbärligt för designers och utvecklare som behöver arbeta med färger på olika plattformar och i olika designverktyg. Konvertera omedelbart alla färgvärden till det format du behöver för CSS, grafikprogram eller andra applikationer.
Vanliga frågor och svar
HEX är en hexadecimal notation (t.ex. #FF5733) som ofta används inom webbdesign. RGB representerar färger med hjälp av värden för rött, grönt och blått (0-255). HSL använder Hue (0-360°), Saturation (0-100%) och Lightness (0-100%), vilket gör det intuitivt att justera färger. HSV använder Hue, Saturation och Value (ljusstyrka) och är populärt i grafikprogram. Varje format har sina styrkor för olika användningsområden.
Använd HSL när du behöver justera en färgs ljusstyrka eller mättnad samtidigt som kulören hålls konstant. HSL är mer intuitivt när det gäller att skapa färgvariationer, nyanseringar och nyanser. Det är utmärkt för att skapa tillgängliga färgscheman och responsiv design där du behöver förutsägbara ljushetsjusteringar. RGB är bättre när du behöver exakt kontroll över enskilda färgkanaler.
Använd din webbläsares utvecklingsverktyg för att inspektera elementet och kopiera färgvärdet från CSS. Klistra in det i vår konverterare i valfritt format (HEX, RGB eller HSL) så visar vi dig omedelbart motsvarande värden i alla andra format. Du kan också använda webbläsartillägg eller färgväljare för skärmdumpar för att fånga färger.
Alfakanalen styr transparensen, med värden från 0 (helt transparent) till 1 (helt ogenomskinlig). RGBA och HSLA inkluderar detta fjärde värde för att stödja transparenta eller halvtransparenta färger. Detta är viktigt för överlägg, skuggor och skiktade designelement i modern webbdesign.
Ja, det gör vi! Moderna webbläsare har fullt stöd för färgformaten HSL och HSLA i CSS. Använd syntaxen: hsl(360, 100%, 50%) eller hsla(360, 100%, 50%, 0.5) för färger med transparens. HSL är särskilt användbart i CSS för att skapa färgvariationer med hjälp av calc() eller CSS-anpassade egenskaper för dynamiska teman.
Tresiffriga HEX-koder (#RGB) är stenografi där varje siffra dubbleras. Till exempel är #F00 likvärdigt med #FF0000. Denna förkortning fungerar endast när båda siffrorna i varje färgkanal är desamma. Använd det fullständiga 6-siffriga formatet (#RRGGBB) för exakt färgkontroll och alla färger som inte passar in i stenogrammönstret.
RGB är det allmänna konceptet för att representera färger med röda, gröna och blå värden. sRGB (standard RGB) är en specifik RGB-färgrymd som är standardiserad för enhetlighet mellan enheter och webbläsare. De flesta webbfärger utgår från sRGB, vilket är anledningen till att färgerna i allmänhet ser konsekventa ut på olika skärmar och i olika webbläsare.
När du har konverterat färgerna ska du kontrollera kontrastförhållandena för texttillgänglighet. WCAG kräver en kontrast på 4,5:1 för normal text och 3:1 för stor text. När du konverterar mellan format förblir färgvärdena desamma, men att ha dem i olika format hjälper dig att använda dem i olika designverktyg samtidigt som tillgängligheten bibehålls.
Ja, det gör du! Designprogram som Figma, Adobe XD eller Photoshop visar vanligtvis färger i RGB eller HEX. Kopiera dessa värden och konvertera dem till det format som behövs för din kod. Detta säkerställer perfekt färgmatchning mellan designmallar och slutlig implementering.
Konvertering mellan färgformat kan innebära avrundning. HEX använder heltal (0-255), RGB använder heltal, men HSL/HSV använder grader och procenttal. När du konverterar fram och tillbaka flera gånger kan mindre variationer uppstå på grund av avrundning. För kritisk färgmatchning bör du arbeta konsekvent i ett format.