HEX til HSL konverter

HEX til HSL – konverter fargekoder på ett sekund

Du limer inn en hex-fargekode – enten den fulle sekssifrede varianten som #1E90FF eller trebokstavsforkortelsen #abc – og siden returnerer umiddelbart den tilsvarende HSL-verdien (nyanse i grader, metning og lyshet i prosent). HSL-representasjonen er bygget for menneskelig resonnement, noe som gjør det rett frem å justere lyshet eller metning mens du beholder samme nyanse. Samtidig viser siden fargen i alle andre støttede formater (HEX, RGB, HSV, CMYK, LAB) slik at du kan kopiere den du trenger.

Hva gjør denne siden unik

HEX er en ren RGB-notasjon. Seks heksadesimale sifre (eller tre sifre i forkortet form) koder direkte for røde, grønne og blå verdier. Det er kompakt og mye brukt i CSS og designverktøy, men det er ikke intuitivt for menneskelige justeringer.

HSL er bygget for menneskelig resonnement. Nyanse måles i grader (0–360), mens metning og lyshet er prosenter. Å endre lyshet alene holder nyansen uendret. Derfor er HSL den foretrukne metoden for å generere fargepaletter og temasystemer.

Ingen alfakanal. Standard HEX (seks eller tre sifre) bærer ingen gjennomsiktighetsinformasjon, og HSL inkluderer heller ingen alfakomponent. Konverteringen håndterer alltid fullt dekkende farger.

Inndata og utdata

Inndata: En heksadesimal fargekode, enten seks sifre (f.eks. #4f46e5) eller tre sifre (f.eks. #abc). Den ledende # er valgfri.

Utdata: HSL-ekvivalenten (nyanse 0–360, metning 0–100 %, lyshet 0–100 %) pluss fargens representasjon i HEX, RGB, HSV, CMYK og LAB. Alle felter oppdateres samtidig når du redigerer.

Regler og edge cases

• Siden godtar kun gyldige seks- eller tresifrede hex-koder (med eller uten #).
• Hvis du skriver inn en ugyldig verdi, vises feilmeldingen: «Skriv inn en hex-farge som #4f46e5 eller #abc.»
• Hvis du bytter til et annet fargerom (f.eks. LAB eller CMYK) og oppgir en verdi utenfor det synlige RGB-gamutet, justeres fargen til nærmeste visbare farge. Å konvertere denne fargen tilbake til hex kan gi et lite skift.
• CMYK-verdier er et estimat for skjerm og skal ikke brukes til profesjonell trykking uten kalibrering.
• Alle konverteringer skjer i nettleseren din – ingenting du skriver inn lastes opp eller lagres.

Hvem trenger denne siden

• Frontend-utviklere som skriver CSS og vil konvertere en hex-farge fra en designmockup til HSL for enkelt å justere lyshet ved hover eller tema-varianter.
• UI/UX-designere som tenker i nyanse, metning og lyshet og trenger å matche en merkevarefarge oppgitt i hex.
• Alle som bygger en fargepalett – HSL gjør det enkelt å lage komplementære, analoge eller monokromatiske ordninger ved å justere bare nyanse eller metning.
• Webtilgjengelighetsrevisorer som må verifisere kontrastforhold og finner HSL lettere å resonnere om enn råe hex- eller RGB-verdier.

Slik fungerer konverteringen

HEX til HSL-konverteringen skjer i to trinn: først fra heksadesimal til desimale RGB-verdier, deretter fra RGB til HSL.

Steg 1: HEX til RGB

En sekssifret hex-kode består av tre par: RR GG BB. Hvert par representerer en verdi fra 0 til 255 i base 16. For eksempel #1E90FF:

• 1E = 1×16 + 14 = 30 (rød)
• 90 = 9×16 + 0 = 144 (grønn)
• FF = 15×16 + 15 = 255 (blå)

En tresifret forkortelse som #abc utvides til #aabbcc, så #abc = #AABBCC = RGB(170, 187, 204).

Steg 2: RGB til HSL

Algoritmen normaliserer røde, grønne og blå verdier til området 0–1. Deretter beregnes minste og største verdi. Lyshet (L) defineres som gjennomsnittet av maks og min: L = (maks + min) / 2. Metning (S) avhenger av lyshet og intervallet. Nyanse (H) beregnes ut fra hvilken av de tre primære komponentene som er størst.

• Hvis maks = min (gråskala), er H = 0 og S = 0.
• Ellers: delta = maks – min. S = delta / (1 – |2L – 1|). H beregnes med en rotasjonsavhengig formel og normaliseres til 0–360.

Hele beregningen følger den standardiserte RGB-til-HSL-konverteringen som brukes i CSS-spesifikasjonen.

HSL vs. HSV – viktige forskjeller

Både HSL og HSV bruker nyanse (H) på en 0–360 graders sirkel, men definisjonene av metning og lyshet/verdi er forskjellige:

I HSL reduseres metningen nær hvitt og svart; en farge med lyshet 50 % har maksimal metning. I HSV er metningen uavhengig av verdi. Dette gjør HSL mer intuitiv for lyshetsjusteringer, mens HSV ofte brukes i bildebehandling.

Tilgjengelighet og kontrast

WCAG 2.2 krever et kontrastforhold på minst 4,5:1 for normal tekst (unntatt stor tekst). Med HSL kan du justere lyshet mens du beholder samme nyanse. For å forbedre kontrasten på en gitt hex-farge:

• Øk eller senk lysheten (L) trinnvis.
• Juster metningen (S) for å unngå gråtoner.
• Sjekk den resulterende kontrasten mot bakgrunnen.

Siden gir deg HSL-verdiene umiddelbart, så du kan eksperimentere raskt uten manuelle omregninger.

Vanlige feil og tips

• Glemt # – fungerer uansett, men maskinen trenger ikke #.
• Ugyldige tegn – hex bruker kun 0–9 og A–F. G H I osv. gir feil.
• Forkortet kode med fire sifre – #1234 er ikke en standard hex-farge; den er muligens RGBA (8-sifret). Denne siden godtar bare 3 eller 6 sifre.
• Out-of-gamut HSL – Hvis du manuelt skriver inn en HSL-verdi som er innenfor HSL-rommet men utenfor RGB-gamutet, vil konvertering tilbake til hex gi en tilnærmet farge. Dette gjelder spesielt for sterke mettede farger i gamle RGB-profiler.

FAQ

Hvordan konverterer jeg #fff (hvit) til HSL? #fff tilsvarer RGB(255, 255, 255). HSL-verdien blir H=0°, S=0%, L=100%. Rent hvitt har ingen nyanse.

Hvorfor vises CMYK-verdiene omtrentlige? CMYK er et subtraktivt fargerom for trykking. Skjermer bruker additivt RGB. Konverteringen er en matematisk tilnærming uten profiler for blekk og papir. Bruk den som veiledning, men ikke for produksjon.

Hva skjer hvis jeg skriver inn en hex-kode med ni tegn? Siden støtter bare 3 eller 6 sifre. Koder som #11223344 (RGBA) eller med alfakanal avvises. Feilmeldingen vises: «Enter a hex color like #4f46e5 or #abc.»

Kan jeg konvertere tilbake fra HSL til HEX? Ja, men den originale hex-verdien kan endres hvis HSL-fargen var utenfor RGB-gamutet (se edge cases). For farger innenfor synlig RGB er konverteringen gjensidig.

Hva er forskjellen på HSL og HSLA? HSLA legger til alfakanal (gjennomsiktighet). Denne siden håndterer kun HSL uten alfa. For gjennomsiktige farger må du bruke RGBA eller HSLA manuelt.

Trenger jeg internett for å bruke verktøyet? Nei. Alle konverteringer skjer i nettleseren din. Siden fungerer også offline hvis den er lastet inn på forhånd.