Конвертор из HEX у RGB

HEX у RGB: како функционише конверзија боја на екрану

HEX у RGB конверзија ради на директном прерачунавању хексадецималне (основе 16) репрезентације боје у децималне (основе 10) RGB канале које директно користе дисплеји и софтвер за рад са бојама. Док су HEX кодови компактни и широко распрострањени у CSS-у, они су у суштини скраћеница за иста три 8-битна канала која RGB нумерички изражава. Ова страница је направљена да тај превод буде тренутан, тачан и без грешака.

Укуцате HEX код боје (попут #4f46e5 или #abc) у поље за унос, и страница одмах приказује одговарајуће RGB вредности (три броја од 0 до 255) потребне за приказ на екранима. Добијени RGB триплет се приказује заједно са другим форматима боја, тако да га можете копирати директно у код или дизајнерски софтвер.

Важно је знати да ова конверзија није приближна – она је строго математичка. Сваки пар хексадецималних цифара се множи са степенима броја 16, тако да је резултат тачан и повратан (нема заокруживања или орезивања гамута). То значи да је конверзија из #4f46e5 у 79, 70, 229 потпуно детерминистичка.

Основни принципи хексадецималне репрезентације боја

Хексадецимални систем бројева користи основу 16, са цифрама од 0 до 9 и словима од A до F (која представљају вредности 10–15). Сваки канал боје (R, G, B) у стандардном 8-битном приказу може имати 2^8 = 256 могућих вредности, од 0 до 255. Хексадецимални запис то изражава са две цифре: прва представља 16-ице, друга јединице.

На пример, за црвену боју са вредношћу 255 (максимум), хексадецимални запис је FF (15×16 + 15 = 255). Зелена вредност 128 се записује као 80 (8×16 + 0). У пуном HEX коду #4f46e5, прве две цифре 4f представљају црвени канал (4×16 + 15 = 79), друге две 46 зелени (4×16 + 6 = 70), а последње две e5 плави (14×16 + 5 = 229).

Различити бројевни системи су често присутни у рачунарству, али код боја је овај запис постао стандардан због своје компактности и једноставности. Док бисте за запис rgb(79, 70, 229) требали 13 знакова, #4f46e5 захтева седам.

Улазни и излазни подаци странице

Дозвољени улази:

• Шестоцифрени HEX кодови са решетком или без ње, попут #4f46e5 или 1E90FF
• Троцифрени скраћени кодови, попут #abc или abc

Сваки троцифрени унос се аутоматски проширује на шест цифара двоструким понављањем сваке цифре. Дакле, #abc постаје #aabbcc, а #f60 постаје #ff6600. Ова конвенција је део CSS стандарда и омогућава компактнији запис за неке боје.

Неважећи улази:

• Осмоцифрени HEX кодови (који укључују алфа канал)
• Вредности које нису хексадецималне (нпр. #xyz)
• Било шта ван формата 3 или 6 цифара

Ако унесете неважећу вредност, страница приказује поруку: "Enter a hex color like #4f46e5 or #abc." (на енглеском, у складу са уобичајеним интерфејсом). Све конверзије се изводе директно у вашем прегледачу; ништа што унесете не преноси се на сервер.

Како се врши конверзија: математика иза екрана

Конверзија је заснована на позиционом бројевном систему:

1. Уклоните # ако постоји
2. Ако је дужина 3 (нпр. abc), проширите на 6 (aabbcc)
3. Раздвојите низ на три пара: RR, GG, BB
4. Сваки пар претворите у децимални број помоћу формуле: v = d1 × 16 + d2, где су d1 и d2 вредности цифара (0–9 и 10–15 за A–F)

Радни пример:

Улаз: #4f46e5

Корак 1: уклањамо #, добијамо 4f46e5 Корак 2: дужина = 6, нема проширења Корак 3: парови су 4f, 46, e5 Корак 4:

• Црвена: 4 = 4, f = 15 → 4×16 + 15 = 79
• Зелена: 4 = 4, 6 = 6 → 4×16 + 6 = 70
• Плава: e = 14, 5 = 5 → 14×16 + 5 = 229

Излаз: rgb(79, 70, 229)

Важно: Конверзија је савршено повратна. Ако узмете 79 и претворите га назад у хексадецималу, добићете 4f. Ово чини HEX и RGB потпуно еквивалентним представама исте боје.

Зашто постоје троцифрени HEX кодови

Троцифрена скраћеница је могућа када свака компонента боје има исту вредност за обе цифре у свом хексадецималном запису. На пример:

• #aabbcc → #abc (сваки пар има две исте цифре)
• #ff6600 → #f60
• #ffffff → #fff

Кодови попут #12ab34 не могу се скратити јер се цифре у паровима разликују (1≠2, a≠b, 3≠4). Ово је граматичко правило HEX формата, а не слободан избор.

Скраћивање смањује величину кода за 43% (са 7 на 4 знака), што може бити корисно у великим CSS фајловима. Међутим, смањује и број могућих боја са 16,7 милиона (256^3) на 4096 (16^3), јер свака компонента може имати само jeдну од 16 вредности (00, 11, 22... FF).

Разлике између HEX и RGB у CSS-у

У пракси, прегледачи третирају #4f46e5 и rgb(79, 70, 229) као идентичне вредности. Међутим, постоје нијансе:

Развојни програмери често бирају HEX за статичке боје (попут палете бренда), а RGB или HSL за динамичке операције где се компоненте мењају појединачно. На пример, приликом креирања градијента у JavaScript-у лакше је радити са нумеричким вредностима RGB канала него са хексадецималним низовима.

Практични случајеви коришћења

Ова страница је намењена различитим групама корисника:

Фронт-енд програмери – Када раде са Canvas API-јем, обично требају RGB вредности за fillStyle или strokeStyle као низове или објекте. На пример, у React-у често чувају боје у објекту { r: 79, g: 70, b: 229 } лакше него у низу #4f46e5.

Дизајнери – Када добију спецификацију у HEX формату (чест у бренд водичима), али требају да унесу вредности у Adobe Photoshop, Figma или Sketch, који користе RGB клизаче. Бројеви од 0 до 255 су интуитивнији за ручно подешавање.

Студенти и ентузијасти – Истражујући како боје функционишу, могу ручно да прате конверзију и разумеју везу између хексадецималних и децималних вредности. Овај алат им омогућава да провере своја израчунавања.

Тестери приступачности – Приликом провере контраста, потребна је релативна осветљеност (luminance) која се рачуна из RGB вредности са различитим тежинама (0.2126×R + 0.7152×G + 0.0722×B). HEX се мора конвертовати пре рачунања.

Чести проблеми и грешке

1. Заборављање # – Већина прегледача и алата прихвата HEX без решетке, али то није увек случај. Ова страница прихвата оба формата.
2. Мешање алфа канала – Осмоцифрени кодови (попут #4f46e580) садрже транспарентност, али овај алат не подржава ту функцију јер конвертује само 6-цифрене и 3-цифрене.
3. Коришћење зарезних раздвајача у улазу – Неки људи покушавају да унесу 79, 70, 229 у поље за HEX. То неће радити – потребан је хексадецимални запис.
4. Грешка у интерпретацији – Мисле да #abc значи исто што и #aabbcc? Да, то је тачно. Али #abc се не може користити за било коју боју – само за оне где су парови дуплирани.
5. Разлике у величини слова – #4F46E5 и #4f46e5 су потпуно исти.

Питања и одговори

П: Зашто постоје два формата ако значе исту ствар? О: Историјски, HEX је настао из рачунарства где су хексадецималне вредности биле природне за програмере. RGB формат је дефинисан касније у CSS2 за већу читљивост. Данас се оба користе у зависности од контекста.

П: Како да претворим RGB назад у HEX? О: Сваки број од 0 до 255 претворите у хексадецимални. На пример, 79 = 0x4F, 70 = 0x46, 229 = 0xE5. Спајањем добијате #4f46e5. Ово је обрнута операција коју такође можете радити ручно.

П: Могу ли да користим 3-цифрени HEX за све боје? О: Не. Само оне боје код којих је свака компонента дељива са 17 (у децималном систему) могу се скратити. На пример, 255 = 15×17, 0 = 0×17, али 128 = 8×16 + 0, а не 7×17 + 9. Зато #808080 не може бити #808.

П: Зашто RGB вредности иду до 255, а не до 256? О: Зато што бројеви почињу од 0. Укупно 256 вредности (0–255) покрива све нивое које 8 бита може представити. Ово је стандард у дигиталним екранима.

П: Да ли постоји разлика у квалитету боје између HEX и RGB? О: Не, у модерним прегледачима нема разлике. Оба формата су интерно представљена као исти 24-битни бројеви. Разлика је само у синтакси.

П: Како ова страница подржава приступачност? О: Конверзија вам помаже да израчунате контраст. На пример, за боју позадине #1a1a2e (RGB: 26, 26, 46) и текст беле боје, можете лако добити бројчане вредности потребне за WCAG формулу.