Шта ради ова страница
Ова страница прима хексадецимални код боје — пун шестоцифрени облик попут #1E90FF или трозначну скраћеницу попут #abc — и тренутно враћа еквивалентну HSL вредност (нијансу у степенима, засићење и осветљеност у процентима). ХSL представљање је дизајнирано за људско резоновање, што олакшава прилагођавање осветљености или засићења док се задржава иста нијанса. Истовремено, страница приказује боју у свим другим подржаним форматима (HEX, RGB, HSV, CMYK, LAB) тако да можете копирати онај који вам је потребан.
Шта чини ову страницу другачијом
HEX је сирови RGB запис — шест хексадецималних цифара (или трозначна скраћеница) које директно кодирају црвену, зелену и плаву компоненту. Компактан је и широко се користи у CSS-у и алатима за дизајн, али није интуитиван за прилагођавања која су разумљива човеку. HSL је изграђен за људско резоновање — нијанса се мери у степенима (0–360), док су засићење и осветљеност проценти. Промена осветљености сама по себи не мења нијансу, због чега је HSL главни формат за генерисање палета боја и тематских система.
HEX носи информацију о непрозирности само кроз алфа канал у осмоцифреном облику, али стандардни шестоцифрени или трозначни HEX нема транспарентност. HSL такође не укључује алфа компоненту — конверзија увек ради са потпуно непрозирним бојама. С друге стране, RGB и HEX су адитивни простори (светлост се додаје), док је CMYK субтрактиван (боја се одузима од беле подлоге). HSL стоји као перцептивни модел који боље одговара начину на који људи описују боје: „светлија нијанса плаве“ уместо „више црвене и мање плаве“.
Насупрот уобичајеним конверторима који само пресликавају бројке из једног записа у други, ова страница показује боју у свим просторима истовремено. Уређивањем једног поља аутоматски се ажурирају сва остала. Нема слања података на сервер — сва конверзија се дешава у прегледачу, што значи да ништа што откуцате није отпремљено нити ускладиштено.
Како функционише HEX запис боје
Хексадецимални систем (основа 16) користи цифре 0–9 и слова A–F за представљање бројева. У шестоцифреном HEX коду, сваки пар цифара представља једну RGB компоненту: прве две за црвену, друге две за зелену и последње две за плаву. На пример, #4f46e5 се разлаже на:
- Црвена:
4f= 4 × 16 + 15 = 79 - Зелена:
46= 4 × 16 + 6 = 70 - Плава:
e5= 14 × 16 + 5 = 229
Трозначна скраћеница (нпр. #abc) је стенографија у којој се свака цифра дуплира — #abc постаје #aabbcc. Ово смањује прецизност са 256 нивоа по каналу на само 16, али омогућава брзо и компактно уношење за основне боје.
Процес конверзије HEX → HSL захтева прво претварање у RGB вредности (опсег 0–255), а затим нормализацију на опсег 0–1 пре примене математичке трансформације.
Структура HSL простора боја
HSL је акроним за Hue (нијанса), Saturation (засићење), Lightness (осветљеност). Hue је угао на кругу боја:
- 0° или 360° = црвена
- 120° = зелена
- 240° = плава
- 60° = жута, 180° = цијан, 300° = магента
Круг је континуиран — вредности могу бити било који број између 0 и 360.
Saturation (засићење) се изражава у процентима од 0% (сиво) до 100% (пуна боја). При 0%, нијанса постаје неважна — боја је само нијанса сиве коју одређује осветљеност.
Lightness (осветљеност) такође иде од 0% до 100%, при чему 0% увек даје црну, 100% увек белу, а 50% даје чисту боју при пуном засићењу. Овај средњи ниво је кључан: ако желите пастелну верзију неке боје, повећавате осветљеност изнад 50% и смањујете засићење.
Математичка конверзија из RGB у HSL почиње одређивањем максималне и минималне вредности међу R, G, B. Нека је max = max(R, G, B), min = min(R, G, B), а delta = max - min. Тада:
- Lightness:
L = (max + min) / 2 - Ако је
delta = 0, засићење је 0, а нијанса недефинисана (обично се поставља на 0) - Иначе:
- Saturation:
S = delta / (1 - |2 × L - 1|) - Hue: у зависности од тога који канал је максималан:
- Ако је
max = R:H = 60 × ((G - B) / delta mod 6) - Ако је
max = G:H = 60 × ((B - R) / delta + 2) - Ако је
max = B:H = 60 × ((R - G) / delta + 4)
- Ако је
- Saturation:
Ова формула показује зашто HSL није линеарна трансформација RGB-а — осветљеност просекује канале, а засићење зависи од дисперзије између канала.
Практична разлика између HSL и HSV
Многи алати нуде и HSL и HSV (Hue, Saturation, Value). Главна разлика лежи у дефиницији осветљености, односно вредности. HSV вредност (Value) једноставно узима максимум од R, G, B — тако да HSV боја при засићењу 100% и вредности 100% даје најсјајнију могућу верзију. HSL осветљеност (Lightness) просекује максимум и минимум, што значи да чиста боја са засићењем 100% има осветљеност 50%. Ово је интуитивније за подешавање осветљења — ако желите да затамните боју, смањујете L, а не мењате нијансу или засићење.
На пример, чиста плава (#0000FF) у HSV има H = 240°, S = 100%, V = 100%. У HSL, иста боја даје H = 240°, S = 100%, L = 50%. Ако желите светлију плаву за позадину, у HSL повећавате L на 70%, а у HSV бисте морали да смањите V и прилагодите S, што је мање директно.
Правила и гранични случајеви које страница обрађује
Страница прихвата само важеће шестоцифрене или трозначне HEX кодове, са или без водећег знака #. Ако унесете неважећу вредност — превише цифара, нехексадецимални знак (нпр. #4g46e5) или формат који није препознат — приказује се грешка: „Унесите хексадецималну боју попут #4f46e5 или #abc.“
Пошто HSL ради са вредностима које могу бити ван видљивог RGB гамута (тј. боје које људско око не може да види на екрану или које монитор не може да прикаже), страница примењује корекцију. Ако при преласку са другог простора (нпр. LAB или CMYK) унесете вредност изван RGB гамута, боја се прилагођава најближој приказаној боји. Конверзија назад у HEX може произвести благи помак — то је неизбежна последица различитих гамута.
CMYK вредности приказане на страници су процена за екран и не би требало да се користе за професионални отисак без калибрације. Разлог је тај што CMYK простор зависи од специфичног скупа боја (нпр. ISO Coated v2, SWOP) и подлоге. Ако вам је потребан тачан CMYK за штампу, користите профил боја намењен вашем излазном уређају.
Коме је ова страница намењена
Фронт-енд програмерима који пишу CSS и желе да конвертују хексадецималну боју из дизајн макете у HSL како би лакше прилагодили осветљеност за стања лебдења (hover) или варијанте тема. Уместо да рачунају „колико да додам црвене да бих добио нијансу сиве“, они једноставно мењају L процентуално.
УИ/УКС дизајнерима који мисле у терминима нијансе, засићења и осветљености и треба да ускладе бренд боју задату у HEX-у. HSL им омогућава да брзо креирају комплементарне, аналогне или монохроматске шеме тако што мењају само H или S.
Свакоме ко гради палету боја: HSL чини једноставним стварање варијација — смањите засићење за 20% да бисте добили пригушену верзију, повећајте осветљеност за 15% за светлију позадину.
Веб-приступачним ревизорима који треба да провере контрастне односе и којима је HSL лакши за резоновање од сировог HEX-а или RGB-а. Када знате да је контрастни однос функција осветљености, подешавање L вредности постаје интуитивно — повећавате разлику у L између текста и позадине док не достигнете однос 4,5:1 за WCAG AA.
Често постављана питања
Шта се дешава ако унесем осмоцифрени HEX са алфа каналом?
Страница је намењена за стандардни шестоцифрени или трозначни HEX. Осмоцифрени HEX (нпр. #4f46e580) садржи податке о транспарентности које HSL не подржава. Ако унесете осам цифара, страница ће вероватно приказати грешку, јер очекује само шест или три цифре.
Зашто HSL и HSV дају различите резултате за исту RGB вредност?
Зато што су дефиниције различите. HSL просекује максимум и минимум RGB канала да би добио осветљеност (L), док HSV користи само максимум за вредност (V). Зато чиста боја има L = 50% у HSL, а V = 100% у HSV. Ово није грешка, већ последица другачијих математичких модела.
Могу ли да користим HSL вредност директно у CSS?
Да, CSS подржава запис hsl(hue, saturation%, lightness%) од верзије CSS3. На пример: color: hsl(240, 100%, 50%) даје чисту плаву. Ово је препоручени начин за рад са бојама када желите динамичке теме, јер можете променити само L вредност помоћу CSS променљивих.
Зашто CMYK вредности нису поуздане за стварну штампу?
CMYK је субтрактиван простор који зависи од скупа боја (на пример, ISO Coated v2, Fogra39) и подлоге (бели папир, рециклирани папир, итд.). Конверзија са екрана у штампу захтева познавање профила боја излазног уређаја. Без тога, CMYK вредности су само апроксимација.
Да ли страница ради са трозначним HEX кодом попут #abc?
Да. Трозначни код #abc се интерно разлаже у #aabbcc. Ово је дефинисано CSS спецификацијом и омогућава унос 4096 различитих боја (уместо 16,7 милиона колико нуди шестоцифрени запис), али је довољно за већину свакодневних потреба.
Шта се дешава када унесем вредност која је ван RGB гамута?
Ако унесете боју из другог простора (нпр. LAB) која се не може приказати на екрану, страница је прилагођава најближој приказаној боји. Ово може изазвати благи помак у вредностима када се боја поново конвертује у HEX. Ова корекција је стандардна у свим алатима за управљање бојама.