Шта ова страница ради и по чему се разликује
Ова страница прихвата боју задату у HSL формату — нијанса (hue) у степенима од 0 до 360, засићеност (saturation) и осветљеност (lightness) као проценти — и тренутно приказује еквивалентну RGB вредност (сваки канал 0–255). Тиме се прелази са модела конципираног за људско резоновање о боји на тачне бројеве које екран користи за емитовање светлости.
Оно што ову страницу чини другачијом од уобичајених конвертера је неколико кључних особина. Прво, HSL је дизајниран за људско размишљање; променом само осветљености задржава се иста нијанса, што је разлог зашто се HSL користи за генерисање палета и тема. Друго, конверзија је без губитака: свака важећа HSL вредност мапира се у једну RGB вредност унутар приказивог опсега. Треће, не долази до клипинга ван гамута, за разлику од конверзија из LAB или CMYK у RGB, тако да нема померања боје при претварању назад.
Улази и излази: шта добијате
Улазни подаци
- HSL: нијанса 0–360, засићеност (проценат), осветљеност (проценат). На пример:
243, 75%, 59%.
Излазни подаци — сва поља се ажурирају тренутно:
- HEX
- RGB — три броја 0–255, нпр.
79, 70, 229 - HSL
- HSV
- CMYK
- LAB
Сва конверзија боја се извршава директно у вашем прегледачу; ништа што унесете не отпрема се на сервер.
Правила и гранични случајеви
- Уређивање HSL поља тренутно ажурира сва остала поља.
- Ако је HSL вредност унета неправилно, алат приказује поруку:
"Унесите HSL као нијансу 0–360 са два процента, попут 243, 75%, 59%." - Приказана CMYK вредност је процена за екран и може се разликовати од вредности које се користе у професионалној штампи због варијација у папиру, мастилу и профилима штампача.
Зашто је HSL дизајниран за људе, а RGB за машине
Људски визуелни систем не перципира боју линеарно дуж RGB оса. Када размишљате о боји, вероватно ћете рећи „плава, прилично засићена, средње светла“. Управо то описује HSL: нијанса (плава), засићеност (колико је чиста), осветљеност (колико је светла или тамна). У RGB-у, промена само једног канала често води ка промени и нијансе и засићености, што је контраинтуитивно.
Конкретан пример: узмите HSL (240°, 100%, 50%) — то је чисто плава, RGB (0, 0, 255). Ако желите светлију плаву, у HSL-у само повећате осветљеност на 70%: HSL (240°, 100%, 70%) постаје RGB (51, 51, 255). Нијанса је остала иста. У RGB-у, да бисте добили светлију плаву морали бисте да повећате све три компоненте, што би променило и нијансу и учинило боју сивкастом.
Ова особина чини HSL идеалним за генерисање палета: ако желите сет боја исте нијансе само различите осветљености (за дугмад, позадине, сенке), мењате само L. Исти приступ користите за израду тематских схема у CSS-у или дизајн системима.
Како функционише конверзија: од HSL до RGB
Математика иза конверзије је стандардизована и релативно једноставна. HSL се прво претвара у тзв. „HSL у простор“ где се засићеност и осветљеност нормализују на 0–1 (S и L, где S = S%/100, L = L%/100). Затим се израчунавају привремене вредности:
- Ако је L < 0.5: q = L * (1 + S)
Ако је L >= 0.5: q = L + S - (L * S) - p = 2 * L - q
- Свака RGB компонента (R, G, B) се израчунава из p и q на основу вредности нијансе подељене са 360 и померене за 1/3, 0, -1/3.
- Коначна вредност сваког канала је 0–255, добијена множењем са 255 и заокруживањем.
Пример за HSL (243, 75%, 59%):
- S = 0.75, L = 0.59
- Пошто је L >= 0.5: q = 0.59 + 0.75 - (0.59 * 0.75) = 0.59 + 0.75 - 0.4425 = 0.8975
- p = 2 * 0.59 - 0.8975 = 0.2825
- Нијанса h = 243/360 ≈ 0.675
- R = p + (q - p) * f(0.675 + 1/3) ≈ 0.310
- G = p + (q - p) * f(0.675) ≈ 0.274
- B = p + (q - p) * f(0.675 - 1/3) ≈ 0.898
- Након множења са 255: R≈79, G≈70, B≈229.
Овај поступак је детерминистички и потпуно поновљив. Зато је конверзија без губитака: ако исти алгоритам примените у оба смера, добићете тачну почетну вредност.
Уобичајене грешке при коришћењу HSL конвертера
Грешка 1: Погрешан опсег за нијансу
ХСТАНДАРДНА грешка је унос нијансе ван 0–360. Неки алати или старији стандарди користе опсег 0–359, али овај алат прихвата 0–360. Унос вредности попут 400 или -10 резултује поруком о грешци.
Грешка 2: Заборављање процента
Засићеност и осветљеност морају бити унети као проценти. Унос 243, 75, 59 (без знака %) тумачи се као нумеричке вредности, а алат очекује проценте. То ће створити неважећи унос.
Грешка 3: Погрешно читање CMYK излаза
Многи корисници виде CMYK вредности на екрану и помисле да су то тачне вредности за штампу. Како је наведено у правилима, CMYK приказан овде је само процена за екран. За стварну штампу потребно је користити профиле боја специфичне за папир и штампач.
Грешка 4: Претпоставка да су RGB и HSL исте вредности за све екране
Иако је математика конверзије универзална, стварна приказана боја варира од монитора до монитора због разлика у калибрацији, гамуту и профилима. Конвертер даје апсолутне бројеве, али коначни визуелни резултат зависи од хардвера.
Коме је овај алат намењен
- Дизајнерима који граде палете боја или теме и морају да добију одговарајуће RGB вредности за код.
- Фронт-енд програмерима који преносе вредности боја из дизајн алата (који често користе HSL) у CSS или други код који очекује RGB.
- Свима који воле да размишљају о боји у људски пријатним терминима (нијанса, засићеност, осветљеност) и морају тачне бројеве спремне за екран.
На пример, док радите у Figma или Sketch, боје су често изражене у HSL. Када дође време да их примените у CSS, потребан вам је RGB или HEX. Уместо ручног прорачуна или тражења другог алата, овај конвертер даје тренутни резултат.
Често постављана питања
1. Зашто ми CMYK вредности изгледају другачије на екрану него у штампи?
CMYK приказан на екрану је симулација заснована на профилима боја. Због различитих подлога, мастила и машина, стварна штампа може изгледати другачије. Овај алат служи само за оријентацију; за професионалну штампу користите одговарајуће профиле.
2. Могу ли да конвертујем назад из RGB у HSL без губитка?
Да, конверзија је потпуно реверзибилна. Свака важећа RGB вредност мапира се у јединствену HSL вредност (осим у случају сивих нијанси где је нијанса недефинисана, али се обично поставља на 0).
3. Шта се дешава ако унесем нијансу од 360 степени?
360° је еквивалентно 0° (црвена). Алат прихвата 0–360, али након конверзије, резултат за 360° биће исти као за 0°.
4. Зашто се у излазу појављује и HSV?
HSV (Hue, Saturation, Value) је још један модел сличан HSL, али са другачијим тумачењем осветљености. Често се користи у софтверу за обраду слика и фотоапаратима. Алат приказује HSV ради комплетности.
5. Да ли се моји подаци чувају негде?
Не. Сва конверзија се извршава директно у вашем прегледачу. Никакви улазни подаци не напуштају ваш уређај.
6. Како да знам да ли је мој унос исправан ако не добијем грешку?
Ако алат прикаже RGB вредности без поруке о грешци, ваш унос је исправан. Препоручује се провера да ли добијене вредности одговарају очекиваној боји упоређивањем са другим поузданим извором.