Kodovi slova u boji. Boja u stilovima se može specificirati na različite načine: heksadecimalnom vrijednošću, imenom, u RGB, RGBA, HSL, HSLA formatu

Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem je, za razliku od decimalnog, zasnovan, kao što mu ime kaže, na broju 16. Brojevi će biti sledeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 zamjenjuju se latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sistemu formiraju se kombinovanjem dva broja u jedan. Na primjer, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalnom. Da bi se izbjegla zabuna u određivanju brojevnog sistema, ispred heksadecimalnog broja stavlja se heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Dakle, simbol boje je podijeljen na tri komponente #rrggbb, pri čemu prva dva simbola označavaju crvenu komponentu boje, srednja dva - zelenu, a zadnja dva - plavu. Dozvoljeno je koristiti skraćeni oblik #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fe0 treba smatrati #ffee00.

Po imenu

Pretraživači podržavaju neke boje svojim imenom. U tabeli 1 prikazuje nazive, heksadecimalni kod, RGB, HSL vrijednosti i opis.

Koristeći RGB

Možete definirati boju koristeći crvene, zelene i plave vrijednosti u decimalnim terminima. Svaka od tri komponente boje ima vrijednost od 0 do 255. Također je dozvoljeno specificirati boju kao postotak, pri čemu 100% odgovara broju 255. Prvo navedite rgb ključnu riječ, a zatim navedite komponente boje u zagradama , odvojeno zarezima, na primjer rgb(255, 128, 128) ili rgb(100%, 50%, 50%).

RGBA

RGBA format je po sintaksi sličan RGB-u, ali uključuje alfa kanal koji specificira transparentnost elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je poluprozirna.

RGBA je dodat u CSS3, tako da se CSS kod mora provjeriti u odnosu na ovu verziju. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke karakteristike mogu promijeniti. Na primjer, boja u RGB formatu dodana svojstvu background-color je potvrđena, ali boja dodana svojstvu background-a više nije važeća. Istovremeno, pretraživači sasvim ispravno razumiju boju za oba svojstva.

HSL

Naziv HSL formata izveden je iz kombinacije prvih slova Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina). Nijansa je vrijednost boje na kotaču boja (slika 1) i data je u stepenima. 0° odgovara crvenoj, 120° zelenoj, a 240° plavoj. Vrijednost nijanse može varirati od 0 do 359.

Rice. 1. Točak boja

Zasićenost je intenzitet boje i mjeri se u procentima od 0% do 100%. Vrijednost od 0% označava da nema boje i ima nijansu sive, 100% je maksimalna vrijednost za zasićenje.

Svjetlost određuje koliko je svijetla boja i određena je kao postotak od 0% do 100%. Niske vrijednosti čine boju tamnijom, a visoke vrijednosti čine boju svjetlijom; ekstremne vrijednosti od 0% i 100% odgovaraju crno-bijeloj.

HSLA

HSLA format je po sintaksi sličan HSL-u, ali uključuje alfa kanal za određivanje transparentnosti elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je poluprozirna.

Vrijednosti boja RGBA, HSL i HSLA se dodaju u CSS3, pa provjerite valjanost verzije koda kada koristite ove formate.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Upozorenje

Sve metode hvatanja lavova navedene na stranici su teorijske i bazirane na računskim metodama. Autori ne jamče vašu sigurnost prilikom njihove upotrebe i odriču se bilo kakve odgovornosti za rezultate. Zapamtite, lav je grabežljivac i opasna životinja!

Rezultat ovog primjera prikazan je na sl. 2.

Rice. 2. Boje na web stranici

Kao što znate, boja može uticati na stanje osobe: i mentalno i fizičko. Svaki dan, dok pretražujete web stranice na internetu, oči procjenjuju milione boja i nijansi. Web dizajner koji poznaje psihologiju boja može manipulirati raspoloženjem posjetitelja kako bi postigao određene ciljeve.

To je zbog činjenice da neke nijanse smiruju, a neke, naprotiv, uzbuđuju. Zatim ćemo govoriti o tome kako se boja sintetizira i prikazuje pomoću kompjuterske tehnologije.

RGB je model boja koji predstavlja metodu dobijanja svih boja i njihovih nijansi miješanjem u različitim omjerima tri glavne komponente, a to su:

• Crvena boja ( Crveni);
• zelena boja ( Zeleno);
• plava boja ( Plava).

Odatle dolazi skraćeni naziv RGB. Ove boje su izabrane kao glavne s razlogom: razlog je fiziologija retine ljudskog oka i kako ih ono percipira:

RGB model je i danas najpopularniji i koristi se za reprodukciju boja na TV ekranima i kompjuterskim monitorima. Budući da proizvođači svojim proizvodima daju različite karakteristike, 1996. godine stvoren je objedinjeni sistem sinteze boja zasnovan na RGB-u pod nazivom sRGB, na kojem su Microsoft i HP radili zajedno.

Numerički prikaz boje

Kao što je ranije spomenuto, RGB boje se formiraju miješanjem primarnih boja. Da bi se opisao intenzitet svakog od njih, usvojena je šema u kojoj je boja predstavljena rasponom 0-255 (8 bita), što u heksadecimalnom zapisu odgovara 00-FF.

Odnosno, primarne boje će izgledati ovako:

• Crvena – RGB (255,0,0);
• Zelena – RGB (0,255,0);
• Plava – RGB (0,0,255);

Ako intenzitet boje ima vrijednosti manje od 255, tada se dobijaju različite nijanse crvene, zelene i plave. Slijedi tabela njihovih gradacija, kao i heksadecimalne vrijednosti svake od nijansi:

RGB tablice boja

Naravno, pored gradacija primarnih boja, postoje i mješovite, a njihov broj je prilično velik. Stoga je kreirana tabela RGB boja u kojoj su prikazane sve postojeće nijanse, kao i njihova imena i numerički prikazi ( u decimalnom i heksadecimalnom obliku).

Možete ga pogledati ovdje. Ova tablica znatno olakšava život web dizajnerima, jer za nekoliko sekundi možete pronaći potrebnu nijansu i saznati njen brojčani prikaz.

Sigurna RGB paleta boja

Međutim, u jednom trenutku se pojavio problem sa prikazivanjem boja u različitim pretraživačima, pa je za njegovo rješavanje sastavljena takozvana “sigurna” paleta RGB boja, koje su izvedene matematičkim proračunima.

Kada pretraživač ne može ispravno prikazati boju, pokušat će dobiti nešto što mu je potrebno miješanjem susjednih boja i najvjerovatnije će rezultat biti potpuno neprihvatljiv:

Korištenjem RGB kodova boja iz ove palete, web programer može biti bezbrižan u pogledu prikaza boja na stranicama svoje web stranice kada se gleda pomoću različitih pretraživača, platformi i monitora. Iako u ovom trenutku tabela sigurnih boja gubi na važnosti ( tehnološki napredak i dalje ne miruje), kada ga koristite možete, kako kažu, mirno spavati.

Zlatna boja u RGB modelu

Reč „zlato“ je prvi put upotrebljena početkom 14. veka da opiše boju hemijskog elementa zvanog Aurum – zlato. U RGB modelu, zlatna boja je predstavljena sljedećim brojčanim vrijednostima:

• RGB (255, 215, 0) – decimalni sistem;
• HEX #FFD700 – heksadecimalni sistem.

Bež boja u RGB modelu

Bež boja zauzima prilično značajno mjesto u istoriji, čak i ako nije najizrazitija. Mnogi spomenici kulture, posebno antičke skulpture, napravljeni su od kamena sapunice i sapunice, koji imaju bež nijansu. U RGB modelu, bež boja ima sljedeće numeričke prikaze.

Nažalost, još nije moguće prikazati osjećaje okusa na web stranici. Ali to se može u potpunosti nadoknaditi uz pomoć boja. Uostalom, html boje vam omogućavaju da prikažete bilo koju od miliona nijansi. pa " olovke u boji Ima mnogo više od sedam u njegovom setu.

Šema boja u html-u

U html-u, boja se može specificirati u nekoliko formata:

1. Kao heksadecimalna vrijednost – koristi se kod specificiran u heksadecimalnom sistemu brojeva. Takvi kodovi boja u html-u se sastoje od tri para heksadecimalnih brojeva. Svaki par je odgovoran za zasićenje nijanse svojom primarnom bojom:

• Prvi numerički par je odgovoran za crvenu boju;
• Drugi par je za sadržaj zelene boje;
• Potonji je zbog svog plavog sadržaja.

Hash oznaka se stavlja na početak koda (ispred brojeva). Ovo je heksadecimalni kod boje. Pored brojeva od 1 do 9, ovaj sistem brojeva koristi i slova latinice (A, B, C, D, E, F).

Na primjer, kod bijele boje u html-u će izgledati kao #FFFFFF:

2. Ključna riječ - HTML trenutno podržava oko 147 ključnih riječi. Ali nisu sve ove riječi jedinstvene. Neki od njih se odnose na istu nijansu boje.

Sivu boju predstavljaju dvije ključne riječi: siva i siva. Njihov heksadecimalni kod (HEX) je dat istom vrijednošću #808080.

primjer:

#808080

3. U RGB formatu - ovo kodiranje boja u html-u bazira se na upotrebi tri vrijednosti, postavljene u rasponu od 0 do 255. Svaka od njih određuje zasićenost nijanse jednom od primarnih boja:

• R – crvena (crvena);
• G – zelena (zelena);
• B – plava (plava).

Broj boje u RGB formatu ispisuje se u sljedećem obliku: rgb(0, 210, 100).

background-color:rgb(100,186,43)

4. U RGBA formatu - to je poboljšani RGB format, gdje četvrta vrijednost specificira prozirnost boje kao decimalni razlomak od 0 do 1.

Primjer upotrebe:

background-color:rgba(100,86,143,0.2)

background-color:rgba(100,86,143,0.5)

background-color:rgba(100,86,143,0.8)

background-color:rgba(100,86,143,1)

HTML tablice boja i generatori boja

Sa tako širokim rasponom formata za podešavanje boja, lako se možete zbuniti. Stoga je izmišljena posebna tablica boja. Pruža 147 ključnih naziva nijansi boja sa kodovima usklađenosti u svim glavnim standardima boja. Dodatno, svako polje je opremljeno trakom za vizuelni odabir boje. Jedna od ovih tablica predstavljena je na web stranici colorscheme.ru:

Ali čak i uz ovakvo strukturiranje podudaranja, odabir prave nijanse može biti težak. I nije činjenica da će tabela kodova boja sadržavati onu koja vam je potrebna.

Kako bi zaobišli ovu prepreku i učinili izbor prave nijanse što lakšim, razvijeni su interaktivni web servisi. Njihovo korisničko sučelje se može neznatno razlikovati jedno od drugog.

Na web stranici html-color-codes.info generator boja izgleda ovako:

A u okviru usluge color-picker.appsmaster.co, ovaj alat je implementiran malo drugačije:

Zasićenost svake boje u generatoru se postavlja pomoću posebnih klizača. Vizuelno, nijansa je prikazana bojom okvira i pravougaonika sa leve strane. Na dnu, 3 polja prikazuju kod boja u osnovnim formatima.

Ali generator boja nije dostupan samo na specijaliziranim stranicama. Gotovo svi grafički uređivači opremljeni su sličnim alatom. Na primjer, Photoshop:

Sigurnosne mjere pri radu sa bojom

A to je bilo davno, još u eri video kartica koje su podržavale samo 256 boja. U tim dalekim vremenima, operativni sistemi su mogli prikazati samo određeni broj osmobitnih nijansi bez izobličenja.

Tada je razvijena sjajna tabela sigurnih boja. Naveo je 216 nijansi koje su se mogle prikazati bez izobličenja u bilo kojem pretraživaču tog vremena. I do danas ovo" odličan rukopis» još uvijek je dostupan na nekim resursima:

Danas se sve promijenilo. Stoga su sva sigurnosna pravila pri radu s bojom u html-u potpuno poništena. Uostalom, savremeni kompjuterski hardver podržava više od 16 miliona različitih nijansi. A 216 sigurnih boja palo je u zaborav.

Ove podatke u potpunosti potvrđuje statistika. Sudeći po tome, u 2014. godini svega 0,5% korisnika ima računare koji podržavaju samo 256 nijansi.

Osnove harmonije boja

Nismo svi obdareni prirodnim skladnim čulom ukusa. Stoga odabir prave boje može biti pravi izazov. Ali, svaka čast nauci, čak je uspjela da opiše harmoniju boja u obliku nekoliko shema. Svi su zasnovani na upotrebi točkića u boji. Šeme za harmoničan odabir boja u html-u.

Za html stranice, boje su naznačene uglavnom u heksadecimalnom sistemu. Da biste to učinili, koriste se dvije vrste zapisa koda - potpuno ili skraćeno. Da biste ispravno naznačili html boju u potpunosti, potrebno je da upišete šest znakova (brojeva i/ili engleskih slova) nakon oznake heša, na primjer, crna je napisana ovako: #000000. Skraćenica za određivanje html boja sastoji se od heša i tri broja i/ili slova iza njega. Međutim, ova vrsta zaliha može se koristiti samo ako se kompletan zapis date boje sastoji od identičnih simbola iza oznake heš. Na primjer, ista crna boja može se napisati ovako: #000. Možete specificirati html boje koristeći velike i male znakove, pošto ne razlikuju velika i mala slova.

Svaki znak napisan iza "#" odgovara određenom omjeru boja crvene, zelene i plave. Zauzvrat, svi monitori se sastoje od ogromnog broja piksela (mikroskopskih tačaka), od kojih svaki uključuje 3 takozvane „bamlje“ (izvora svjetlosti): crvenu, zelenu i plavu. Zatim, podešavanjem intenziteta svetlosti koju emituju ove „baterije“, monitor prikazuje boju koja nam je potrebna.

Kombinacijom intenziteta emisije crvenog, plavog i zelenog svjetla (od 0 do 256), monitori mogu prikazati 16.000.000 različitih nijansi.

Također, boje za web stranice mogu biti naznačene usmeno ili u RGB kodu.

Danas se usmeno može napisati 147 boja. Važno je znati da neki različiti nazivi mogu značiti iste boje, na primjer Siva i Siva su siva boja (#808080).

Sigurne boje za web stranice.

Ne može svaki monitor i pretraživač ispravno prikazati svih 16 miliona html boja.

Ako, na primjer, naiđete na boju koju pretraživač ne može ispravno prikazati, tada:

1. Pretraživač ga zamjenjuje onim koji mu je najsličniji i koji se može uspješno reproducirati;
2. Za ispravan prikaz, pretraživač može pomiješati nekoliko boja i reproducirati rezultat.

Kako biste osigurali da je izlaz u bilo kojem pretraživaču i na bilo kojem monitoru boja koju ste naveli u kodu, preporučuje se korištenje “Sigurne boje”. Oni nisu određivani ručno ili nečijom drugom željom, već matematički. Postoji 216 takvih 100% sigurnih boja za HTML dokumente. I iako su današnje tehnologije dostigle tačku u kojoj moderni monitori i pretraživači prepoznaju milione nijansi, preporučujemo korištenje ovih sigurnih boja kako bi se garantiralo prikazivanje boja.

Ova tabela uključuje 216 sigurnih html kodova boja. Svaka boja ima vrijednost u RGB za određivanje boje u grafičkim uređivačima i HEX za određivanje boje na html stranicama.

Kodovi boja u CSS-u se koriste za specifikaciju boja. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje ili za boju prednjeg plana elementa (npr. boja teksta, boja veze) ili za boju pozadine elementa (boja pozadine, boja bloka). Mogu se koristiti i za promjenu boje gumba, obruba, markera, lebdenja i drugih dekorativnih efekata.

Možete odrediti svoje vrijednosti boja u različitim formatima. Sljedeća tabela navodi sve moguće formate:

Navedeni formati su detaljnije opisani u nastavku.

CSS Boje - Hex kodovi

Heksadecimalni kod boja je šestocifreni prikaz boje. Prve dvije cifre (RR) predstavljaju crvenu vrijednost, sljedeće dvije predstavljaju zelenu vrijednost (GG), a posljednje dvije predstavljaju plavu vrijednost (BB).

CSS boje - kratki heksadecimalni kodovi

Kratki heksadecimalni kod boje je kraći oblik notacije od šest znakova. U ovom formatu, svaka cifra se ponavlja kako bi se dobila ekvivalentna šestocifrena vrijednost boje. Na primjer: #0F0 postaje #00FF00.

Heksadecimalna vrijednost može se uzeti iz bilo kojeg grafičkog softvera kao što je Adobe Photoshop, Core Draw, itd.

Svakom heksadecimalnom kodu boje u CSS-u prethodiće heš znak "#". Ispod su primjeri korištenja heksadecimalnih zapisa.

CSS boje - RGB vrijednosti

RGB vrijednost je kod boje koji se postavlja pomoću svojstva rgb(). Ovo svojstvo ima tri vrijednosti: po jednu za crvenu, zelenu i plavu. Vrijednost može biti cijeli broj, od 0 do 255, ili postotak.

Bilješka: Ne podržavaju svi pretraživači svojstvo boje rgb(), pa se ne preporučuje da ga koristite.

Ispod je primjer koji prikazuje više boja koristeći RGB vrijednosti.

Generator kodova boja

Možete kreirati milione kodova boja koristeći našu uslugu.

Boje sigurne za pregledač

Ispod je tabela od 216 boja koje su najsigurnije i najnezavisnije od računara. Ove boje u CSS-u se kreću od 000000 do FFFFFF heksadecimalnog koda. Oni su bezbedni za upotrebu jer obezbeđuju da svi računari ispravno prikazuju boju kada rade sa paletom od 256 boja.