Preskoči na vsebino
TextArray

Kako pretvoriti barve med HEX, RGB in HSL

Blog /

Spletni oblikovalci in razvijalci pogosto delajo z barvami v različnih formatih v projektih, oblikovalskih sistemih in orodjih. Ne glede na to, ali preklapljate med modelom oblikovanja v HSL, datoteko CSS, ki uporablja RGB, ali smernicami blagovne znamke v HEX, če veste, kako hitro pretvoriti med temi formati, prihranite čas in preprečite napake.

Razumevanje treh glavnih barvnih formatov

HEX (šestnajstiški) zapis predstavlja barve kot šestmestne kode, npr. #FF5733, kjer pari znakov določajo intenzivnost rdeče, zelene in modre. RGB (rdeča, zelena, modra) uporablja decimalne vrednosti od 0 do 255 za vsak barvni kanal – npr. rgb(255, 87, 51). HSL (hue, saturation, lightness) opisuje barvo z uporabo kota za odtenek (0–360°), odstotka za nasičenost (0–100 %) in odstotka za svetlost (0–100 %), zapisano kot hsl(9, 100%, 60%).

Zakaj pretvarjati med formati

Različna orodja in konteksti dajejo prednost različnim formatom. Oblikovalci pogosto delajo v HSL, ker je intuitiven za prilagajanje svetlosti in nasičenosti. Spletni razvijalci uporabljajo RGB ali HEX v slogovnih listih CSS. Izdelava tiska bo morda potrebovala drugačen barvni prostor. Pretvarjanje vam omogoča premikanje dela med orodji brez ponovnega ročnega določanja barv.

Kako deluje pretvorba

Pretvarjanje med formati vključuje matematična razmerja. Pretvorba HEX v RGB je enostavna: razdelite šest znakov v tri pare in vsakega pretvorite iz šestnajstiškega (osnova 16) v decimalno (osnova 10). Pretvorba RGB v HSL je bolj zapletena, saj poišče največje in najmanjše vrednosti kanala, nato pa izpelje odtenek, nasičenost in svetlost. Obratni procesi za premik nazaj uporabljajo inverzno matematiko.

Pretvarjanje barv na spletu

Ročni izračun je nagnjen k napakam pri ponavljajočih se pretvorbah. Uporaba Barvni pretvornik za takojšnjo pretvorbo med HEX, RGB in HSL. Prilepite barvo v katero koli obliko in si oglejte enakovrednosti v vseh drugih, s čimer odpravite potrebo po razumevanju matematike.

Zagotovite dostopne izbire barv

Ko pretvorite barvo, preverite, ali ustreza standardom dostopnosti z uporabo Preverjevalnik kontrasta da potrdite zadosten kontrast z vašim besedilom. Če potrebujete oblikovalski navdih, Generator naključnih barv ustvari sveže palete, ki jih lahko nato pretvorite v želeno obliko.

Zasebnost: barve ostanejo na vaši napravi

Pretvornik barv obdela vsako pretvorbo v vašem brskalniku – nobeni podatki se ne pošljejo strežniku. Vaše barvne palete, dizajni v teku in specifikacije blagovne znamke ostanejo zasebni v vaši napravi. Orodje deluje brez povezave, ko se stran naloži, tako da lahko nadaljujete s pretvorbo barv brez dostopa do interneta.