Шта ради ова страница и по чему се разликује
Ова страница прима три децимална броја који представљају црвену, зелену и плаву компоненту боје (сваки у опсегу од 0 до 255) и тренутно приказује одговарајући хексадецимални код боје, на пример #4F46E5. Поред хекс кода, алат приказује и визуелни узорак боје и истовремено ажурира све друге подржане формате боја (HSL, HSV, CMYK, LAB и бирач боје). На тај начин корисник добија хекс вредност спремну за директну употребу у CSS-у, софтверу за дизајн или било ком другом радном току који захтева хексадецимални запис боје.
Оно што ову страницу чини другачијом од сличних алата је чињеница да се конверзија врши из RGB (децимални, три канала 0–255) у хекс (хексадецимални, шестоцифрени или троцифрени скраћени запис). Ова два формата представљају потпуно исти колорни простор – sRGB радни простор који користи већина екрана. Због тога не долази до одсецања или апроксимације боја – конверзија је тачна и реверзибилна. Хекс излаз увек почиње са # и, осим ако не користите осмоцифрени облик, не садржи алфа канал. Унос RGB вредности очекује три броја одвојена зарезима или размацима (нпр. 79, 70, 229), а резултујући хекс код је увек шестоцифрен (нпр. #4F46E5) јер се свака вредност од 0 до 255 пресликава у двоцифрени хексадецимални пар.
Како функционише RGB модел боја
RGB модел је адитивни модел боја. Боја на екрану настаје мешањем светлости црвене, зелене и плаве компоненте (примарних боја светлости). Свака компонента се чува као цео број у опсегу од 0 до 255, што одговара 8-битном запису по каналу. Укупан број могућих боја у 24-битном RGB простору је 256³ = 16,777,216. Када су све три компоненте на 0, добија се црна; када су све на 255, добија се бела. Овај опсег (0–255) није произвољан – 256 вредности (0 до 255) је максималан број који се може представити са 8 бита, а то је стандардни дубина боје за већину дигиталних екрана и слика.
Хексадецимални кодови боја: структура и правила
Хексадецимални систем (основа 16) користи цифре 0–9 и слова A–F (велика или мала слова, без разлике). Хекс код боје у CSS-у изгледа као # праћен са шест хексадецималних цифара: прве две за црвену, средње две за зелену, последње две за плаву. На пример, #1E90FF је плава нијанса позната као Доджер плава. Постоји и скраћени троцифрени запис (нпр. #ABC), где се свака од три компоненте пише једном цифром која се дуплира: #ABC је еквивалентно #AABBCC. Овај алат не аутоматски скраћује шестоцифрени код у троцифрени – #AABBCC остаје #AABBCC. Међутим, поље за унос хекс кода прихвата и троцифрени запис, који се интерно проширује.
Математика конверзије: од децималног до хексадецималног
Конверзија из RGB (децимално) у хекс (хексадецимално) заснива се на дељењу са 16. Свака RGB вредност (0–255) се дели на два дела: количник (резултат целобројног дељења са 16) и остатак. Ова два броја затим представљају две хексадецималне цифре. На пример, вредност 79:
79 ÷ 16 = 4 (цео број), остатак = 79 – (4 × 16) = 79 – 64 = 15. У хексадецималном систему, 4 је 4, а 15 је F. Дакле, 79 постаје 4F.
За вредност 70:
70 ÷ 16 = 4, остатак = 70 – 64 = 6. Постаје 46.
За вредност 229:
229 ÷ 16 = 14 (јер 16 × 14 = 224), остатак = 229 – 224 = 5. У хексу, 14 је E, 5 је 5. Постаје E5.
Спајањем добијамо #4F46E5. Овај поступак је потпуно детерминистички и реверзибилан. Због тога иста страница може истовремено да прикаже и друге формате – нема опасности од губитка података.
Употреба хекс кодова у CSS-у
У CSS-у, хексадецимални кодови се широко користе за задавање боја елементима. Најчешћа својства су color (боја текста) и background-color (боја позадине). Поред стандардне шестоцифрене нотације, постоји и троцифрена скраћеница, као и осмоцифрена нотација која укључује алфа канал (транспарентност), на пример #RRGGBBAA. Осмоцифрени запис није подразумевани излаз овог алата, али ако корисник унесе алфа вредност у неком од других формата (нпр. HSL са алфом), хекс код може да се прошири на осам цифара. Важно је напоменути да су хекс кодови неосетљиви на величину слова – #4f46e5 и #4F46E5 су потпуно исти.
Уобичајене грешке и обрада граничних случајева
Приликом уноса RGB вредности, најчешћа грешка је ван опсега (број мањи од 0 или већи од 255) или неисправан формат (нпр. три броја без раздвајања, или са тачкама уместо зареза). Ако алат препозна неисправан унос, приказује следећу поруку: „Enter RGB as three numbers 0–255, like 79, 70, 229.“ (на енглеском, како је наведено у спецификацији – али на страници на српском вероватно би било преведено, међутим у складу са упутством, задржавамо технички текст какав је дат). Ова грешка се јавља у реалном времену, без клика на дугме, јер алат ослушкује промене у свим пољима.
Други важан случај: ако корисник унесе три цифре у хекс поље (нпр. #abc), алат га проширује на #aabbcc. Међутим, приликом обрнуте конверзије (из хекса у RGB) неће аутоматски дати скраћеницу – увек ће вратити пуних шест цифара. Никакве друге промене не настају, јер је конверзија унутар истог колорног простора.
Сва обрада се одвија у прегледачу – ништа што унесете не шаље се на сервер. Ово осигурава приватност и брзину.
Честа питања
1. Зашто је хекс код увек шест цифара, а не три?
Зато што се свака RGB вредност (0–255) мора представити са две хексадецималне цифре (00 до FF). Троцифрени запис је скраћеница за боје где су обе цифре у сваком пару једнаке (нпр. #AABBCC → #ABC). Овај алат не скупља парове, али прихвата троцифрени унос.
2. Могу ли да користим размаке уместо зареза приликом уноса RGB вредности?
Да, унос 79 70 229 је подједнако важећи као и 79, 70, 229. Алат препознаје оба раздвајача.
3. Шта се дешава ако случајно унесем 300 за једну компоненту?
Алат ће одмах приказати поруку о грешци: морају бити бројеви од 0 до 255. Без обзира на то, остала поља неће бити ажурирана док се грешка не исправи.
4. Да ли се хекс код разликује ако користим мала слова?
Не, хексадецимални кодови не разликују велика и мала слова. #4f46e5 и #4F46E5 су идентични. Иако је уобичајено да се у CSS-у користе велика слова ради читљивости, није обавезно.
5. Зашто се боја на екрану можда не поклапа са одштампаном верзијом?
RGB и хекс раде у sRGB простору намењеном екранима. Штампа користи CMYK (суптрактивни) модел, а боје се често пресликавају у друге просторе (нпр. Adobe RGB) са ограниченим опсегом. Овај алат не врши конверзију у CMYK – он приказује боју каква ће изгледати на екрану.
6. Могу ли да копирам хекс код директно из поља?
Да, поље са хекс кодом је прилагођено за копирање. Само га означите (или кликните на дугме за копирање, ако постоји) и залепите у CSS или било где другде.