Kako pretvoriti HEX u HSL?

Prvo se hex kod čita kao crvena, zelena i plava (0-255), a zatim se ista boja zapisuje kroz nijansu, zasićenost i svjetlinu. Nijansa je kut na kotaču boja (0-360), zasićenost pokazuje koliko je boja živa (0-100%), a svjetlina koliko je svijetla (0-100%). #3366cc postaje hsl(220, 60%, 50%). Ovaj pretvarač to radi trenutno dok tipkate.

Kako se koristi

1Unesite hex kod. Utipkajte ili zalijepite hex boju poput #3366cc (ili #36c), ili je odaberite pomoću uzorka boje. Znak # nije obavezan.

2Pročitajte HSL vrijednost. hsl() niz, čiste vrijednosti i prikaz boje uživo ažuriraju se dok tipkate, uz raščlambu po komponentama za nijansu, zasićenost i svjetlinu.

3Kopirajte format koji trebate. Kliknite Kopiraj pored hsl() niza ili sirovih vrijednosti. Trebate obrnuti smjer? Unesite nijansu, zasićenost i svjetlinu ispod da dobijete hex kod natrag.

Za koga je

Front-end razvojni programeri koji hex kod pretvaraju u hsl() da bi mijenjali svjetlinu za hover i focus stanja bez biranja posve nove boje.

Dizajneri koji grade palete i drže nijansu fiksnom dok postupno mijenjaju zasićenost i svjetlinu kako bi iz jedne brend boje dobili nijanse i sjene.

Autori tema i dizajn tokena koji boje čuvaju kao HSL jer se puno lakše čita i ručno prilagođava nego hex niz.

Svatko tko usklađuje boje između alata gdje jedan traži hex (Figma, većina CSS-a), a drugi HSL (SCSS pomoćnici, neki sustavi boja).

Pretvarač prihvaća svaki CSS hex zapis: 6-znamenkasti #3366cc, 3-znamenkasti skraćeni #36c, te 4- i 8-znamenkasti oblik s alfa kanalom, sa ili bez #. Prikazuje hsl() ili hsla() niz, čiste vrijednosti i raščlambu po komponentama - te obrnuti red HSL u HEX kad trebate ići u drugom smjeru. Sve se odvija u vašem pregledniku - bez slanja na server, bez računa, bez ograničenja.

Česta pitanja

Je li ovaj HEX u HSL pretvarač besplatan?

Da - potpuno je besplatan, bez registracije i bez ograničenja. Radi u potpunosti u vašem pregledniku.

Šalju li se moje boje negdje?

Ne. Pretvorba je obični JavaScript koji se izvodi na vašem uređaju - ništa se ne šalje na server, a alat nastavlja raditi i offline nakon što se stranica učita.

Što je HSL?

HSL označava nijansu, zasićenost i svjetlinu (hue, saturation, lightness). Nijansa je kut od 0 do 360 stupnjeva na kotaču boja, zasićenost pokazuje koliko je boja živa od 0 do 100 posto, a svjetlina ide od 0 posto (crna) preko čiste boje na 50 posto do 100 posto (bijela).

Kako ručno pretvoriti hex u HSL?

Pretvorite hex u crvenu, zelenu i plavu i svaku podijelite sa 255. Uzmite maksimum i minimum tih triju vrijednosti: svjetlina je njihov prosjek, zasićenost je (maks - min) podijeljeno s (1 - |2L - 1|), a nijansa ovisi o tome koji je kanal maksimalan, skalirano na 0-360 stupnjeva.

Podržava li skraćeni zapis od 3 znamenke poput #36c?

Da. U CSS skraćenom zapisu svaka se znamenka udvostručuje, pa se #36c proširuje u #3366cc i pretvara u hsl(220, 60%, 50%). Zapis od 4 znamenke radi isto, s posljednjom znamenkom kao alfa vrijednošću.

Kako se nosi s prozirnošću (HSLA)?

8-znamenkasti hex kod nosi alfa vrijednost u zadnjem paru. Taj se bajt (0-255) dijeli s 255 da bi se dobila alfa vrijednost 0-1 koju hsla() traži, zaokružena na tri decimale - pa #3366cc80 postaje hsla(220, 60%, 50%, 0.502).

Može li pretvoriti HSL natrag u HEX?

Da. Koristite red HSL u HEX ispod rezultata: unesite nijansu (0-360) te zasićenost i svjetlinu (0-100%) i odmah dobijete hex kod. Vrijednosti izvan raspona se ograniče.

Zašto je HSL korisniji od hex zapisa?

HSL je čitljiv za ljude: boju možete posvijetliti povećanjem L, ublažiti smanjenjem S ili joj promijeniti obitelj mijenjajući H - sve bez pogađanja hex znamenki. Zato je idealan za izgradnju dosljednih paleta, hover stanja i dizajn tokena.