Шта овај алат ради и зашто је другачији
Уносом три броја у опсегу од 0 до 255, који описују количину црвеног, зеленог и плавог светла које екран емитује, добијате тренутну вредност у HSL формату — нијансу у степенима (0–360), засићење и осветљеност у процентима. Додатно се приказују и еквиваленти у HEX, HSV, CMYK и LAB облику.
Оно што ову страницу чини другачијом је управо прелазак из RGB модела, који је направљен за рачунаре, у HSL модел, који описује боју онако како је људи доживљавају. Када у RGB-у промените једну компоненту, често се промени и утисак коју боју видите. Код HSL-а можете да прилагодите осветљеност, а да нијанса остане потпуно иста. Зато је HSL основни алат за генерисање палета, тема и приступачних варијација боја.
Разлика између адитивног и перцептивног модела
RGB је адитивни модел. Екран ствара боју тако што истовремено пали црвене, зелене и плаве подпикселе одређеним интензитетом. Сваки канал иде од 0 (искључен) до 255 (пун интензитет). Када су сва три на 255, добија се бело; када су на 0, црно. Овај модел директно одговара физици екрана, али не и начину на који људски мозак разуме боју.
HSL, са друге стране, користи три друге димензије: нијансу, засићење и осветљеност. Нијанса је угао на кругу боја — 0° је црвена, 120° је зелена, 240° је плава. Засићење је проценат чистоће боје: 100% значи потпуно чиста нијанса без примеса сивог, 0% је сива. Осветљеност је проценат који одређује колико је боја светла или тамна: 0% је црна, 100% је бела.
Конкретно, ако узмете RGB (79, 70, 229) и претворите у HSL, добијате 243° нијансе (близу плаве), 75% засићења и 59% осветљености. Упоредите то са (79, 70, 100): две боје које у RGB-у личе једна на другу, али у HSL-ју имају потпуно другачију осветљеност. HSL вам омогућава да размишљате о томе колико је нешто светло, а не само колико црвене или плаве има у себи.
Како алат конвертује вредности
Конверзија се у потпуности извршава у вашем прегледачу. Ништа од онога што укуцате не напушта рачунар. Процес креће од нормализације RGB вредности: сваки канал се подели са 255 да би се добио број од 0 до 1. Затим се проналази највећа и најмања вредност (min и max). Разлика између њих одређује засићење, а просек даје осветљеност. Нијанса се рачуна према томе који канал је највећи и колико други канали одступају.
Ако унесете RGB вредности, добићете HSL, HEX, HSV, CMYK и LAB. Уређивање било ког поља тренутно ажурира сва остала. Ако унесете HSL вратићете RGB. Дозвољен је унос три цела броја одвојена зарезима или размацима. Ако укуцате нешто ван опсега 0–255, појављује се порука: „Унесите RGB као три броја од 0 до 255, на пример 79, 70, 229.” За HSL је дозвољен унос нијансе од 0 до 360, а засићења и осветљености са знаком процента, на пример 243, 75%, 59%. Сваки неисправан унос приказује одговарајућу поруку.
Посебан случај се дешава када унесете LAB или CMYK вредност која излази из видљивог RGB опсега. Тада алат прилагођава боју на најближу могућу на екрану. Ако исту ту боју покушате да конвертујете назад, може доћи до благог померања. Такође, CMYK излаз је само процена за екран и не треба га користити за професионалну штампу без провере.
HSL у акцији: палете, теме и приступачност
UI/UX дизајнери користе HSL када треба да направе комплетну палету боја. Замислите да имате основни бренд плаве боје. Ако желите да направите 10 нијанси за дугмад, позадину и текст, у RGB-у бисте морали да мењате све три компоненте и да проверавате да ли нијанса остаје приближно иста. У HSL-у, довољно је да мењате само осветљеност, док су нијанса и засићење фиксни. Тако добијате низ нијанси које изгледају као да су изведене из исте потпородице боје.
Теме за светли и тамни режим се такође лако праве. Узмите бренд-боју, повећајте осветљеност за светли режим, смањите за тамни — нијанса остаје нетакнута. Исто важи и за приступачност. WCAG стандард захтева одређени однос контраста између текста и позадине. У HSL-у можете да подесите осветљеност док не достигнете потребан однос, а да притом промените само један параметар уместо да балансирате три RGB канала.
Програмери често преводе дизајн токене из RGB у HSL како би их користили у CSS hsl() функцији. Ова функција омогућава динамичко мењање стилова у JavaScript-у без потребе за сложеним прорачунима.
Практичне употребе у веб развоју
CSS подржава hsl() и hsla() функције директно. Када напишете color: hsl(243, 75%, 59%);, прегледач ће приказати исту боју као rgb(79, 70, 229), али ви у коду имате контролу над засићењем и осветљеношћу. Ако желите да промените осветљеност приликом преласка мишем, довољно је да ажурирате последњи параметар.
Девелопери који раде са динамичким стиловима у JavaScript-у могу лако да генеришу варијације. На пример, за систем дизајна где дугме има активно стање, можете да смањите осветљеност за 10% и засићење за 5% у односу на основну боју, све док чувате оригиналну нијансу.
Ограничења HSL модела
Иако је HSL изузетно користан, он није савршен. Ограничење лежи у перцептивној неуједначености. Људско око не доживљава све нијансе исте осветљености као подједнако светле. На пример, жута и плава на истој HSL осветљености од 50% изгледају драстично различито: жута делује много светлије. Због тога модели попут LAB или OKLCH постоје — они су засновани на психофизичким мерењима како људи стварно виде боје.
У овом алату LAB је укључен управо за напредније кориснике којима је потребна перцептивно униформна скала. Међутим, када се претварају вредности између простора боја, могу настати проблеми са опсегом. Ако унесете LAB вредност која припада боји ван RGB гамута (на пример, веома засићена цијан), алат ће је аутоматски прилагодити. Зато се не препоручује повратна конверзија таквих боја без разумевања потенцијалног померања.
Често постављана питања
Како да унесем RGB боју у алат?
Напишите три цела броја од 0 до 255, раздвојена зарезима или размацима. На пример: 79, 70, 229 или 79 70 229. Није потребно додавати знакове попут „rgb” или заграде.
Шта се дешава ако унесем вредност ван дозвољеног опсега?
Алат приказује поруку са упутством за исправан унос. На пример, за RGB: „Унесите RGB као три броја од 0 до 255, на пример 79, 70, 229.” За HSL: „Унесите HSL као нијансу 0–360 са два процента, на пример 243, 75%, 59%.” Све конверзије се заустављају док не исправите унос.
Могу ли да претворим HSL назад у RGB?
Да. Унесите вредност нијансе (0–360), засићења и осветљености (оба у процентима, са знаком %). Алат одмах показује RGB еквивалент, као и све остале формате.
Зашто CMYK излаз није поуздан за штампу?
CMYK вредност је процена на основу конверзије из sRGB простора, без познавања специфичне штампарске машине, папира или подешавања боје. За професионалну штампу обавезно користите одговарајући ICC профил и проверите боје на monitor алату или отиску.
Када треба да користим LAB уместо HSL?
Користите LAB када вам треба перцептивно униформна скала, на пример за научну визуализацију података или напредне алгоритме за подешавање боје. У свакодневном дизајну веб палета, HSL је једноставнији и довољан, посебно у комбинацији са CSS hsl() функцијом.