CodeKitHubŠta je ovaj alat?
Боје на вебу се записују у неколико еквивалентних формата, сви дефинисани у спецификацији CSS боја на MDN-у. HEX (#4f46e5) је компактан облик који се свуда користи у CSS-у и при предаји дизајна. RGB (rgb(79, 70, 229)) директно наводи компоненте црвене, зелене и плаве боје, што коду често треба. HSL (hsl(243, 75%, 59%)) описује нијансу, засићеност и осветљеност — најинтуитивнији формат за подешавање боје, на пример да је потамните или смањите засићеност.
Сва три описују потпуно исту боју; овај алат конвертује тачно између њих и приказује преглед да бисте потврдили да је то баш боја коју сте желели.
Zašto ga koristiti?
- Прихвата било који улазни формат — HEX (3 или 6 цифара), RGB или HSL — и даје све формате као излаз.
- Узорак приказа уживо да видите саму боју, не само бројеве.
- Визуелни бирач боја за оне који радије бирају оком.
- Копирање једним кликом за сваки формат, спремно за CSS или код.
- Бесплатно, тренутно, без отпремања фајлова.
Kako se koristi
- Укуцајте или налепите боју: #4f46e5, rgb(79, 70, 229) или hsl(243, 75%, 59%) — све функционише.
- Или кликните на бирач боја и изаберите визуелно.
- Прочитајте сва три формата у резултатима и проверите узорак приказа.
- Кликните „Копирај” поред формата који вам треба.
Primer
Unos
#4f46e5Rezultat
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Три записа, једна иста боја.
Који формат треба да користите?
Сва три формата описују потпуно исту боју — избор зависи од тога који је најлакши за рад у датом задатку, а не од тачности.
| Формат | Најбољи за | Зашто |
|---|---|---|
| HEX (#4f46e5) | CSS, предаја дизајна, брзо копирање и лепљење | Најкраћи за куцање и лепљење; универзалан формат у алатима за дизајн попут Figma-е. |
| RGB (rgb(79,70,229)) | Код који директно манипулише каналима, canvas/рад са сликама | Одговара начину на који графички API-ji и подаци о пикселима слике заправо чувају боју. |
| HSL (hsl(243,75%,59%)) | Подешавање боје — светлије, тамније, више/мање засићено | Осветљеност и засићеност су одвојени бројеви које можете директно подешавати, за разлику од HEX-а/RGB-а где се мења сваки канал. |
Уобичајени случајеви употребе
- Визуелно бирање боје у алату за дизајн, а затим њено конвертовање у тачну HEX или RGB вредност потребну у CSS-у или коду.
- Генерисање скупа сродних нијанси (светлије/тамније варијанте) конвертовањем у HSL, подешавањем осветљености и конвертовањем назад.
- Усклађивање боје бренда у различитим алатима од којих сваки очекује другачији формат — фајл логотипа у RGB-у, водич стила у HEX-у, CSS променљива којој је за теме потребан HSL.
- Провера да ли боја преузета са снимка екрана или из дизајн фајла (често дата као RGB) одговара HEX вредности у стилском листу.
Često postavljana pitanja
Када треба да користим HSL уместо HEX-а или RGB-а?
Када желите логички да размишљате о боји. Затамњивање боје за 10% у HSL-у значи смањење осветљености за 10 поена; у HEX-у или RGB-у морали бисте поново да израчунате све канале. Дизајн системи често дефинишу палете у HSL-у управо из тог разлога.
Да ли алат подржава скраћени HEX од 3 цифре, попут #fff?
Да. #fff је скраћеница за #ffffff — свака цифра се удвостручује. Оба облика се прихватају, а излаз приказује пуни облик од 6 цифара.
Шта је са провидношћу (alpha)?
Овај алат конвертује непровидне боје (вредности RGB/HSL). Ако вам треба провидност, сами додајте alpha: rgba(79, 70, 229, 0.5) или #4f46e580 — део са бојом остаје исти.
Зашто се моје HSL вредности разликују за 1 у односу на други алат?
Заокруживање. Конверзија HSL↔RGB производи разломљене вредности, а различити алати их различито заокружују. Разлика од ±1 у нијанси или проценту је невидљива и потпуно нормална.
Да ли су подржани називи боја попут „red”?
Не у првој фази — алат се фокусира на три нумеричка формата која програмери најчешће конвертују. Унесите HEX/RGB/HSL вредност боје или је изаберите визуелно помоћу бирача.
Када треба да користим HEX, RGB или HSL?
Ако вам треба провидност, користите 8-цифрени HEX (#RRGGBBAA) или rgba() — 6-цифрени HEX нема alpha канал. Ако желите светлије или тамније варијанте исте боје, HSL је најједноставнији: задржите нијансу и засићеност непромењеним и мењајте само вредност осветљености. За обично копирање и лепљење у CSS или алате за дизајн, 6-цифрени HEX остаје најуниверзалније прихваћен облик.