Конвертор из HSL у HEX

HSL у HEX: тренутна и прецизна конверзија боја

Ова страница је посвећена директном претварању HSL (Hue, Saturation, Lightness) боја у HEX (hexadecimal) код. HSL модел је дизајниран за људско размишљање о бојама – промена осветљености не мења нијансу, што га чини идеалним за креирање палета и тема. HEX, са друге стране, је шестоцифрена (или троцифрена скраћена) RGB нотација која се користи у CSS-у и алатима за дизајн. Конверзија је директна и без губитака унутар sRGB гамута, за разлику од конверзија које укључују LAB или CMYK, где се боје ван опсега морају прилагодити. Нема таквог прилагођавања овде, јер свака HSL вредност у дозвољеном опсегу директно мапира у видљиви RGB простор.

Улази и излази: прецизне вредности и тренутно ажурирање

Корисник уноси три вредности: нијансу (Hue) у степенима између 0 и 360, засићење (Saturation) у процентима (0–100%), и осветљеност (Lightness) у процентима (0–100%). Пример исправног уноса је 243, 75%, 59%. Како се унос мења, страница одмах приказује излазни HEX код, без кашњења.

Примарни излаз је шестоцифрени HEX код, на пример #4f46e5. Ако се све три RGB компоненте могу представити једном шестоцифрном цифром, страница такође приказује и троцифрену скраћену форму, попут #abc. Ова скраћена нотација је дозвољена у CSS-у када су две цифре за сваки канал исте (нпр. #aabbcc постаје #abc). Сви остали формати боја – RGB, HSV, CMYK и LAB – се ажурирају истовремено, али је HEX главни излаз.

Важно правило: уређивање било којег поља (нпр. ручно уношење HEX кода) одмах ажурира сва друга поља, укључујући HSL улазе. Ова синхронизација осигурава да корисник увек види еквивалентне вредности у свим форматима.

Правила, гранични случајеви и уобичајене грешке

Конверзија је једноставна, али постоје јасна правила која морају бити испоштована:

• Нијанса (Hue): мора бити у опсегу 0–360 степени. Вредности изван овог опсега (нпр. -10 или 400) нису дозвољене. Иако се у теорији HSL модел може циклички „омотати” (нпр. 360° = 0°), ова страница прихвата само директне нумеричке вредности унутар опсега.
• Засићење и осветљеност: морају бити изражене у процентима (са знаком %) и кретати се од 0% до 100%. Вредности попут 75 без знака % или 110% доводе до грешке.
• Формат уноса: страница очекује три вредности раздвојене зарезима или просторима. Пример исправног формата: 243, 75%, 59% или 120 50% 80%. Неисправан формат (нпр. 243 75% само са две вредности) такође изазива грешку.

Порука о грешци – ако су HSL вредности ван дозвољених опсега или ако је формат нетачан, страница приказује следећу поруку:
„Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”

Гранични случајеви:

• Када је засићење 0%, боја је акроматска (сива). У том случају, нијанса постаје небитна, јер све нијансе са истим осветљењем и нултим засићењем дају исту сиву боју. На пример, 0, 0%, 50% и 120, 0%, 50% обоје дају #808080.
• Када је осветљеност 0% или 100%, резултат је црна (#000000) или бела (#ffffff), без обзира на нијансу и засићење.
• RGB вредности се увек крећу од 0 до 255, тако да не постоји потреба за прилагођавањем ван гамута – конверзија је увек у оквиру видљивог опсега.

Важна напомена: CMYK излаз приказан на страници је процена на екрану и може се разликовати од професионалних вредности за штампање. За прецизан CMYK, потребна је калибрација и профил боје специфичан за штампач.

Сва обрада се одвија директно у прегледачу – ништа од онога што унесете не шаље се на сервер. Ваши подаци остају локални.

Како функционише конверзија: од HSL до RGB до HEX

Разумевање алгоритма помаже да се избегну грешке и да се боље искористе могућности алата. Конверзија се одвија у два корака:

1. HSL → RGB

Прво, HSL вредности се претварају у RGB канале. Постоји стандардизовани математички поступак:

• Ако је засићење 0%, све компоненте (R, G, B) су једнаке осветљености (L). Боја је сива.
• Ако је засићење веће од 0%, користи се помоћна функција која израчунава привремене вредности. Формула укључује нијансу подељену са 60 да би се добила позиција на колор кругу, а затим се применом тригонометријских и условних функција добијају RGB вредности нормализоване на опсег 0–1.

Пример: За унос 243, 75%, 59% (HSl), алгоритам прво нормализује засићење на 0.75 и осветљеност на 0.59. Затим израчунава RGB вредности. У овом случају, резултат је приближно R=0.31, G=0.27, B=0.90. Ове вредности се множе са 255 и заокружују: R=79, G=69, B=230, што даје HEX #4f46e5.

2. RGB → HEX

Након што су познате вредности R, G и B (0–255), оне се претварају у хексадецимални запис. Сваки канал се представља са две хекса цифре (0–F). На пример:

• 79 у хекса: 79 / 16 = 4 (остатак 15) → 4F
• 69 у хекса: 69 / 16 = 4 (остатак 5) → 45
• 230 у хекса: 230 / 16 = 14 (остатак 6) → E6

Спајањем: #4F45E6. У пракси, алат може приказати и мала слова (#4f45e6), што је такође исправно (HEX код није осетљив на величину слова у CSS-у).

Троцифрена скраћена форма: користи се само када су две цифре за сваки канал идентичне (нпр. #11aabb). У нашем примеру, цифре се разликују (4 и F у црвеном каналу), па се не приказује скраћена форма.

Овај алгоритам је детерминистички и даје исте резултате на свим уређајима, што чини конверзију поузданом.

Ко користи ову страницу и зашто

Циљна публика су професионалци и аматери који раде са бојама у дигиталном дизајну:

• Дизајнери који креирају палете у HSL-у (нпр. у Figma или Sketch) и требају HEX кодове за имплементацију у коду или алатима попут Adobe Photoshop. HSL им омогућава да експериментишу са нијансама без утицаја на осветљеност, а затим брзо добију производни HEX код.
• Front-end програмери који добијају HSL вредности из дизајн фајлова и морају их превести у CSS својства (color, background-color, итд.). Такође, када прилагођавају теме и применом WCAG критеријума контраста (AA или AAA) мењају осветљеност у HSL-у, потом конвертују у HEX за производну употребу.
• Сви који подешавају приступачност: контрола осветљености у HSL-у омогућава директан утицај на контраст, а да притом нијанса остане нетакнута. На пример, тамнија варијанта (80, 50%, 30%) и светлија варијанта (80, 50%, 70%) исте нијансе могу се лако претворити у HEX за тестирање контраста.

Уобичајени сценарији:

• Корисник уноси HSL вредност из дизајн система и добија HEX за CSS.
• Проверава да ли одређена комбинација испуњава захтеве везане за контраст (нпр. #4f46e5 на белој позадини).
• Експорт палете из HSL у HEX ради увоз у друге алате.

Често постављана питања (ФАQ)

1. Да ли је конверзија HSL у HEX реверзибилна?
Да, апсолутно. Свака HSL вредност у оквиру дозвољених опсега производи јединствен HEX код, и сваки HEX код у оквиру sRGB гамута може се конвертовати назад у HSL (преко RGB-а). Нема губитка информација.

2. Зашто понекад видим троцифрену скраћену форму HEX-а?
Троцифрена форма (нпр. #abc) је скраћени запис за случајеве када су две цифре за сваки канал исте (нпр. #aabbcc). Алат приказује обе форме када је то могуће.

3. Да ли могу да унесем HSL вредности без знака %?
Не. Засићење и осветљеност морају бити изражене у процентима са знаком %. Ако унесете 75 уместо 75%, појавиће се порука о грешци. Хуе (нијанса) се уноси без знака (само број).

4. Шта се дешава ако унесем нијансу од 361°?
Страница ће приказати поруку о грешци, јер је дозвољени опсег 0–360 степени. Чак и ако је 360° исто што и 0° у теорији, алат захтева тачне вредности унутар опсега.

5. Које све вредности се синхронизовано ажурирају?
Поред HSL и HEX, аутоматски се мењају и RGB, HSV, CMYK и LAB вредности. Међутим, CMYK је само процена и може се разликовати од стварних штампарских вредности.

6. Да ли је мој унос сигуран?
Да. Сва обрада се врши локално у прегледачу (client-side). Ниједна информација (вредности боја или било шта друго) не напушта ваш уређај.