RGB till HEX till HSL
Konvertera mellan färgformaten RGB, HEX och HSL
Indata och alternativ
Snabbval och exempel
Körs i din webbläsare. Dina indata stannar på den här enheten.
Resultat
Ange dina värden för att se resultatet.
Om färgkonverteraren
Vår kostnadsfria färgkonverterare ger sömlös konvertering i realtid mellan färgformaten RGB, HEX och HSL. Oavsett om du är webbdesigner som matchar varumärkesfärger, utvecklare som bygger CSS-teman eller digital konstnär som finjusterar paletter ger verktyget omedelbara och exakta konverteringar mellan färgformat direkt i din webbläsare.
Verktyget har interaktiva reglage för både färgmodellerna RGB och HSL, så att du visuellt kan justera enskilda kanaler och se resultatet uppdateras i alla format samtidigt. En stor färgförhandsvisning visar ditt aktuella val, och med kopieringsknappar kan du hämta värdet i valfritt format med ett klick för direkt användning i din kod eller ditt designverktyg.
En inbyggd snabbpalett ger direktåtkomst till vanliga färger, och slumpfärgsgeneratorn hjälper dig att hitta nya kombinationer. All bearbetning sker helt i din webbläsare utan någon serverkommunikation, så ditt arbete går snabbt och förblir privat.
Viktiga funktioner
- Konvertering i realtid mellan färgformaten RGB, HEX och HSL
- Interaktiva RGB-reglage med separat kontroll av röd, grön och blå kanal
- HSL-reglage för intuitiv justering av nyans, mättnad och ljushet
- Direkt inmatning av HEX-kod med automatisk validering
- Stor färgförhandsvisning med omedelbar visuell återkoppling
- Kopiera till urklipp med ett klick för varje färgformat
- Slumpfärgsgenerator för att hitta nya kombinationer
- Snabbpalett med vanligt använda färger
- Färgformatguide som förklarar när man ska använda vilket format
- Bearbetning till 100% på klientsidan för fullständig integritet
Så använder du färgkonverteraren
- Välj inmatningssätt: Justera RGB-reglagen eller HSL-reglagen, eller skriv en HEX-kod direkt i HEX-fältet.
- Se resultatet direkt: Värdena i alla tre färgformaten uppdateras omedelbart när du gör ändringar. Den stora förhandsvisningen visar din aktuella färg.
- Kopiera det värde du behöver: Klicka på kopieringsknappen bredvid ett format (RGB, HEX eller HSL) för att kopiera det till urklipp.
- Använd snabbfärger: Klicka på en färgruta i avsnittet Snabbfärger för att direkt läsa in en förinställd färg och se dess värden i alla format.
- Prova slumpfärger: Klicka på knappen "Slumpfärg" för att skapa en slumpmässig färg och upptäcka nya paletter.
Användningsområden
- CSS-utveckling: Konvertera mellan HEX-koder från designskisser och de RGB- eller HSL-värden som behövs i CSS-variabler och gradienter.
- Hantering av varumärkesfärger: Översätt färgerna i en grafisk profil mellan format för enhetlig användning på webben, i e-post och i tryckt material.
- Teman i designsystem: Använd HSL-värden för att skapa enhetliga färgskalor genom att justera ljushet och mättnad med samma nyans.
- Tillgänglighetstestning: Konvertera färger till olika format för att beräkna kontrastförhållanden och uppfylla WCAG.
- Arbetsflöden för bildredigering: Matcha färger mellan bildredigerare som använder RGB och webbprojekt som kräver HEX-koder.
- Design av e-postmallar: Konvertera moderna HSL-värden till de HEX-koder som e-postklienter med begränsat CSS-stöd kräver.
- Datavisualisering: Ta fram exakta färgvärden för diagram, grafer och instrumentpaneler som kräver precisa färgspecifikationer.
Vanliga frågor
Är verktyget gratis?
Ja, vår färgkonverterare är helt gratis att använda, utan begränsningar och utan registrering.
Är mina data säkra?
Ja. Alla färgkonverteringar sker helt i din webbläsare. Ingen data skickas till någon server eller lagras någonstans.
Vad är skillnaden mellan RGB, HEX och HSL?
RGB definierar färger med värden för kanalerna röd, grön och blå (0-255). HEX är en kompakt hexadecimal representation av RGB-värden som används i CSS och HTML. HSL beskriver färger med nyans (0-360°), mättnad (0-100%) och ljushet (0-100%), vilket gör det mer intuitivt för manuella färgjusteringar.
Vilket färgformat ska jag använda för webbutveckling?
HEX är det vanligaste formatet i CSS. HSL är att föredra när du behöver skapa färgvariationer (ljusare eller mörkare nyanser) programmatiskt. RGB är användbart när du arbetar med opacitet via rgba()-värden.
Kan jag konvertera färger med transparens?
Verktyget konverterar opaka färger mellan RGB, HEX och HSL. För färger med transparens kan du lägga till en alfakanal manuellt efter konverteringen (t.ex. rgba() eller hsla() i CSS).
Tips och bästa praxis
- Använd HSL för teman: Med HSL är det enkelt att skapa enhetliga färgpaletter genom att bara justera ljushetsvärdet och låta nyans och mättnad vara fasta.
- Kontrollera kontrastförhållanden: När du väljer text- och bakgrundsfärger bör du säkerställa tillräcklig kontrast för läsbarheten. WCAG rekommenderar minst 4,5:1 för normal text.
- Håll dig till webbsäkra färger: För bästa kompatibilitet mellan enheter bör du föredra färger som visas konsekvent på alla skärmar.
- Spara din palett: Kopiera dina konverterade färgvärden och spara dem i en fil med designtoken eller i CSS-variabler för enhetlig återanvändning.
- Använd kort HEX-form: Använd om möjligt HEX-koder med 3 siffror (#F00 i stället för #FF0000) för renare CSS.
- Testa i båda lägena: Kontrollera alltid dina färgval i både ljust och mörkt läge för att säkerställa läsbarhet och visuell harmoni.