Blijedo ružičasta šifra. Bijeli tekst na plavoj pozadini

koristeći atribut stila koristeći svojstvo pozadine, i dodjeljivanje vrijednosti rgb(255, 0, 0) , rgb(0, 255, 0) i rgb(0, 0, 255) . Odnosno, jedan kanal naizmjenično činimo što zasićenijim, a preostali kanali se ne koriste za sintezu, jer je njihova vrijednost nula.

Pokušajte urediti ovaj primjer kako biste uključili vlastite vrijednosti, kao što je rgb(100, 100, 100) .

Podešavanje boje pomoću RGBA

U CSS3 se pojavio novi alat za rad sa bojom - RGBA format. Može se nazvati evolucijom RGB modela, ali uz dodatak jednog novog kanala - A ili alfa kanala. Ovaj kanal postavlja transparentnost boje. Njegove vrijednosti su postavljene u rasponu od 0 do 1. Vrijednost od 0 odgovara puna transparentnost, 1 - puna neprozirnost (boja će biti ista kao što je postavljena prva tri RGB kanali) i srednje vrijednosti poput 0,4 ili 0,6 - translucencija u različitim stepenima.

Primjer koda.

Evo kako će to raditi:

Ovaj kod na svoj način vizuelna prezentacija je sličan sljedećem, koji koristi RGB model za postavljanje vrijednosti boje:

Evo njegovog rezultata:

Vrijednost alfa kanala jednaka nuli čini bilo koju boju nevidljivom - potpuno transparentnom, vrijednost jednako jedan prevodi boju u RGB kod bez promjena. Svojstvo rgba(255,0,0,1.0) pokazuje crvenu boju rgb(255, 0, 0) .

Po heksadecimalnoj vrijednosti (HEX kod)

U svakodnevnom životu koristimo decimalni sistem brojanja. Njegovo porijeklo je vrlo jednostavno - imamo deset prstiju na rukama i bilo je zgodno računati na prste u životu. Ako u decimalni sistem deset cifara: od 0 do 9, a broj 10 je sljedeća cifra, zatim ima 16 cifara u heksadecimalnom brojevnom sistemu, a sljedeća cifra će biti broj 16.

Za označavanje kodova boja, obične decimalne cifre od 0 do 9 koriste se kao heksadecimalne cifre, a latinična slova od A do F se koriste za označavanje brojeva od 10 do 15, odnosno (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Radi jasnoće, sumiramo ovo u tabeli:

Za pisanje heksadecimalnih brojeva većih od F (15 decimala), kao u decimalnom sistemu, oni takođe koriste uniju dve cifre, ali već heksadecimalne, što je očigledno. Da, za zapisnik decimalni broj 255 in heksadecimalni sistem Koristi se FF notacija.

Heksadecimalni sistem je razumljiviji računaru, brže obrađuje vrednosti koje su date heksadecimalnom vrednošću.

Za navođenje boje u heksadecimalnom sistemu, prije numerička vrijednost potrebno je staviti znak "#", na primjer: #FFC0CB . Sama vrijednost #FFC0CB sastoji se od tri heksadecimalne cifre FF, C0 i CB. Značenje ovog unosa je isto kao i postavljanje boje RGB format(rgb(r, g, b) ) - svaka heksadecimalna cifra u HEX kodu označava zasićenost boja u svom kanalu RGB modela.

Ovaj kod će prikazati sljedeće elemente:

A evo i slike s rezultatom iz odjeljka "Podešavanje boje sa koristeći RGB" na ovoj stranici iznad.

Fig.1. Boje u RGB.

Vidimo da su boje identične.

Dozvoljena je skraćena notacija za HEX kod boje: 6-cifreni broj se može napisati kao trocifreni broj. Ovo vrijedi samo ako se dvije cifre u vrijednosti boje istog kanala ponavljaju.

Odnosno, sljedeća skraćenica je prihvatljiva:

Na primjer, boja #ff22aa može biti napisana kao #f2a , ili boja #44aa22 može biti napisana kao #4a2 .

Postavljanje boje pomoću HSL-a

U CSS3 se pojavio novi format da odredite boju.

HSL format je skraćenica od engleskih riječi: Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina).

Nijansa u HSL-u je vrijednost boje na posebnom kotaču boja (slika 2) i određena je u stepenima. Ako povučemo analogije sa RGB model, zatim 0° je crvena, 120° je zelena, a 240° je plava.

Vrijednost nijanse će se promijeniti od 0 do 359.

Slika 2. HSL točak boja.

Druga vrijednost - zasićenost (Saturate) je postavljena kao postotak. Pri 100% zasićenosti, boja je što je moguće "sočnija", kako se indikator zasićenosti pomiče prema 0%, boja postaje sve dosadnija i postaje siva.

Treća vrijednost - lakoća (Lightness) je također postavljena kao procenat. Što je veći procenat, to će boja biti svetlija. Ekstremne vrijednosti od 0% i 100% će ukazati na crnu (nedostatak svjetla) i bijelu (izložena) boje, i nije bitno koja je boja iz kotača boja odabrana u prvom kanalu. Optimalna vrijednost može se smatrati vrijednost svjetline boje jednaka 50%.

Podešavanje boja sa HSLA

HSLA format je povezan sa HSL-om, kao što je RGB i RGBA. IN HSLA format, kao iu RGBA, dodaje se alfa kanal odgovoran za transparentnost boja.

Boja specificirana u HSL formatu je lakša za čitanje. Možemo reći da je intuitivno. Na primjer, kod hsl(120,60%,50%) može predstavljati konačnu boju ako postoji slika HSL kotača boja u memoriji. To se ne može reći za RGB i HEX formate, kod boja naveden u ovim formatima postaje jasan tek nakon što se prikaže na monitoru.

Novi formati u CSS3 (HSL, HSLA i RGBA) rade u pretraživačima od verzija: IE 9.0, Opera 10.0 Firefox 3.0. Kako natjerati stilove da rade na starijim pretraživačima?

Neki blok (boja pozadine: rgb(255,50,50); boja pozadine: rgba(255,50,50,0.85))

Kada koristite ovaj kod u starijim pretraživačima, boja pozadine za klasu .someblosk, iako ne koristi alfa kanal, biće prikazana u RGB formatu.

26.02.15. 8.9K

Kao što znate, boja može utjecati na stanje osobe: i psihičko i fizičko. Svakog dana, pretražujući internet, oči procjenjuju milione boja i nijansi. Web dizajner koji je upoznat sa psihologijom boja može kontrolirati raspoloženje posjetitelja kako bi postigao bilo koji cilj.

To je zbog činjenice da neke nijanse smiruju, a neke, naprotiv, uzbuđuju. Dalje razgovaraćemo o tome kako se boja sintetiše i prikazuje pomoću kompjuterske tehnologije.

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

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

Odatle dolazi skraćeni naziv RGB. Ove boje su odabrane 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 kompjuterski monitori. Budući da proizvođači obdaruju svoje proizvode različite karakteristike, osnovana je 1996. godine jedan sistem sinteza boja zasnovana na RGB-u pod nazivom sRGB, na kojoj su zajednički radili Microsoft i HP.

Numerički prikaz boja

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 odgovara 00-FF u heksadecimalnom.

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 njihove gradacije, kao i heksadecimalne vrijednosti svake od nijansi:

RGB grafikoni 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).

Ovdje je možete upoznati. Ovaj sto znatno olakšava život web dizajnerima, jer za nekoliko sekundi možete pronaći željenu nijansu i saznati njen brojčani prikaz.

Sigurna RGB paleta boja

Međutim, u jednom trenutku je došlo do problema sa prikazivanjem boja u raznim pretraživačima, pa je takozvani „sef“ sastavljen da ga riješi. RGB paleta boje koje su izvedene matematičkim proračunima.

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

Korištenje kodova RGB boje iz ove palete, web programer se možda neće bojati prikaza boja na stranicama svoje stranice kada se gleda pomoću različitim pretraživačima, na razne platforme i monitore. Iako na ovog trenutka sto sigurne boje gubi svoju relevantnost tehnološki napredak ne miruje), kada ga koristite, možete, kako kažu, mirno spavati.

Zlatna boja u RGB modelu

Po prvi put riječ "zlato" upotrijebljena je početkom XIV vijeka za opisivanje boje 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ž uzima prilično značajno mesto u istoriji, čak i ako nije najizrazitija. Mnogi spomenici kulture, posebno antičke skulpture, izrađeni su od steatita i sapunice, koji imaju bež nijansu. U RGB modelu, bež ima sljedeće numeričke prikaze.

Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem, za razliku od decimalnog, baziran je, kao što mu ime govori, 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 se zamjenjuju sa 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 heksadecimalu. Da bi se izbjegla zabuna u definiciji brojevnog sistema, prije heksadecimalni broj stavite heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Tako je oznaka boje podijeljena na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja zelenu, a posljednja dva plavu. Dozvoljeno je koristiti skraćeni oblik #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fe0 treba smatrati #ffee00.

po imenu

Internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Pretraživači podržavaju neke boje po imenu. U tabeli. 1 prikazuje nazive, heksadecimalni kod, vrijednosti u RGB, HSL formatu i opis.

Tab. 1. Nazivi boja

Ime	Boja	Šifra	RGB	HSL	Opis
bijela		#fffff ili #ffff	rgb(255,255,255)	hsl(0,0%,100%)	Bijelo
srebro		#c0c0c0	rgb(192,192,192)	hsl(0,0%,75%)	siva
siva		#808080	rgb(128,128,128)	hsl(0,0%,50%)	Tamno siva
crna		#000000 ili #000	rgb(0,0,0)	hsl(0,0%,0%)	Crni
maroon		#800000	rgb(128,0,0)	hsl(0,100%,25%)	Tamno crvena
crvena		#ff0000 ili #f00	rgb(255,0,0)	hsl(0,100%,50%)	Crveni
narandžasta		#ffa500	rgb(255,165,0)	hsl(38.8,100%,50%)	Narandžasta
žuta		#ffff00 ili #ff0	rgb(255,255,0)	hsl(60,100%,50%)	Žuta
maslina		#808000	rgb(128,128,0)	hsl(60,100%,25%)	Maslina
kreč		#00ff00 ili #0f0	rgb(0,255,0)	hsl(120,100%,50%)	svijetlo zelena
zeleno		#008000	rgb(0,128,0)	hsl(120,100%,25%)	Zeleno
aqua		#00ffff ili #0ff	rgb(0,255,255)	hsl(180,100%,50%)	Plava
plava		#0000ff ili #00f	rgb(0,0,255)	hsl(240,100%,50%)	Plava
mornarica		#000080	rgb(0,0,128)	hsl(240,100%,25%)	Tamno plava
teal		#008080	rgb(0,128,128)	hsl(180,100%,25%)	plavo zeleno
fuksija		#ff00ff ili #f0f	rgb(255,0,255)	hsl(300,100%,50%)	Pink
ljubičasta		#800080	rgb(128,0,128)	hsl(300,100%,25%)	Ljubičasta

Sa RGB

Internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

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 prihvatljivo postaviti boju kao postotak, dok će 100% odgovarati broju 255. Prvo navedite ključna riječ rgb , a zatim u zagradama, odvojenim zarezima, navedite komponente boje, na primjer, rgb(255, 128, 128) ili rgb(100%, 50%, 50%).

RGBA

Internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

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

RGBA je dodat u CSS3, tako da valjanost CSS koda treba da se izvrši prema ovoj verziji. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke njegove karakteristike mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color prolazi validaciju, ali boja dodana svojstvu background-color ne prolazi. Istovremeno, pretraživači sasvim ispravno razumiju boju za oba svojstva.

HSL

Internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

Naziv HSL formata formiran je od kombinacije prvih slova Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina). Nijansa je vrijednost boje na kotaču boja (slika 1) i određena je u stepenima. 0° je crvena, 120° je zelena, a 240° je plava. Vrijednost nijanse može varirati od 0 do 359.

Rice. 1. Točak boja

Zasićenost je intenzitet boje, mjeren u procentima od 0% do 100%. Vrijednost od 0% znači da nema boje i ima nijansu sive, 100% maksimalna vrijednost zasićenje.

Svjetlost postavlja koliko je svijetla boja i specificira se kao postotak od 0% do 100%. Male vrijednosti čine boju tamnijom, dok je visoke vrijednosti čine svjetlijom, ekstremne vrijednosti od 0% i 100% odgovaraju crno-bijeloj.

HSLA

Internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

HSLA format je po sintaksi sličan HSL-u, ali uključuje alfa kanal koji postavlja transparentnost elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

Vrijednosti boja in RGBA formati, HSL i HSLA se dodaju u CSS3, pa kada koristite ove formate, provjerite valjanost koda u odnosu na verziju.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Upozorenje

Sve metode hvatanja lava navedene na stranici su teoretske i zasnovane na računske metode. Autori ne jamče vašu sigurnost kada ih koristite i odriču se bilo kakve odgovornosti za rezultat. Zapamtite, lav je grabežljivac i opasna životinja!

Rezultat ovaj primjer prikazano na sl. 2.

Rice. 2. Boje na web stranici