Prevodník akceptuje každý CSS zápis hex farby: 6-miestny #3366cc, 3-miestnu skratku #36c, a tiež 4- a 8-miestne formy s alfa kanálom, s mriežkou alebo bez nej. Zobrazí reťazec hsl() alebo hsla(), samotné hodnoty aj rozpis po zložkách - a riadok HSL na HEX, keď potrebujete opačný smer. Všetko beží vo vašom prehliadači - žiadne nahrávanie, žiadny účet, žiadne limity.
HEX na HSL prevodník
Beží celý vo vašom prehliadači - bez nahrávania, bez registrácie.
CSS
hsl(220, 60%, 50%)Ako sa prevádza
Odtieň220
Sýtosť60%
Jas50%
Potrebujete opačný smer? HSL na HEX
#3366ccAko previesť HEX na HSL?
Najprv sa hex kód prečíta ako červená, zelená a modrá (0-255), a potom sa tá istá farba vyjadrí ako odtieň, sýtosť a jas. Odtieň je uhol na farebnom kruhu (0-360), sýtosť hovorí, aká je farba výrazná (0-100 %), a jas, aká je svetlá (0-100 %). #3366cc sa zmení na hsl(220, 60%, 50%). Tento prevodník to robí okamžite, ako píšete.
Ako na to
- 1Zadajte hex kód. Napíšte alebo vložte hex farbu ako #3366cc (alebo #36c), alebo ju vyberte pomocou vzorkovníka farieb. Mriežka # je nepovinná.
- 2Prečítajte hodnotu HSL. Reťazec hsl(), samotné hodnoty a živý náhľad farby sa aktualizujú, ako píšete, spolu s rozpisom odtieňa, sýtosti a jasu po zložkách.
- 3Skopírujte formát, ktorý potrebujete. Kliknite na Kopírovať vedľa reťazca hsl() alebo pri surových hodnotách. Potrebujete opačný smer? Zadajte nižšie odtieň, sýtosť a jas a získate hex kód späť.
Pre koho je nástroj určený
- Front-end vývojári, ktorí menia hex kód na hsl(), aby mohli upraviť jas pre hover a focus stavy bez výberu úplne novej farby.
- Dizajnéri tvoriaci palety, ktorí držia odtieň nemenný a menia sýtosť a jas, aby z jednej farby značky vytvorili odtiene a stupne.
- Autori tém a design tokenov, ktorí ukladajú farby v HSL, pretože sa dajú oveľa jednoduchšie čítať a ručne upravovať než hex reťazec.
- Každý, kto zosúlaďuje farby medzi nástrojmi, kde jeden chce hex (Figma, väčšina CSS) a druhý HSL (SCSS pomocníci, niektoré farebné systémy).
Časté otázky
Je tento prevodník HEX na HSL zadarmo?
Áno - je 100 % zadarmo, bez registrácie a bez limitov. Beží celý vo vašom prehliadači.
Nahrávajú sa moje farby niekam?
Nie. Prevod je bežný JavaScript, ktorý beží vo vašom zariadení - nič sa neposiela na server a po načítaní stránky funguje aj offline.
Čo je HSL?
HSL znamená hue, saturation a lightness, teda odtieň, sýtosť a jas. Odtieň je uhol od 0 do 360 stupňov na farebnom kruhu, sýtosť hovorí, aká je farba výrazná od 0 do 100 percent, a jas ide od 0 percent (čierna) cez čistú farbu pri 50 percentách až po 100 percent (biela).
Ako previesť hex na HSL ručne?
Prevedťe hex kód na červenú, zelenú a modrú a každú hodnotu vydeľte 255. Zoberte maximum a minimum z týchto troch: jas je ich priemer, sýtosť je (max - min) delené (1 - |2L - 1|) a odtieň sa určí podľa toho, ktorá zložka je maximálna, prevedený na rozsah 0-360 stupňov.
Podporuje 3-miestnu skratku ako #36c?
Áno. V CSS skratke sa každá číslica zdvojí, takže #36c sa rozšíri na #3366cc a prevedie sa na hsl(220, 60%, 50%). 4-miestna forma funguje rovnako, posledná číslica je alfa.
Ako spracúva priehľadnosť (HSLA)?
8-miestny hex kód nesie alfu v poslednom páre. Tento bajt (0-255) sa delí 255, aby vznikla hodnota alfa 0-1, ktorú očakáva hsla(), zaokrúhlená na tri desatinné miesta - takže #3366cc80 sa stane hsla(220, 60%, 50%, 0.502).
Vie previesť HSL späť na HEX?
Áno. Použite riadok HSL na HEX pod výsledkom: zadajte odtieň (0-360) a sýtosť a jas (0-100 %) a okamžite vráti hex kód. Hodnoty mimo rozsahu sa automaticky orežú.
Prečo je HSL užitočnejšie než hex?
HSL sa dá čítať po ľudsky: farbu môžete zosvetliť zvýšením jasu (L), stlmiť znížením sýtosti (S) alebo zmeniť jej farebnú rodinu úpravou odtieňa (H) - a to všetko bez hádania hex číslic. Vďaka tomu je ideálne na tvorbu konzistentných paliet, hover stavov a design tokenov.