Blijedoružičasti kod. Bijeli tekst na plavoj pozadini

korištenjem atributa stila pomoću svojstva pozadine i dodjeljivanjem vrijednosti rgb(255, 0, 0) , rgb(0, 255, 0) i rgb(0, 0, 255) . Odnosno, naizmjenično jedan kanal č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, poput rgb(100, 100, 100) .

Postavljanje boje pomoću RGBA

U CSS3 se pojavio novi alat za rad s bojom - RGBA format. Može se nazvati evolucijom RGB modela, ali s dodatkom jednog novog kanala - A ili alfa kanala. Ovaj kanal postavlja prozirnost 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 - prozirnost u različitim stupnjevima.

Primjer koda.

Evo kako će to raditi:

Ovaj kod na svoj način vizualna 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 jednom 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 sustav brojanja. Njegovo porijeklo je vrlo jednostavno - imamo deset prstiju na rukama, a bilo je zgodno brojati na prste u životu. Ako u decimalni sustav deset znamenki: od 0 do 9, a broj 10 je sljedeća znamenka, zatim postoji 16 znamenki u heksadecimalnom brojevnom sustavu, a sljedeća znamenka će biti broj 16.

Za označavanje kodova boja, obične decimalne znamenke od 0 do 9 koriste se kao heksadecimalne znamenke, 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, sumirajmo ovo u tablicu:

Za pisanje heksadecimalnih brojeva većih od F (15 decimalnih), kao u decimalnom sustavu, oni također koriste uniju dviju znamenki, ali već heksadecimalni, što je očito. Da, za zapisnik decimalni broj 255 in heksadecimalni sustav Koristi se FF notacija.

Heksadecimalni sustav je razumljiviji za računalo, brže obrađuje vrijednosti zadane heksadecimalnom vrijednošću.

Za određivanje boje u heksadecimalnom sustavu, prije brojčana vrijednost trebate staviti znak "#", na primjer: #FFC0CB . Sama vrijednost #FFC0CB sastoji se od tri heksadecimalne znamenke FF, C0 i CB. Značenje ovog unosa je isto kao i postavljanje boje RGB format(rgb(r, g, b) ) - svaka heksadecimalna znamenka u HEX kodu označava zasićenost boje u svom RGB kanalu modela.

Ovaj kod će prikazati sljedeće elemente:

A evo i slike s rezultatom iz odjeljka "Postavljanje boje s koristeći RGB" na ovoj stranici iznad.

Sl. 1. Boje u RGB.

Vidimo da su boje identične.

Dopuštena je skraćena oznaka za HEX kod boje: 6-znamenkasti broj može se napisati kao troznamenkasti broj. Ovo vrijedi samo ako se dvije znamenke u vrijednosti boje istog kanala ponavljaju.

Odnosno, prihvatljiva je sljedeća kratica:

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

Postavljanje boje pomoću HSL-a

U CSS3 se pojavio novi format za određivanje boje.

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 stupnjevima. Ako povučemo analogije sa RGB model, tada je 0° crveno, 120° zeleno, a 240° plavo.

Vrijednost nijanse će se promijeniti od 0 do 359.

Slika 2. HSL kotač boja.

Druga vrijednost - zasićenost (Saturate) postavlja se kao postotak. Pri 100% zasićenosti boja je što "sočnija", kako se indikator zasićenosti pomiče prema 0%, boja postaje sve mutnija i previja se u sivu.

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

Postavljanje boja s HSLA

HSLA format je povezan s HSL-om, kao što je RGB i RGBA. U HSLA format, kao u RGBA, dodan je 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 se u memoriji nalazi slika HSL kotača boja. To se ne može reći za RGB i HEX formate, kod boja naveden u tim formatima postaje jasan tek nakon što se renderira na monitoru.

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

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

Kada koristite ovaj kod u starijim preglednicima, boja pozadine za klasu .someblosk, iako ne koristi alfa kanal, bit će prikazana u RGB formatu.

26.02.15. 8,9K

Kao što znate, boja može utjecati na stanje osobe: i mentalno i fizičko. Svaki dan, pregledavajući Internet, oči procjenjuju milijune boja i nijansi. Web dizajner koji je upoznat s psihologijom boja može kontrolirati raspoloženje posjetitelja za postizanje bilo kojeg cilja.

To je zbog činjenice da neke nijanse smiruju, a neke, naprotiv, uzbuđuju. Unaprijediti pričat ćemo o tome kako se boja sintetizira i prikazuje pomoću računalne tehnologije.

RGB je model boja koji predstavlja metodu 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 način na koji ih ono percipira:

RGB model i danas je 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 sustav sinteza boja temeljena 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 nastaju miješanjem primarnih boja. Za opisivanje intenziteta svakog od njih usvojena je shema 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 dobivaju različite nijanse crvene, zelene i plave. Slijedi tablica njihove gradacije, kao i heksadecimalne vrijednosti svake od nijansi:

RGB karte boja

Naravno, osim gradacija primarnih boja, postoje i mješovite, 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 brojčani prikazi ( u decimalnom i heksadecimalnom obliku).

Ovdje je možete upoznati. Ova tablica uvelike olakšava život web dizajnerima, jer u nekoliko sekundi možete pronaći željenu nijansu i saznati njezin brojčani prikaz.

Sigurna RGB paleta boja

No, u nekom trenutku se pojavio problem s prikazom boja u raznim preglednicima, te je za njegovo rješavanje sastavljen takozvani "sigur". RGB paleta boje koje su izvedene matematičkim proračunima.

Kada preglednik ne može ispravno prikazati boju, pokušava se približiti onome što mu je potrebno miješanjem susjednih boja, a rezultat će najvjerojatnije 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 preglednicima, na razne platforme i monitori. Iako na ovaj trenutak stol 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" korištena je početkom XIV stoljeća za opisivanje boje kemijskog elementa nazvanog Aurum - zlato. U RGB modelu, zlatna boja je predstavljena sljedećim brojčanim vrijednostima:

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

Bež boja u RGB modelu

Bež uzima prilično značajno mjesto u povijesti, č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 sustav, za razliku od decimalnog sustava, temelji se, kako mu ime govori, na broju 16. Brojevi će biti sljedeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Zamjenjuju se brojevi od 10 do 15 latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sustavu nastaju spajanjem dva broja u jedan. Na primjer, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalnom. Kako ne bi došlo do zabune u definiciji brojevnog sustava, prije heksadecimalni broj stavite hash 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, pri čemu prva dva znaka označavaju crvenu komponentu boje, dva srednja 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

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

Preglednici podržavaju neke boje po imenu. U tablici. 1 prikazuje nazive, heksadecimalni kod, vrijednosti u RGB, HSL formatu i opis.

Tab. 1. Nazivi boja

Ime	Boja	Kod	RGB	HSL	Opis
bijelim		#fffff ili #fff	rgb(255,255,255)	hsl(0,0%,100%)	Bijeli
Srebro		#c0c0c0	rgb(192,192,192)	hsl (0,0%, 75%)	Siva
siva		#808080	rgb(128,128,128)	hsl (0,0%, 50%)	Tamno siva
crno		#000000 ili #000	rgb(0,0,0)	hsl(0,0%,0%)	Crno
kesten		#800000	rgb(128,0,0)	hsl(0,100%,25%)	Tamno crvena
Crvena		#ff0000 ili #f00	rgb(255,0,0)	hsl(0,100%,50%)	Crvena
naranča		#ffa500	rgb(255,165,0)	hsl(38.8,100%,50%)	naranča
žuta boja		#ffff00 ili #ff0	rgb(255,255,0)	hsl(60,100%,50%)	Žuta boja
maslina		#808000	rgb(128,128,0)	hsl(60,100%,25%)	Maslina
vapno		#00ff00 ili #0f0	rgb(0,255,0)	hsl(120,100%,50%)	svijetlo zelena
zelena		#008000	rgb(0,128,0)	hsl(120,100%,25%)	Zelena
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%)	Ružičasta
ljubičasta		#800080	rgb(128,0,128)	hsl(300,100%,25%)	Ljubičasta

S RGB-om

Internet Explorer	Krom	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	Krom	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 prozirna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

RGBA je dodan u CSS3, tako da valjanost CSS koda treba provesti prema ovoj verziji. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke njegove značajke mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color prolazi provjeru valjanosti, ali ona dodana svojstvu pozadine ne. Istodobno, preglednici sasvim ispravno razumiju boju za oba svojstva.

HSL

Internet Explorer	Krom	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 stupnjevima. 0° je crvena, 120° je zelena, a 240° je plava. Vrijednost nijanse može varirati od 0 do 359.

Riža. 1. Kotačić u boji

Zasićenost je intenzitet boje, mjeren u postocima 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 određena je u postocima 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	Krom	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 prozirna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

Vrijednosti boja u 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 temelje se na računske metode. Autori ne jamče vašu sigurnost prilikom njihove uporabe i odriču se bilo kakve odgovornosti za rezultat. Zapamtite, lav je grabežljivac i opasna životinja!

Proizlaziti ovaj primjer prikazano na sl. 2.

Riža. 2. Boje na web stranici