Што прави оваа страница
На оваа страница внесувате HEX-код на боја (на пример #4f46e5 или abc) во полето за внес, и таа веднаш ги прикажува соодветните RGB вредности – три броја помеѓу 0 и 255 – кои се потребни за приказ на екрани. Добиениот RGB-триплет се прикажува заедно со другите формати на бои, така што можете директно да го копирате во код или софтвер за дизајн.
Што ја прави оваа страница различна
Оваа страница го претвора хексадецималниот (основа 16) приказ на бојата во децималните (основа 10) RGB-канали што директно ги користат екраните и математиката за мешање на бои. Додека HEX-кодовите се компактни и широко употребувани во CSS, тие всушност се стенографија за истите три 8-битни канали што RGB ги запишува нумерички.
Бидејќи станува збор за конверзија HEX → RGB, правилата се посебни:
- HEX-кодовите се дадени како шест цифри (
#RRGGBB) или трицифрена кратенка (#RGB), при што секоја кратенка цифра се удвојува за да се добие полниот шестцифрен код. - Префиксот
#е опционален; алатката прифаќа кодови и со и без него. - Целните RGB-канали се секогаш цели броеви од 0 до 255, без алфа-канал (осумцифрени HEX-кодови што вклучуваат алфа не се обработуваат на оваа страница; страницата очекува само шестцифрени или трицифрени HEX-кодови).
- Конверзијата е строго математичка: секој пар хексадецимални цифри се множи со степени на 16, така што резултатот е точен и реверзибилен (без заокружување или отсекување на гамут).
Како функционира конверзијата од HEX во RGB
HEX-кодот е всушност три броеви запишани во хексадецимален систем – еден за црвена, еден за зелена и еден за сина компонента. Секоја компонента се претставува со две хексадецимални цифри (00 до FF), што одговара на 256 можни вредности (0–255). Трицифрената кратенка (#RGB) е покус запис: секоја цифра се удвојува, така што #abc станува #aabbcc. Ова е еквивалентно на делење на секоја компонента со 16 (една цифра) наместо со 256 (две цифри), со загуба на прецизност, но алатката автоматски ја прави експанзијата.
Пример: #4f46e5
- Одделете ги паровите:
4f(црвена),46(зелена),e5(сина). - Хексадецималните броеви се претвораат во декадни:
4f= 4 × 16 + 15 = 64 + 15 = 7946= 4 × 16 + 6 = 64 + 6 = 70e5= 14 × 16 + 5 = 224 + 5 = 229
- Резултат: RGB(79, 70, 229).
Пример: #abc
- Проширете:
#aabbcc(секоја цифра се удвојува). - Пресметајте:
aa= 10 × 16 + 10 = 170bb= 11 × 16 + 11 = 187cc= 12 × 16 + 12 = 204
- Резултат: RGB(170, 187, 204).
Математичкиот алгоритам е едноставен: за секој пар хексадецимални цифри, левата цифра се множи со 16, па се додава десната цифра. Бидејќи основата 16 е точно 2⁸, секоја вредност останува во опсегот 0–255 без потреба од заокружување.
Правила и гранични случаи
Алатката има јасни правила за валидација:
- Ако внесете вредност што не одговара на очекуваниот формат, се прикажува пораката за грешка:
"Enter a hex color like #4f46e5 or #abc." - Дозволени се мали и големи букви –
#FF6600и#ff6600се третираат исто. - Трицифрените шифри (
#rgb) автоматски се прошируваат во шестцифрени со удвојување на секоја цифра (на пример#f80→#ff8800). - HEX-код со алфа-канал (осум цифри, на пр.
#ff6600ff) не се прифаќа; страницата очекува само шест или три цифри. - Внес без префикс
#е прифатлив – на пример1E90FFе исто што и#1E90FF. - Сите полиња се ажурираат истовремено: ако уредите RGB, се пресметуваат и останатите формати (HSL, HSV, CMYK, LAB). Ова овозможува брза проверка на бојата во повеќе стандарди.
Што се случува со невалидни внесови?
Страницата не се обидува да погоди што сте сакале да напишете. Ако внесете #xyz или 12345, ќе ја видите истата порака за грешка. Ова е намерно – конверзијата бара точно хексадецимален запис, а секој друг симбол (букви над F, непарни должини) се смета за невалиден.
Кому му е потребна оваа алатка
- Фронтенд-програмери – кога треба да конвертираат CSS HEX-кодови во RGB вредности за користење во JavaScript, canvas API или inline стилови што бараат нумерички канали.
- Дизајнери – кои добиваат спецификации за бои како HEX од бренд-водичи, а треба да ги внесат во алатки за дизајн што претпочитаат RGB-лизгачи или нумерички вредности (на пример, Adobe XD, Figma, Sketch).
- Развивачи на игри и дигитални уметници – на кои им треба прецизна контрола врз каналите 0–255 за математичко манипулирање со бои.
- Студенти и учесници во курсеви за веб технологии – кои сакаат да разберат како хексадецималниот запис кореспондира со адитивниот RGB модел што го користат мониторите.
Реални сценарија
| Ситуација | Што прави алатката |
|---|---|
Имате HEX #1E90FF од дизајн-мокап и треба да го искористите во <canvas> каде што API-то очекува низа од три броја |
Ја дава RGB(30, 144, 255) |
Добивате краток код #fc0 од клиент и сакате да ги видите точните вредности |
Го проширува во #ffcc00 и прикажува RGB(255, 204, 0) |
| Работите со WCAG контраст и ви треба осветленоста на бојата (luminance) пресметана од RGB | Можете да ги ископирате каналите и да ги искористите во формулата за контраст |
| Треба да споредите две бои – едната дадена како HEX, другата како HSL | Страницата ги прикажува сите формати истовремено |
Како RGB-каналите се комбинираат за да создадат бои
RGB е адитивен модел: црвена, зелена и сина светлина се собираат. Кога сите три канали се 0, добивате црно (нема светлина). Кога сите се 255, добивате бело. Оваа алатка ви овозможува да ги видите точните вредности на секој канал, што е особено корисно за разбирање на интуитивни врски:
- Сите нијанси на сиво имаат еднакви вредности за R, G, B: на пример
#808080→ RGB(128, 128, 128). - Чисто црвена боја е
#FF0000→ RGB(255, 0, 0). - Комплементарни бои се добиваат со одземање на секој канал од 255: ако имате RGB(79, 70, 229), комплементарната е RGB(176, 185, 26).
Математиката е детерминистичка – бидејќи се работи за линеарна конверзија помеѓу две системи со иста длабочина (8 бита), нема загуба на информации.
Често поставувани прашања
Дали алатката работи и со осумцифрени HEX-кодови (со алфа)?
Не. Оваа страница е специјално наменета за шестцифрени (#RRGGBB) и трицифрени (#RGB) кодови. Ако треба да конвертирате код со алфа-канал (на пр. #4f46e580), потребна ви е алатка за RGBA.
Зошто трицифрениот код #abc станува #aabbcc, а не #0a0b0c?
Правилото во CSS и овде е дека секоја цифра се удвојува. Тоа е затоа што првичната намера на трицифрените кодови беше да овозможат пократок запис за бои каде што секоја компонента е повеќекратна од 17 (бидејќи 0x11 = 17, 0x22 = 34, итн.). Така #abc не значи „вредностите се a, b, c“ туку „вредностите се aa, bb, cc“. Ова е дефинирано во CSS спецификацијата.
Дали префиксот # е задолжителен?
Не, алатката прифаќа и код без #. На пример, 4f46e5 ќе го конвертира исто како #4f46e5. Но, ако внесете број што не е хексадецимален (на пример ghijkl), алатката ќе пријави грешка.
Може ли да копирам само RGB вредноста?
Да. Резултатот е прикажан како три броја одделени со запирки, што може директно да се копира и вметне во код. Дополнително, страницата прикажува и други формати (RGB, HSL, HSV, CMYK, LAB) кои исто така може да се копираат.
Зошто резултатот е секогаш цел број?
Бидејќи HEX-кодот користи 8 бита по канал (0–255), а хексадецималниот запис прецизно ги претставува истите вредности. Конверзијата е едноставна множење со 16 – нема потреба од заокружување. На пример, #FF = 255 точно, #80 = 128 точно.
Дали внесените податоци се зачувуваат или испраќаат некаде?
Не. Сите пресметки се вршат директно во вашиот прелистувач. Ништо од она што го пишувате не се испраќа на сервер или се складира. Ова е важно за приватност, особено ако работите со бои од доверливи проекти.
Заклучок
Оваа страница претставува прецизен, математички точен конвертор од HEX во RGB. Со поддршка на двете стандардни должини (шестцифрени и трицифрени), опционален префикс и автоматско проширување на кратенките, таа ги покрива сите реални случаи на употреба во веб развојот и дизајнот. Основниот алгоритам е прост, но резултатот е интегрален дел од секојдневната работа со бои на екрани. Користете ја за брза конверзија, за проверка на точни вредности или за учење како хексадецималниот и декадниот систем се поврзани во светот на боите.