Hvordan konverterer jeg HEX til HSL?

Først leses hex-koden som rødt, grønt og blått (0-255), og deretter uttrykkes samme farge på nytt som nyanse, metning og lyshet. Nyanse er vinkelen på fargehjulet (0-360), metning er hvor kraftig fargen er (0-100 %), og lyshet er hvor lys den er (0-100 %). #3366cc blir hsl(220, 60%, 50%). Denne konverteren gjør det momentant mens du skriver.

Slik bruker du verktøyet

1Skriv inn en hex-kode. Skriv eller lim inn en hex-farge som #3366cc (eller #36c), eller velg en med fargevelgeren. # er valgfri.

2Les av HSL-verdien. hsl()-strengen, de rene verdiene og en live fargeforhåndsvisning oppdateres mens du skriver, sammen med en oppdeling per kanal for nyanse, metning og lyshet.

3Kopier formatet du trenger. Klikk Kopier ved siden av hsl()-strengen eller råverdiene. Trenger du motsatt vei? Skriv inn nyanse, metning og lyshet under for å få hex-koden tilbake.

Hvem passer det for

Front-end-utviklere som gjør om en hex-kode til hsl() for å justere lysheten til hover- og fokustilstander uten å velge en helt ny farge.

Designere som bygger paletter og holder nyansen fast mens de justerer metning og lyshet for å lage nyanser og skygger fra én merkefarge.

De som lager temaer og design-tokens og lagrer farger som HSL fordi det er langt enklere å lese og justere for hånd enn en hex-streng.

Alle som skal matche farger mellom verktøy der ett vil ha hex (Figma, det meste av CSS) og et annet vil ha HSL (SCSS-hjelpefunksjoner, enkelte fargesystemer).

Konverteren godtar alle CSS hex-former: 6-sifret #3366cc, 3-sifret forkortelse #36c, og 4- og 8-sifrede former med alfakanal, med eller uten #. Den viser hsl()- eller hsla()-strengen, de rene verdiene og en oppdeling per kanal - pluss en HSL til HEX-rad når du trenger motsatt retning. Alt kjører i nettleseren din - ingen opplasting, ingen konto, ingen grenser.

Vanlige spørsmål

Er denne HEX til HSL-konverteren gratis?

Ja - den er 100 % gratis uten registrering og ingen grenser. Den kjører helt i nettleseren din.

Blir fargene mine lastet opp noe sted?

Nei. Konverteringen er ren JavaScript som kjører på enheten din - ingenting sendes til en server, og den fortsetter å virke offline når siden er lastet.

Hva er HSL?

HSL står for hue, saturation og lightness, altså nyanse, metning og lyshet. Nyanse er en vinkel fra 0 til 360 grader på fargehjulet, metning er hvor kraftig fargen er fra 0 til 100 prosent, og lyshet går fra 0 prosent (svart) via den rene fargen ved 50 prosent til 100 prosent (hvit).

Hvordan konverterer man hex til HSL for hånd?

Konverter hex-koden til rødt, grønt og blått og del hver verdi på 255. Ta maks og min av de tre: lyshet er gjennomsnittet deres, metning er (maks - min) delt på (1 - |2L - 1|), og nyansen kommer fra hvilken kanal som er størst, skalert til 0-360 grader.

Støtter den 3-sifret forkortelse som #36c?

Ja. I CSS-forkortelsen dobles hvert siffer, så #36c utvides til #3366cc og konverteres til hsl(220, 60%, 50%). 4-sifret form fungerer på samme måte, med siste siffer som alfa.

Hvordan håndterer den gjennomsiktighet (HSLA)?

En 8-sifret hex-kode har alfa i det siste paret. Den byten (0-255) deles på 255 for å få 0-1-alfaen hsla() forventer, avrundet til tre desimaler - så #3366cc80 blir hsla(220, 60%, 50%, 0.502).

Kan den konvertere HSL tilbake til HEX?

Ja. Bruk HSL til HEX-raden under resultatet: skriv inn nyanse (0-360) og metning og lyshet (0-100 %), så får du hex-koden momentant. Verdier utenfor området avkortes automatisk.

Hvorfor er HSL nyttig fremfor hex?

HSL er lesbar for mennesker: du kan lysne en farge ved å øke L, dempe den ved å senke S, eller endre fargefamilien ved å justere H - alt uten å gjette hex-sifre. Det gjør den ideell for å bygge konsistente paletter, hover-tilstander og design-tokens.