Prevodník HSL na RGB

Prevod HSL na RGB: ľudské vnímanie farby do presných čísel obrazovky

Stránka HSL‑to‑RGB robí jednu vec: zadáte farbu v modeli HSL — odtieň v stupňoch (0–360), sýtosť a svetlosť v percentách — a nástroj okamžite zobrazí ekvivalentné hodnoty RGB v rozsahu 0–255. Tým umožňuje prejsť od modelu navrhnutého pre ľudské uvažovanie o farbách ku konkrétnym číslam, ktoré obrazovka používa na vyžarovanie svetla.

Čím je táto stránka odlišná

• HSL je navrhnutý pre ľudské uvažovanie; RGB je pracovný priestor pre farebnú matematiku na obrazovke.
• Zmena svetlosti v HSL zachováva odtieň — práve preto sa HSL používa na generovanie paliet a tém.
• Konverzia je bezstratová: každá platná hodnota HSL sa mapuje na jediný RGB triplet v rámci zobraziteľného rozsahu.
• Nedochádza k orezaniu mimo gamutu (na rozdiel od konverzií z LAB alebo CMYK do RGB), takže pri spätnom prevode nevzniká posun farby.

Tento rozdiel je kľúčový. Dizajnér, ktorý v HSL posunie svetlosť z 50 % na 70 %, vie, že modrá zostane modrou — iba zosvetlí. V RGB by tá istá úprava vyžadovala súčasnú zmenu všetkých troch kanálov a ani potom by výsledok nebol lineárny. Práve preto HSL existuje: je to model, ktorý kopíruje spôsob, akým ľudia farby vnímajú a pomenúvajú.

Vstupy a výstupy: čo všetko nástroj vráti

Všetky polia sa aktualizujú okamžite, bez potreby tlačidla „previesť“. Upravíte HSL, zmenia sa všetky ostatné výstupy.

Pravidlá a hraničné prípady

Ak používateľ zadá neplatnú hodnotu, nástroj zobrazí túto správu:

„Zadajte HSL ako odtieň 0–360 s dvomi percentami, napríklad 243, 75%, 59%.“

Čo presne tvorí chybu? Typicky:

• odtieň mimo rozsah 0–360 (napr. 400 alebo -10)
• sýtosť alebo svetlosť bez znaku percenta (napr. 50 namiesto 50%)
• chýbajúca čiarka alebo medzera medzi hodnotami
• akýkoľvek nečíselný znak v poli

Dôležité upozornenie: CMYK výstup je len odhad na obrazovke. Pre profesionálnu tlač sa môže líšiť v závislosti od papiera, atramentu a profilu tlačiarne. Ak pripravujete súbor pre ofset, vždy použite priamo CMYK profil cieľového zariadenia, nie konverziu cez RGB.

Konverzia funguje výhradne v prehliadači. Nič, čo zadáte, nie je odoslané na server — všetky výpočty prebiehajú lokálne.

Pre koho je tento nástroj určený

• Dizajnéri vytvárajúci farebné palety alebo témy, ktorí potrebujú zodpovedajúce RGB hodnoty pre kód.
• Front‑end vývojári prenášajúci farby z návrhového nástroja (ktorý často používa HSL) do CSS alebo iného kódu, ktorý očakáva RGB.
• Každý, kto radšej uvažuje o farbách v ľudsky zrozumiteľných pojmoch (odtieň, sýtosť, svetlosť) a potrebuje presné čísla pre obrazovku.

Bežný scenár: dizajnér v Figme nastaví farbu tlačidla na hsl(224, 76%, 58%). Vývojár potrebuje tú istú farbu v CSS, ale používa hexadecimálny zápis. Namiesto manuálneho prepočtu alebo hádania vloží hodnotu do tohto nástroja a okamžite dostane #4F46E5.

Rozdiely medzi farebnými modelmi

Pochopenie toho, prečo HSL a RGB nie sú len dva rôzne spôsoby zápisu, ale odlišné modely, je základom správneho používania tohto nástroja.

RGB (červená, zelená, modrá) je aditívny model. Každý pixel na obrazovke je tvorený tromi subpixelmi, ktoré vyžarujú svetlo v danom pomere. Hodnoty 0–255 určujú intenzitu každého kanála. Ak je všetkých troch 255, dostanete bielu; ak 0, čiernu. RGB je prirodzený jazyk hardvéru, ale pre človeka je neintuitívny: aká farba je rgb(180, 70, 120)? Väčšina ľudí to bez referencie neodhadne.

HSL (hue, saturation, lightness) je model navrhnutý tak, aby zodpovedal ľudskej psychológii farieb. Odtieň je umiestnený na farebnom kruhu, sýtosť určuje intenzitu (od sivej po čistú farbu) a svetlosť definuje, ako je farba svetlá alebo tmavá. Tento model je lineárny v svetlosti — čo je vlastnosť, ktorú RGB postráda.

HEX je len hexadecimálny zápis RGB. Každý kanál je prevedený z desiatkovej sústavy (0–255) na dve hexadecimálne číslice (00–FF). rgb(79, 70, 229) je #4F46E5.

HSV (hue, saturation, value) je podobný HSL, ale namiesto svetlosti používa „hodnotu“ – maximálnu intenzitu farby. Je užitočný pri výbere farieb v grafických editoch, ale pre tvorbu paliet je menej vhodný, pretože zmena hodnoty mení odtieň inak ako v HSL.

LAB je model nezávislý na zariadení, navrhnutý tak, aby korešpondoval s ľudským videním. Hodnoty L*, a*, b* sú vypočítané z referenčného bieleho bodu (D65) a nemajú priamy vzťah k RGB. Pri konverzii z HSL do RGB a potom do LAB sa používa medzikroková sRGB→XYZ→CIELAB, čím vzniká malá priestorová odchýlka, ale v rámci zobraziteľného gamutu je stále bezstratová.

CMYK (cyan, magenta, yellow, key/black) je subtraktívny model používaný v tlači. Na rozdiel od RGB, kde farby vznikajú pridaním svetla, v CMYK farby vznikajú odčítaním svetla od bieleho podkladu. Preto je konverzia RGB→CMYK vždy len aproximácia — presné hodnoty závisia od konkrétnej kombinácie tlačiarne, papiera a atramentu.

Prečo nedochádza k orezaniu mimo gamutu

Pri prevode medzi farebnými priestormi, ako je LAB alebo CMYK do RGB, často narazíte na problém, že cieľová farba leží mimo zobraziteľného rozsahu RGB. Tento nástroj takéto riziko nemá, pretože HSL aj RGB sú priestory odvodené od sRGB. Každá hodnota HSL, ktorá je v rozsahu 0–360/0–100/0–100, sa dá matematicky previesť na platný RGB triplet v rozsahu 0–255. Žiadna farba, ktorú môžete zadať v HSL, „nevypadne“ z RGB gamutu, pretože HSL je definovaný práve v rámci sRGB.

Tento fakt nie je triviálny. Keď pracujete s farebnými priestormi ako ProPhoto RGB alebo Adobe RGB, HSL hodnoty by sa mohli dostať mimo zobraziteľné RGB. Tu sa však pohybujeme výhradne v sRGB, čo je štandard pre web, väčšinu monitorov a mobilné obrazovky.

FAQ

Je prevod HSL→RGB skutočne bezstratový?

Áno. Každá platná hodnota HSL vracia presne jeden RGB triplet a spätný prevod RGB→HSL vráti pôvodnú hodnotu (v rámci zaokrúhľovania na celé čísla). Neexistuje žiadna strata informácie ako pri konverzii z CMYK.

Prečo CMYK nástroj zobrazuje len ako odhad?

Pretože CMYK závisí od fyzikálnych vlastností tlače. Profesionálne tlačiarne používajú rôzne profily (FOGRA, GRACoL, SWOP) a aj ten istý profil dáva iné výsledky na lesklom a matnom papieri. Nástroj používa všeobecnú konverznú maticu, ktorá je dostatočná pre orientáciu, ale nie pre finálnu tlač.

Ako mám zadať HSL, aby nástroj fungoval?

Vložte tri hodnoty oddelené čiarkou: odtieň 0–360, sýtosť s percentom, svetlosť s percentom. Príklad: 243, 75%, 59%. Medzery za čiarkami sú voliteľné, ale odporúčané pre čitateľnosť.

Môžem použiť aj desatinné čísla pre odtieň?

Nie, nástroj očakáva celé číslo pre odtieň. Ak zadáte 243.5, bude hlásiť chybu. Sýtosť a svetlosť však môžu byť desatinné percentá, napríklad 75.5%.

Aký je rozdiel medzi HSL a HSV pri výbere farieb?

HSL je vhodnejší na vytváranie paliet, pretože mení svetlosť nezávisle od odtieňa. HSV je užitočnejší v prostrediach, kde chcete meniť „živosť“ farby (hodnotu) bez ovplyvnenia sýtosti. Oba modely však používajú rovnaký odtieňový kruh.

Funguje nástroj aj offline?

Áno. Všetky výpočty prebiehajú priamo v prehliadači pomocou JavaScriptu. Ak si stránku otvoríte a potom sa odpojíte od internetu, konverzia bude fungovať naďalej.