Hvordan konverterer man HEX til HSL?

Først læses hex-koden som rød, grøn og blå (0-255), derefter skrives samme farve om til nuance, mætning og lyshed. Nuance er vinklen på farvehjulet (0-360), mætning viser hvor levende farven er (0-100 %), og lyshed hvor lys den er (0-100 %). #3366cc bliver til hsl(220, 60%, 50%). Værktøjet regner det ud med det samme, mens du skriver.

Sådan gør du

1Indtast en hex-kode. Skriv eller indsæt en hex-farve som #3366cc (eller #36c), eller vælg en med farvevælgeren. Tegnet # er valgfrit.

2Aflæs HSL-værdien. Strengen hsl(), de rene værdier og en live farveforhåndsvisning opdateres, mens du skriver, med en opdeling for nuance, mætning og lyshed.

3Kopiér det format, du skal bruge. Klik på Kopiér ved siden af hsl()-strengen eller de rå værdier. Skal du den anden vej? Indtast nuance, mætning og lyshed nedenfor for at få hex-koden tilbage.

Hvem er det til

Frontend-udviklere, der laver en hex-kode om til hsl() for at justere lysheden til hover- og fokustilstande uden at skulle vælge en helt ny farve.

Designere, der bygger paletter, og holder nuancen fast mens de trin for trin justerer mætning og lyshed for at lave toner og nuancer ud fra én brandfarve.

Folk, der skriver temaer og design-tokens, og gemmer farver som HSL, fordi det er langt nemmere at læse og justere i hånden end en hex-streng.

Alle, der skal matche farver mellem værktøjer, hvor det ene vil have hex (Figma, det meste CSS) og det andet HSL (SCSS-hjælpere, visse farvesystemer).

Konverteren accepterer alle CSS hex-former: 6-cifret #3366cc, 3-cifret kortform #36c, samt 4- og 8-cifrede former med alfakanal, med eller uden #. Den viser strengen hsl() eller hsla(), de rene værdier og en opdeling pr. komponent - plus en omvendt HSL til HEX-linje, hvis du skal den anden vej. Alt kører i din browser - ingen upload, ingen konto, ingen grænser.

Ofte stillede spørgsmål

Er denne HEX til HSL-konverter gratis?

Ja - den er 100 % gratis uden oprettelse og uden grænser. Den kører helt i din browser.

Bliver mine farver uploadet nogen steder?

Nej. Konverteringen sker med almindelig JavaScript på din egen enhed - intet sendes til en server, og den bliver ved med at virke offline, når siden først er indlæst.

Hvad er HSL?

HSL står for hue, saturation og lightness - nuance, mætning og lyshed. Nuance er en vinkel fra 0 til 360 grader på farvehjulet, mætning viser fra 0 til 100 procent, hvor levende farven er, og lyshed går fra 0 procent (sort) over den rene farve ved 50 procent til 100 procent (hvid).

Hvordan konverterer man hex til HSL i hånden?

Omregn hex-koden til rød, grøn og blå, og del hver værdi med 255. Tag maksimum og minimum af de tre: lyshed er deres gennemsnit, mætning er (max - min) divideret med (1 - |2L - 1|), og nuancen bestemmes af, hvilken kanal der er størst, skaleret til 0-360 grader.

Understøtter den 3-cifret kortform som #36c?

Ja. I CSS-kortform bliver hvert ciffer fordoblet, så #36c udvides til #3366cc og bliver til hsl(220, 60%, 50%). Den 4-cifrede form fungerer på samme måde, med det sidste ciffer som alfa.

Hvordan håndterer den gennemsigtighed (HSLA)?

En 8-cifret hex-kode bærer alfaværdien i de sidste to tegn. Den byte (0-255) deles med 255 for at give den alfaværdi mellem 0 og 1, som hsla() forventer, afrundet til tre decimaler - så #3366cc80 bliver til hsla(220, 60%, 50%, 0.502).

Kan den konvertere HSL tilbage til HEX?

Ja. Brug linjen HSL til HEX under resultatet: indtast nuance (0-360) samt mætning og lyshed (0-100 %), så får du hex-koden med det samme. Værdier uden for intervallet bliver klippet til gyldige grænser.

Hvorfor er HSL bedre end hex?

HSL kan læses direkte: du gør en farve lysere ved at hæve L, dæmper den ved at sænke S, eller skifter dens familie ved at ændre H - alt sammen uden at gætte på hex-cifre. Det gør den ideel til at bygge ensartede paletter, hover-tilstande og design-tokens.