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

Za određivanje boja koriste se heksadecimalni brojevi. Heksadecimalni sustav, za razliku od decimalnog, temelji se, kao što mu i samo ime kaže, na broju 16. Brojevi će biti sljedeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 zamijenjeni su latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sustavu nastaju spajanjem dva broja u jedan. Na primjer, broj 255 u decimali odgovara broju FF u heksadecimali. Kako bi se izbjegla zabuna pri određivanju brojevnog sustava, ispred heksadecimalnog broja stavlja se hash 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, gdje prva dva simbola označavaju crvenu komponentu boje, srednja dva - zelenu, a posljednja dva - plavu. Dopušteno je koristiti skraćeni oblik #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fe0 treba smatrati #ffee00.

Imenom

Preglednici podržavaju neke boje prema njihovom nazivu. U tablici 1 prikazuje nazive, heksadecimalni kod, RGB, HSL vrijednosti i opis.

Korištenje RGB

Boju možete definirati pomoću vrijednosti crvene, zelene i plave u decimalnom obliku. Svaka od tri komponente boje ima vrijednost od 0 do 255. Također je dopušteno navesti boju kao postotak, pri čemu 100% odgovara broju 255. Prvo navedite ključnu riječ rgb, a zatim navedite komponente boje u zagradama , odvojene zarezima, na primjer rgb(255 , 128, 128) ili rgb(100%, 50%, 50%).

RGBA

Format RGBA sličan je sintaksi RGB-u, ali uključuje alfa kanal koji određuje prozirnost elementa. Vrijednost 0 je potpuno prozirna, 1 je neprozirna, a srednja vrijednost poput 0,5 je poluprozirna.

RGBA je dodan u CSS3, tako da se CSS kod mora provjeriti u odnosu na ovu verziju. Treba napomenuti da je standard CSS3 još uvijek u razvoju i da se neke značajke mogu promijeniti. Na primjer, boja u RGB formatu dodana svojstvu boje pozadine je potvrđena, ali ona dodana svojstvu pozadine više nije važeća. U isto vrijeme, preglednici sasvim ispravno razumiju boju za oba svojstva.

HSL

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

Riža. 1. Kotačić boja

Zasićenost je intenzitet boje i mjeri se u postotku od 0% do 100%. Vrijednost od 0% označava odsustvo boje i nijansu sive, 100% je najveća vrijednost za zasićenost.

Svjetlina određuje koliko je boja svijetla i navedena 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 crnoj i bijeloj.

HSLA

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

Vrijednosti boja RGBA, HSL i HSLA dodaju se u CSS3, stoga 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 teoretske i temeljene na računalnim metodama. Autori ne jamče vašu sigurnost prilikom korištenja i odriču se svake odgovornosti za rezultate. Zapamtite, lav je grabežljivac i opasna životinja!

Rezultat ovog primjera prikazan je na sl. 2.

Riža. 2. Boje na web stranici

Kao što znate, boja može utjecati na stanje osobe: psihičko i fizičko. Svaki dan, dok pregledavate web stranice na internetu, oči procjenjuju milijune boja i nijansi. Web dizajner koji je upoznat s psihologijom 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 računalne tehnologije.

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

• Crvena boja ( Crvena);
• zelena boja ( zelena);
• Plava boja ( Plava).

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

RGB model i danas ostaje najpopularniji i koristi se za reprodukciju boja na TV ekranima i računalnim monitorima. Budući da proizvođači svojim proizvodima daju različite karakteristike, 1996. godine stvoren je jedinstveni sustav sinteze boja baziran na RGB-u nazvan sRGB, na kojem su zajedno radili Microsoft i HP.

Numerički prikaz boje

Kao što je ranije spomenuto, RGB boje nastaju miješanjem primarnih boja. Kako bi se opisao intenzitet svake od njih, usvojena je shema u kojoj je boja predstavljena rasponom 0-255 (8 bitova), š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 dobivaju različite nijanse crvene, zelene i plave. Slijedi tablica njihovih gradacija, kao i heksadecimalne vrijednosti svake od nijansi:

RGB tablice boja

Naravno, osim stupnjevanja primarnih boja, postoje i mješovite boje, a njihov broj je prilično velik. Stoga je napravljena tablica RGB boja u kojoj su prikazane sve postojeće nijanse, kao i njihovi nazivi i numerički prikazi ( u decimalnom i heksadecimalnom obliku).

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

Sigurna RGB paleta boja

Međutim, u jednom trenutku pojavio se problem s prikazom boja u različitim preglednicima, a kako bi se to riješilo, sastavljena je takozvana "sigurna" paleta RGB boja, koje su izvedene matematičkim izračunima.

Kada preglednik ne može pravilno prikazati boju, pokušat će dobiti nešto približno onome što treba miješanjem susjednih boja, a najvjerojatnije ć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 gledaju pomoću različitih preglednika, platformi i monitora. Iako u ovom trenutku tablica sigurnih boja gubi na važnosti ( tehnološki napredak još uvijek ne miruje), kada ga koristite možete, kako kažu, mirno spavati.

Zlatna boja u RGB modelu

Riječ "zlato" prvi put je korištena početkom 14. stoljeća za opis boje kemijskog elementa koji se zove Aurum - zlato. U RGB modelu zlatna boja predstavljena je sljedećim numeričkim vrijednostima:

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

Bež boja u RGB modelu

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

Nažalost, na web stranici još nije moguće prikazati osjećaje okusa. Ali to se može u potpunosti nadoknaditi uz pomoć boja. Uostalom, html boje vam omogućuju prikaz bilo koje od milijuna nijansi. dakle " bojice Ima ih mnogo više od sedam u njegovom skupu.

Shema boja u html-u

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

1. Kao heksadecimalna vrijednost – koristi se šifra navedena u heksadecimalnom brojevnom sustavu. Takvi kodovi boja u html-u sastoje se od tri para heksadecimalnih brojeva. Svaki par je odgovoran za zasićenost nijanse svojom primarnom bojom:

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

Oznaka hash stavlja se na početku koda (ispred brojeva). Ovo je heksadecimalni kod boje. Osim brojeva od 1 do 9, ovaj brojevni sustav koristi slova latinične abecede (A, B, C, D, E, F).

Na primjer, kod bijele boje u html-u izgledat će 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 odnose se na istu nijansu boje.

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

Primjer:

#808080

3. U RGB formatu - ovo kodiranje boja u html-u temelji se na upotrebi triju vrijednosti, postavljenih u rasponu od 0 do 255. Svaka od njih određuje zasićenost nijanse s 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).

boja-pozadine: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:

boja-pozadine:rgba(100,86,143,0.2)

boja-pozadine:rgba(100,86,143,0.5)

boja-pozadine:rgba(100,86,143,0.8)

boja-pozadine:rgba(100,86,143,1)

HTML tablice boja i generatori boja

S tako širokim rasponom formata za postavljanje boja, lako se zbuniti. Stoga je izumljena posebna tablica boja. Nudi 147 ključnih naziva nijansi boja s kodovima sukladnosti u svim glavnim standardima boja. Dodatno, svako polje je opremljeno trakom za vizualni odabir boja. Jedna od ovih tablica predstavljena je na web stranici colorscheme.ru:

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

Kako bi se ova prepreka zaobišla i odabir prave nijanse bio što lakši, razvijene su interaktivne web usluge. Njihovo korisničko sučelje može se malo razlikovati jedno od drugog.

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

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

Zasićenost svake boje u generatoru postavlja se pomoću posebnih klizača. Vizualno, sjenilo se prikazuje bojom okvira i pravokutnika s lijeve strane. Na dnu, 3 polja prikazuju kod boje u osnovnim formatima.

Ali generator boja dostupan je ne samo na specijaliziranim stranicama. Gotovo svi grafički urednici opremljeni su sličnim alatom. Na primjer, Photoshop:

Sigurnosne mjere pri radu s bojom

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

Zatim je razvijena velika tablica sigurnih boja. Odredio je 216 nijansi koje su se mogle prikazati bez izobličenja u bilo kojem od preglednika tog vremena. I do danas ovaj " veliki rukopis» je još uvijek dostupan na nekim resursima:

Danas se sve promijenilo. Stoga su sva sigurnosna pravila pri radu s bojom u html-u potpuno poništena. Uostalom, moderni računalni hardver podržava više od 16 milijuna različitih nijansi. I 216 sigurnih boja potonulo je u zaborav.

Ove podatke u potpunosti potvrđuje statistika. Sudeći prema tome, u 2014. samo 0,5% korisnika ima računala koja podržavaju samo 256 nijansi.

Osnove harmonije boja

Nismo svi obdareni prirodnim harmoničnim osjetilom okusa. Stoga odabir prave boje može biti pravi izazov. No, svaka čast znanosti, čak je uspjela opisati harmoniju boja u obliku nekoliko shema. Svi se oni temelje na korištenju kotača boja. Sheme za skladan odabir boja u html-u.

Za html stranice, boje su naznačene uglavnom u heksadecimalnom sustavu. Da biste to učinili, koriste se dvije vrste snimanja koda - puni ili skraćeni. Da biste pravilno označili html boju u cijelosti, trebate napisati šest znakova (brojeva i/ili engleskih slova) nakon oznake hash, na primjer, crna je napisana ovako: #000000. Skraćenica za određivanje html boja sastoji se od hasha i tri broja i/ili slova iza njega. Međutim, ova vrsta dionice može se koristiti samo ako se cijeli zapis dane boje sastoji od identičnih simbola iza oznake hash. Na primjer, ista crna boja može se napisati ovako: #000. Možete odrediti html boje koristeći i velike i male znakove, budući da nisu osjetljivi na velika i mala slova.

Svaki znak napisan nakon "#" odgovara određenom omjeru crvene, zelene i plave boje. S druge strane, svi se monitori sastoje od ogromnog broja piksela (mikroskopskih točaka), od kojih svaki uključuje 3 takozvane "baterijske svjetiljke" (izvora svjetlosti): crvenu, zelenu i plavu. Zatim, podešavanjem intenziteta svjetla koje emitiraju te “baterijske svjetiljke”, monitor prikazuje boju koja nam je potrebna.

Kombinacijom intenziteta emisije crvene, plave i zelene svjetlosti (od 0 do 256), monitori mogu prikazati 16.000.000 različitih nijansi.

Također, boje za web stranice mogu se naznačiti verbalno 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 Gray i Gray su siva boja (#808080).

Sigurne boje za web stranice.

Ne može svaki monitor i preglednik ispravno prikazati svih 16 milijuna html boja.

Ako, primjerice, naiđete na boju koju preglednik ne može ispravno prikazati, tada:

1. Preglednik ga zamjenjuje onim koji mu je najsličniji i koji se može uspješno reproducirati;
2. Za ispravan prikaz preglednik može miješati nekoliko boja i reproducirati rezultat.

Kako biste osigurali da ispis u bilo kojem pregledniku i na bilo kojem monitoru bude boja koju ste naveli u kodu, preporuča se koristiti "Sigurne boje". Određeni su ne ručno ili po tuđoj želji, već matematički. Postoji 216 takvih 100% sigurnih boja za HTML dokumente. I premda su današnje tehnologije dosegle točku u kojoj moderni monitori i preglednici prepoznaju milijune nijansi, preporučujemo korištenje ovih sigurnih boja kako bi se jamčilo iskazivanje boja.

Ova tablica 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 u html stranicama.

Kodovi boja u CSS-u koriste se za određivanje boja. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje za boju prednjeg plana elementa (npr. boja teksta, boja veze) ili boju pozadine elementa (boja pozadine, boja bloka). Također se mogu koristiti za promjenu boje gumba, obruba, markera, lebdenja i drugih ukrasnih efekata.

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

Navedeni formati detaljnije su opisani u nastavku.

CSS boje - heksadecimalni kodovi

Heksadecimalni kod boje je šesteroznamenkasti prikaz boje. Prve dvije znamenke (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 zapisa od šest znakova. U ovom formatu, svaka znamenka se ponavlja kako bi se proizvela ekvivalentna šesteroznamenkasta 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 prethodit će hash znak "#". Ispod su primjeri korištenja heksadecimalnih zapisa.

CSS boje - RGB vrijednosti

RGB vrijednost je kod boje koji se postavlja korištenjem 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 preglednici svojstvo boje rgb(), stoga se ne preporučuje njegovo korištenje.

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

Generator koda boja

Pomoću naše usluge možete stvoriti milijune kodova boja.

Boje sigurne za preglednik

Ispod je tablica od 216 boja koje su najsigurnije i najviše neovisne o računalu. Te se boje u CSS-u kreću od 000000 do FFFFFF heksadecimalnog koda. Sigurni su za korištenje jer osiguravaju da sva računala ispravno prikazuju boje kada rade s paletom od 256 boja.