Konvertera en HEX-färg till HSL

Med HEX till HSL kan designers och frontendutvecklare justera ett gränssnitt före implementering. Konvertera en HEX-färg till HSL.

Konvertera en HEX-färg till HSL. Du kan använda det gratis i webbläsaren utan konto och granska resultatet innan du går vidare.

Så använder du

Ange en giltig hexadecimal färgkod i inmatningsområdet med det format som gränssnittet visar.
Kör konverteringen för att få motsvarande HSL-komponenter utan ytterligare inställningar.
Läs värdena för nyans, mättnad och ljushet och jämför dem med originalfärgen i din design.
Kopiera HSL-värdena till din stilmall eller ditt designverktyg och rensa fältet om du delar din skärm.

Exempel

Med exempelfärgen bör verktyget returnera en nyans, mättnad och ljushet som matchar den hexadecimala kod du angav. Var uppmärksam på nyans och ljushet innan du anpassar en palett eller ett knapptillstånd.

Indata

#16A34A

Resultat

hsl(142 76% 36%)

Gränser och format

Det konverterar en färg men kontrollerar inte kontrast mot text eller bedömer tillgänglighet.
Det bygger inte paletter, föreslår inte varianter och reparerar inte en ogiltig hexadecimal kod.
HSL-värdena är avsedda att kopieras; kontrollera deras exakta format innan du använder dem i ett ramverk eller en förprocessor.

Var bearbetningen sker

Konverteringen sker lokalt i webbläsaren. Färgkoden du skriver skickas inte någonstans och lämnar inte din enhet.

Vanliga frågor

Vad används HSL-värden till?

HSL beskriver en färg genom nyans, mättnad och ljushet. Dessa komponenter är praktiska för att justera en palett, skapa varianter eller förklara en färg i dokumentation.

Kan jag konvertera flera färger samtidigt?

Nej, verktyget arbetar med värdet i inmatningsområdet. Om du vill jämföra flera färger kör du konverteringen igen med varje kod efter varandra.

Vad gör jag om resultatet verkar fel?

Kontrollera först att den hexadecimala koden är komplett och korrekt stavad. Ett ogiltigt eller ofullständigt värde kan inte konverteras till tillförlitliga HSL-komponenter.

Kan jag kopiera HSL-värdena direkt till min CSS?

Ja, resultatet är avsett att kopieras, men kontrollera den exakta formen innan du använder det i ett ramverk eller en förprocessor. Verktyget omvandlar bara den färg du anger och bedömer inte kontrast mot text eller tillgänglighet. Det bygger inte heller paletter eller föreslår varianter. Jämför därför värdena med originalfärgen i din design innan du publicerar dem.

Skickas färgkoden jag skriver in någonstans?

Nej. Omvandlingen sker lokalt i din webbläsare, och färgkoden skickas inte någonstans eller lämnar din enhet. Om du delar skärm bör du rensa fältet, eftersom verktyget visar det du har angett. Tänk också på att ett ogiltigt eller ofullständigt hexadecimalt värde inte kan bli tillförlitliga HSL-komponenter.