Kako da konvertujem HEX u HSL?

Prvo se hex kod čita kao crvena, zelena i plava (0-255), a zatim se ista boja zapisuje preko nijanse, zasićenosti i osvetljenosti. Nijansa je ugao na točku boja (0-360), zasićenost pokazuje koliko je boja živa (0-100%), a osvetljenost koliko je svetla (0-100%). #3366cc postaje hsl(220, 60%, 50%). Ovaj konvertor to radi trenutno dok kucate.

Kako se koristi

1Unesite hex kod. Otkucajte ili nalepite hex boju poput #3366cc (ili #36c), ili je izaberite pomoću birača boja. Znak # nije obavezan.

2Pročitajte HSL vrednost. hsl() string, čiste vrednosti i prikaz boje uživo se ažuriraju dok kucate, uz raščlanjivanje po komponentama za nijansu, zasićenost i osvetljenost.

3Kopirajte format koji vam treba. Kliknite na Copy pored hsl() stringa ili sirovih vrednosti. Treba vam obrnut smer? Unesite nijansu, zasićenost i osvetljenost ispod da dobijete hex kod nazad.

Kome je namenjen

Front-end programeri koji pretvaraju hex kod u hsl(), da bi menjali osvetljenost za hover i focus stanja bez biranja potpuno nove boje.

Dizajneri koji prave palete i drže nijansu fiksnom dok postepeno menjaju zasićenost i osvetljenost da bi od jedne brend boje dobili nijanse i senke.

Autori tema i dizajn tokena koji boje čuvaju kao HSL jer se mnogo lakše čita i ručno podešava nego hex string.

Svako ko usklađuje boje između alata gde jedan traži hex (Figma, većina CSS-a), a drugi HSL (SCSS pomoćnici, neki sistemi boja).

Konvertor prihvata sve CSS hex zapise: 6-cifreni #3366cc, 3-cifrenu skraćenicu #36c, kao i 4- i 8-cifrene oblike sa alfa kanalom, sa ili bez znaka #. Prikazuje hsl() ili hsla() string, čiste vrednosti i raščlanjivanje po komponentama - kao i red HSL u HEX za obrnut smer. Sve radi u vašem pregledaču - bez otpremanja, bez naloga, bez ograničenja.

Česta pitanja

Da li je ovaj HEX u HSL konvertor besplatan?

Jeste - potpuno je besplatan, bez registracije i bez ograničenja. Radi u celosti u vašem pregledaču.

Da li se moje boje otpremaju negde?

Ne. Konverzija je običan JavaScript koji radi na vašem uređaju - ništa se ne šalje na server, i nastavlja da radi i van mreže nakon što se stranica učita.

Šta je HSL?

HSL označava nijansu, zasićenost i osvetljenost (hue, saturation, lightness). Nijansa je ugao od 0 do 360 stepeni na točku boja, zasićenost pokazuje koliko je boja živa od 0 do 100 procenata, a osvetljenost ide od 0 procenata (crna) preko čiste boje na 50 procenata do 100 procenata (bela).

Kako se ručno konvertuje hex u HSL?

Pretvorite hex u crvenu, zelenu i plavu i svaku podelite sa 255. Uzmite maksimum i minimum te tri vrednosti: osvetljenost je njihov prosek, zasićenost je (maks - min) podeljeno sa (1 - |2L - 1|), a nijansa zavisi od toga koji je kanal maksimalan, skalirano na 0-360 stepeni.

Da li podržava 3-cifrenu skraćenicu poput #36c?

Da. U CSS skraćenici se svaka cifra udvostručuje, pa se #36c proširuje u #3366cc i konvertuje u hsl(220, 60%, 50%). 4-cifreni oblik radi na isti način, s tim da je poslednja cifra alfa.

Kako se nosi sa providnošću (HSLA)?

8-cifreni hex kod nosi alfa u poslednjem paru. Taj bajt (0-255) se deli sa 255 da bi se dobila alfa vrednost 0-1 koju hsla() očekuje, zaokružena na tri decimale - tako #3366cc80 postaje hsla(220, 60%, 50%, 0.502).

Može li da konvertuje HSL nazad u HEX?

Da. Koristite red HSL u HEX ispod rezultata: unesite nijansu (0-360) i zasićenost i osvetljenost (0-100%) i odmah dobijate hex kod. Vrednosti van opsega se ograničavaju.

Zašto je HSL korisniji od hex zapisa?

HSL je čitljiv za ljude: boju možete posvetliti povećanjem L, prigušiti smanjenjem S ili joj promeniti porodicu menjajući H - sve bez pogađanja hex cifara. Zato je idealan za pravljenje doslednih paleta, hover stanja i dizajn tokena.