Сазнајте HEX боју са слике

Шта ова страница ради и по чему се разликује

Овај алат вам омогућава да учитате слику са свог уређаја, а затим преласком миша преко ње или кликом изаберете било који пиксел. Тренутно се приказује хексадецимални код те боје (HEX) заједно са RGB и HSL вредностима, тако да га можете копирати за употребу у CSS-у, дизајнерским програмима или било ком другом пројекту. Увећани приказ помаже да прецизно одаберете жељени пиксел, а историја сачуваних боја (до 12 ставки) омогућава касније позивање.

По чему се ова страница разликује од сродних (које се фокусирају на RGB функционалну нотацију или HSL):

• Хексадецимални код боје је примарни излаз – то је шестоцифрена (или троцифрена скраћеница) RGB нотација која је стандард у CSS-у и дизајнерским алатима.
• За разлику од страница које приказују RGB или HSL, ова страница даје хекс вредност која у свом шестоцифреном облику не садржи алфа канал. Свака провидност се пријављује одвојено као проценат: “Alpha ‹n›% — this pixel is partly transparent.”
• Пошто је хекс компактан, веб-изворни формат, ова страница је прави избор када вам треба вредност боје коју можете директно убацити у color, background-color или било које CSS својство без додатних заграда или синтаксе.

Ради се о клијентској обради – слика се никада не отпрема на сервер, што обезбеђује приватност. Све анализе се обављају у вашем прегледачу.

Улази и излази: како функционише узорковање боје

Дозвољени формати слика: PNG, JPG, WebP, GIF, AVIF, HEIC. MIME типови које алат прихвата су: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Ако покушате да отпремите неподржан тип, појављује се порука: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” Уколико слика не може да се отвори (оштећена или непознат формат), порука гласи: “That image could not be opened. It may be corrupted or in an unsupported format.”

Слике чија најдужа страница прелази 4096 пиксела се аутоматски скалирају на мању димензију. То је стандардна пракса како би се избегло преоптерећење меморије прегледача приликом цртања на платну (canvas).

Ток рада:

1. Учитате слику – одмах се приказују њене димензије (ширина × висина) и боја централног пиксела (са координатама, HEX, RGB, HSL).
2. Померањем курсора преко слике узоркујете боју сваког пиксела под показивачем. Координате (x, y) се ажурирају у реалном времену.
3. Кликом на слику чувате тренутну боју у историју.
4. Можете користити и тастатуру: стрелице померају унакрсну нишану за 1 пиксел; уз Shift – за 10 пиксела. Enter или Space чувају боју.

Увећани приказ (лупа) помаже да прецизно одаберете пиксел, посебно у подручјима са анти-алиасингом или компресијом.

HEX, RGB, HSL: зашто је хексадецимални код основни

Хексадецимални запис боје (#RRGGBB) је стандардни начин представљања боја у веб технологијама. Састоји се од три пара хексадецималних цифара (0-9, A-F) којима се кодирају црвена, зелена и плава компонента. Сваки пар представља вредност од 0 до 255, али у хексадецималном систему (00 до FF).

Пример: Боја #1E90FF значи:

• R = 0x1E = 30
• G = 0x90 = 144
• B = 0xFF = 255

Ово је компактнији запис од RGB функционалне нотације rgb(30,144,255) и лакши за куцање у CSS-у. Прегледачи подржавају и трознаменске скраћенице (нпр. #1E9FF али то се ретко користи; алат увек приказује пуних шест цифара).

Зашто хекс нема алфа канал? Из историјских разлога, CSS хекс запис (пре прегледача који подржавају 8-цифрени хекс) није укључивао провидност. Данас постоји #RRGGBBAA, али овај алат се држи стандардног шестоцифреног хекса, а алфа се приказује одвојено: “Alpha ‹n›% — this pixel is partly transparent.” Ако је провидност 0%, пиксел је потпуно провидан – алат то пријављује, али боја се и даље приказује (јер у PNG-у провидан пиксел и даље има RGB вредности, мада one нису видљиве).

Када кликнете на било коју приказану вредност (HEX, RGB, HSL), она се копира у клипборд. Ако прегледач блокира приступ клипборду, појављује се порука: “Could not copy — your browser blocked clipboard access.”

Правила и гранични случајеви: транспарентност, компресија, деловање тастета

Транспарентност

Код PNG-а и WebP-а пиксели могу имати алфа канал. Алат чита стварну вредност пиксела из слике, без обзира на позадину која се можда види иза ње. То значи да ако пиксел има провидност од 50%, биће приказан његов оригинални RGB – не оно што би се смешало са белом позадином. Алфа се приказује као проценат: “Alpha 50% — this pixel is partly transparent.” Исто важи и за потпуно провидне пикселе (alpha 0%).

Важно: Историја чува боје са различитим алфа вредностима као засебне уносе, чак и ако су RGB вредности исте. Нпр. црвена са alpha 100% и црвена са alpha 50% биће две различите ставке.

Компресија и анти-алиасинг

JPEG и GIF-ови не подржавају провидност, али су подложни губитној компресији. Код JPEG-а, вредности суседних пиксела често благо варирају због компресије, чак и у наизглед једноличној површини. Слично, анти-алиасинг на ивицама објеката уноси нијансе које нису део оригиналне палете. Зато је прецизно узорковање уз помоћ увећане лупе кључно.

Скалирање

Као што је речено, слике са најдужом страном већом од 4096 пиксела се скалирају. Ово може променити тачне вредности пиксела јер се примењује интерполација. Алат ради са скалираном верзијом; координате и боје се односе на ту верзију.

Тастатура

Стрелице померају нишану за 1 пиксел. Држећи Shift, померај је 10 пиксела – корисно за брже прелажење великих површина. Enter и Space чувају тренутно узорковану боју. Омогућава потпуну употребу без миша, што је битно за приступачност.

Историја сачуваних боја и рад са нишаном

Када кликнете на слику (или притиснете Enter/Space), боја се уписује у историју испод слике. Максималан број ставки је 12. Свака ставка се приказује као обојени квадратић (свач) уз хекс код. Кликом на било који свач, та боја се поново учитава – приказују се њене RGB и HSL вредности, и то постаје тренутно активна боја. Ово је корисно ако желите да копирате стару боју или да је упоредите.

Порекло координата: Тачка (0,0) је горњи леви угао слике.

Ако слика има провидне делове, нишана ће и даље приказивати боју пиксела (али са алфа вредношћу). Увећани приказ помаже да видите да ли је пиксел провидан.

Коме је овај алат намењен

• Дизајнерима који из референтних слика треба да извуку тачне пикселске боје за UI дизајн, нпр. за усклађивање са бренд палетом.
• Програмерима којима су потребне тачне хекс вредности за CSS (нпр. #1E90FF) да би ускладили боје између макете и кода.
• Креаторима садржаја који узоркују боје из слика за брендирање, сличице или графику на друштвеним мрежама.
• Свакоме ко треба да копира хексадецимални код боје из слике – на пример, да би упоредио боју у логоу, фотографији или снимку екрана.

За разлику од алата који нуде само RGB или HSL вредности, овај алат даје хекс директно – без потребе за конверзијом. У CSS-у се хекс најчешће користи, па је то уштеда времена.

Често постављана питања

1. Зашто ми приказује алфа проценат ако хекс нема алфа канал?
Зато што слика (нпр. PNG) може имати провидне пикселе. Хекс запис без алфа канала не може да представи провидност, па алат то приказује одвојено. Ако вам треба хекс са алфом, можете користити 8-цифрени запис (#RRGGBBAA) или rgba().

2. Могу ли да отпремим HEIC слику са iPhone-а?
Да, алат подржава HEIC и HEIF формате, али зависи од прегледача. Chrome и Firefox на десктопу подржавају HEIC само ако оперативни систем има одговарајући кодек. Ако дође до грешке, прво конвертујте у PNG или JPEG.

3. Зашто се боје разликују када померим миш за само један пиксел?
Због анти-алиасинга или компресије. Чак и у наизглед равном делу слике, суседни пиксели могу имати благо другачије вредности. Користите увећани приказ да бисте прецизно одлучили који пиксел желите.

4. Колико боја могу да сачувам у историји?
До 12. Када је листа пуна, нови унос замењује најстарији. Историја се брише кликом на дугме “Start over”.

5. Да ли алат ради са GIF анимацијама?
Да, учитава се први кадар GIF-а. Не подржава анимацију, већ статични оквир. Слично важи и за друге формате – алат увек приказује први кадар.

6. Шта значи “Alpha 0% — this pixel is partly transparent”?
То значи да је пиксел потпуно провидан – алфа вредност је 0. Иако приказујемо RGB вредност, она у ствари никада неће бити видљива када се слика прикаже на било којој позадини. Алат чита сирове податке из слике и показује их дословно.