CodeKitHubKaj je to orodje?
Barve na spletu se zapisujejo v več enakovrednih oblikah, ki jih vse določa specifikacija CSS Color na MDN. HEX (#4f46e5) je zgoščena oblika, uporabljena povsod v CSS-ju in pri predaji oblikovalskih datotek. RGB (rgb(79, 70, 229)) neposredno navede rdečo, zeleno in modro komponento, kar koda pogosto potrebuje. HSL (hsl(243, 75%, 59%)) opisuje odtenek, nasičenost in svetlost — najbolj intuitivno obliko za prilagajanje barve, na primer temnejšo ali manj nasičeno.
Vse opisujejo isto barvo; to orodje jih med seboj natančno pretvarja in prikaže predogled, da lahko potrdiš, da gre res za barvo, ki si jo želel.
Zakaj ga uporabiti?
- Sprejme kateri koli vhodni format — HEX (3- ali 6-mestni), RGB ali HSL — in vrne vse oblike.
- Živ predogled vzorčnika, da vidiš barvo, ne le številke.
- Vizualni izbirnik barv, če jo raje izbereš na oko.
- Kopiranje z enim klikom za vsako obliko, pripravljeno za CSS ali kodo.
- Brezplačno, takojšnje, brez nalaganja.
Kako ga uporabljati
- Vtipkaj ali prilepi barvo: #4f46e5, rgb(79, 70, 229) ali hsl(243, 75%, 59%) — vse deluje.
- Ali klikni izbirnik barv in izberi vizualno.
- Preberi vse tri oblike v rezultatih in preveri vzorčnik predogleda.
- Klikni "Kopiraj" ob obliki, ki jo potrebuješ.
Primer
Vnos
#4f46e5Rezultat
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Tri zapisi, ena in ista barva.
Katero obliko uporabiti?
Vse tri natančno opisujejo isto barvo — izbira je odvisna od tega, s katero se ti pri konkretni nalogi najlaže dela, ne od natančnosti.
| Oblika | Najboljša za | Zakaj |
|---|---|---|
| HEX (#4f46e5) | CSS, predaja oblikovalskih datotek, hitro kopiranje in lepljenje | Najkrajša za tipkanje in lepljenje; univerzalna oblika v oblikovalskih orodjih, kot je Figma. |
| RGB (rgb(79,70,229)) | Koda, ki neposredno obdeluje kanale, delo s platnom/slikami | Ustreza načinu, kako grafični API-ji in slikovni podatki dejansko shranjujejo barvo. |
| HSL (hsl(243,75%,59%)) | Prilagajanje barve — svetlejša, temnejša, bolj/manj nasičena | Svetlost in nasičenost sta ločeni številki, ki ju lahko neposredno prilagajaš, drugače kot pri HEX/RGB, kjer se premakne vsak kanal. |
Pogosti primeri uporabe
- Vizualna izbira barve v oblikovalskem orodju, nato pretvorba v natančno vrednost HEX ali RGB, potrebno v CSS-ju ali kodi.
- Ustvarjanje niza sorodnih odtenkov (svetlejših/temnejših različic) s pretvorbo v HSL, prilagajanjem svetlosti in ponovno pretvorbo nazaj.
- Ujemanje barve blagovne znamke med različnimi orodji, ki vsako pričakuje drugačno obliko — datoteka logotipa v RGB, priročnik znamke v HEX, spremenljivka CSS, ki za tematiziranje potrebuje HSL.
- Preverjanje, ali barva, pridobljena s posnetka zaslona ali oblikovalske datoteke (pogosto podana kot RGB), ustreza vrednosti HEX v slogovni predlogi.
Pogosta vprašanja
Kdaj naj uporabim HSL namesto HEX ali RGB?
Ko želiš o barvi razmišljati logično. Če želiš barvo v HSL narediti za 10 % temnejšo, preprosto znižaš svetlost za 10 točk; pri HEX ali RGB bi moral na novo izračunati vse kanale. Oblikovalski sistemi zato palete pogosto definirajo v HSL.
Ali orodje podpira 3-mestni HEX, kot je #fff?
Da. #fff je okrajšava za #ffffff — vsaka števka se podvoji. Sprejeti sta obe obliki, rezultat pa prikaže polno 6-mestno obliko.
Kaj pa alfa (prosojnost)?
To orodje pretvarja neprosojne barve (vrednosti RGB/HSL). Če potrebuješ prosojnost, dodaj alfa sam: rgba(79, 70, 229, 0.5) ali #4f46e580 — del z barvo ostane enak.
Zakaj se moje vrednosti HSL za 1 razlikujejo od drugega orodja?
Gre za zaokroževanje. Pretvorba HSL↔RGB proizvede necela števila, orodja pa zaokrožujejo različno. Razlika ±1 v odtenku ali odstotku je neopazna in normalna.
Ali so podprta imena barv, kot je 'red'?
V prvi fazi ne — orodje se osredotoča na tri številčne oblike, ki jih razvijalci najpogosteje pretvarjajo. Vnesi vrednost HEX/RGB/HSL barve ali jo izberi vizualno z izbirnikom.
Kdaj naj uporabim HEX, RGB ali HSL?
Če potrebuješ prosojnost, uporabi 8-mestni HEX (#RRGGBBAA) ali rgba() — 6-mestni HEX nima alfa kanala. Če želiš svetlejše ali temnejše različice iste barve, je najlažji HSL: obdrži odtenek in nasičenost enaka, spremeni le številko svetlosti. Za navadno kopiranje in lepljenje v CSS ali oblikovalska orodja ostaja 6-mestni HEX najbolj splošno sprejeta oblika.