Bijela boja u html-u. HTML student

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 i navedite svoje vrijednosti, na primjer rgb (100, 100, 100).

Podešavanje boje pomoću RGBA

CSS3 predstavlja 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 jednaka 0 odgovara punoj transparentnosti, 1 - punoj neprozirnosti (boja će biti ista kao što je navedena u prva tri RGB kanala), a srednja vrijednosti, poput 0,4 ili 0,6 - do različitih stupnjeva translucencije.

Primjer koda.

Ovako to funkcionira:

Ovaj kod je vizualno sličan sljedećem, koji koristi RGB model za postavljanje vrijednosti boje:

Evo rezultata:

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

Heksadecimalna vrijednost (HEX kod)

U svakodnevnom životu koristimo decimalni sistem brojanja. Njegovo porijeklo je vrlo jednostavno - imamo deset prstiju na rukama, a nekada je bilo zgodno brojati na prste u životu. Ako u decimalnom sistemu ima deset cifara: od 0 do 9, a broj 10 je već sljedeća znamenka, onda u heksadecimalnom sistemu ima 16 cifara, a sljedeća cifra će biti broj 16.

Za označavanje kodova boja kao heksadecimalne cifre koriste se obične decimalne cifre od 0 do 9, a za označavanje cifara od 10 do 15 koriste se latinična slova od A do F, 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 u decimalnom sistemu), kao iu decimalnom sistemu, koriste se i konkatenacija dve cifre, ali već heksadecimalne, što je očigledno. Dakle, za pisanje decimalnog broja 255 u heksadecimalnom zapisu koristi se FF.

Heksadecimalni sistem je razumljiviji za računar, brže obrađuje vrednosti određene heksadecimalnom vrednošću.

Da biste naveli boju u heksadecimalnom sistemu, prethodite numeričkoj vrijednosti znakom "#", na primjer: # FFC0CB. Sama vrijednost # FFC0CB sastoji se od tri heksadecimalne cifre FF, C0 i CB. Značenje ove notacije je isto kao i postavljanje RGB boje (rgb (r, g, b)) - svaka heksadecimalna cifra u HEX kodu označava zasićenost boje u svom RGB kanalu.

Ovaj kod će prikazati sljedeće stavke:

A evo i slike sa rezultatom iz odeljka "Podešavanje boja sa RGB" na ovoj stranici iznad.

Slika 1. Boje u RGB.

Vidimo da su boje identične.

Dozvoljena je skraćena notacija HEX koda u boji: 6-cifreni broj se može napisati kao trocifreni broj. Ovo vrijedi samo kada se ponove dvije cifre u vrijednosti boje jednog kanala.

Odnosno, sljedeća skraćenica oznake je prihvatljiva:

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

Postavljanje boje pomoću HSL-a

CSS3 uvodi novi format za određivanje boja.

HSL je skraćenica od engleskih riječi Hue, Saturate i Lightness.

Nijansa u HSL-u je vrijednost boje na posebnom kotaču boja (slika 2) i određena je u stepenima. U analogiji sa RGB modelom, 0 ° odgovara crvenoj, 120 ° odgovara zelenoj, a 240 ° odgovara plavoj.

Vrijednost nijanse će se kretati od 0 do 359.

Slika 2. HSL točak boja.

Druga vrijednost je zasićenje (Saturate) se postavlja u procentima. Pri 100% zasićenosti, boja je maksimalno "sočna", kako se indikator zasićenja pomiče na 0%, boja postaje sve dosadnija i postaje siva.

Treća vrijednost, Lightness, također je postavljena kao postotak. Što je veći procenat, to će boja biti svetlija. Ekstremne vrijednosti od 0% i 100% će značiti crnu (bez svjetla) i bijelu (izduvanu) boju, respektivno, bez obzira koja je boja iz kotača boja odabrana u prvom kanalu. Optimalna vrijednost svjetline boje može se smatrati jednakom 50%.

Podešavanje boja sa HSLA

HSLA je povezan sa HSL-om, baš kao što je RGB i RGBA. U HSLA formatu, kao iu RGBA, dodat je alfa kanal koji je odgovoran za transparentnost boje.

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

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

Someblosk (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će koristiti alfa kanal, biće prikazana u RGB formatu.

Heksadecimalni brojevi se koriste za postavljanje boja. Heksadecimalni sistem, za razliku od decimalnog, zasnovan je, 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 heksadecimalu formiraju se kombinovanjem dva broja u jedan. Na primjer, 255 decimala jednako je FF heksadecimalno. Da bi se izbjegla zabuna u definiciji brojevnog sistema, hex simbol # stavlja se ispred heksadecimalnog broja, na primjer # 666999. Svaka od tri boje - crvena, zelena i plava - može se kretati od 00 do FF. Dakle, oznaka boje je podijeljena na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja - zelenu, a zadnja dva - plavu. Dozvoljeno je koristiti skraćeni oblik kao što je #rgb, gdje svaki znak treba udvostručiti. Dakle, #fe0 unos treba tretirati kao #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. Table 1 prikazuje nazive, heksadecimalni kod, RGB, HSL vrijednosti i opis.

Tab. 1. Nazivi boja

Ime	Boja	Kod	RGB	Hsl	Opis
bijela		#fffff ili #fff	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%)	Crno
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%)	Mornarsko 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 odrediti boju pomoću decimalnih vrijednosti crvene, zelene i plave komponente. Svaka od tri komponente boje ima vrijednost od 0 do 255. Dozvoljeno je i postavljanje boje kao postotak, dok će 100% odgovarati broju 255. Prvo je naznačena ključna riječ rgb, a zatim u zagradi komponente boje su označene, odvojene zarezima, 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 kontrolira transparentnost elementa. Vrijednost 0 odgovara punoj transparentnosti, 1 neprozirnosti, a srednja vrijednost poput 0,5 poluprozirnosti.

RGBA je dodat u CSS3, tako da bi valjanost CSS koda trebala biti obavljena pomoću ove verzije. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke karakteristike mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color je potvrđena, ali boja dodana svojstvu background-a više ne. 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 vrednost boje na krugu boja (slika 1) i data je u stepenima. 0° je crvena, 120° je zelena, a 240° je plava. Vrijednost nijanse može biti u rasponu od 0 do 359.

Rice. 1. Točak boja

Zasićenost je intenzitet boje, mjeren u procentima od 0% do 100%. Vrijednost od 0% označava bez boje i nijansu sive, 100% je maksimalna vrijednost zasićenja.

Svjetlost postavlja koliko je svijetla boja i prikazuje se u procentima od 0% do 100%. Niske vrijednosti čine boju tamnijom, a visoke vrijednosti posvjetljuju, 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 odgovara punoj transparentnosti, 1 neprozirnosti, a srednja vrijednost poput 0,5 poluprozirnosti.

Vrijednosti boja u formatima RGBA, HSL i HSLA dodane su u CSS3, stoga provjerite valjanost verzije kada koristite ove formate.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Upozorenje

Sve metode za hvatanje lava navedene na stranici su teorijske i bazirane na računskim metodama. 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 ovog primjera prikazan je na sl. 2.

Rice. 2. Boje na web stranici

HEX / HTML

HEX boja nije ništa drugo do RGB heksadecimalna reprezentacija.

Boje su predstavljene kao tri grupe heksadecimalnih cifara, pri čemu je svaka grupa odgovorna za svoju boju: # 112233, gdje je 11 crvena, 22 zelena, 33 plava. Sve vrijednosti moraju biti između 00 i FF.

U mnogim aplikacijama dozvoljen je skraćeni oblik zapisa za heksadecimalne boje. Ako svaka od tri grupe sadrži iste znakove, na primjer # 112233, onda se mogu napisati kao # 123.

1. h1 (boja: # ff0000;) / * crvena * /
2. h2 (boja: # 00ff00;) / * zelena * /
3. h3 (boja: # 0000ff;) / * plava * /
4. h4 (boja: # 00f;) / * ista plava, skraćenica * /

RGB

RGB (crvena, zelena, plava) prostor boja sastoji se od svih mogućih boja koje se mogu dobiti miješanjem crvene, zelene i plave. Ovaj model je popularan u fotografiji, televiziji i kompjuterskoj grafici.

RGB vrijednosti su specificirane kao cijeli broj od 0 do 255. Na primjer, rgb (0,0,255) se prikazuje plavo jer je plavi parametar postavljen na najveću vrijednost (255), a ostali su postavljeni na 0.

Neke aplikacije (posebno web pretraživači) podržavaju procentualno pisanje RGB vrijednosti (0% do 100%).

1. h1 (boja: rgb (255, 0, 0);) / * crvena * /
2. h2 (boja: rgb (0, 255, 0);) / * zelena * /
3. h3 (boja: rgb (0, 0, 255);) / * plava * /
4. h4 (boja: rgb (0%, 0%, 100%);) / * ista plava, postotak pisanja * /

RGB vrijednosti boja su podržane u svim glavnim pretraživačima.

RGBA

Nedavno su moderni pretraživači naučili da rade sa RGBA modelom boja - RGB ekstenzijom sa podrškom za alfa kanal koji određuje neprozirnost objekta.

Vrijednost RGBA boje je specificirana kao: rgba (crvena, zelena, plava, alfa). Alfa je broj u rasponu od 0,0 (potpuno transparentan) do 1,0 (potpuno neproziran).

1. h1 (boja: rgb (0, 0, 255);) / * plava u normalnom RGB * /
2. h2 (boja: rgba (0, 0, 255, 1);) / * ista plava u RGBA, jer neprozirnost: 100% * /
3. h3 (boja: rgba (0, 0, 255, 0.5);) / * neprozirnost: 50% * /
4. h4 (boja: rgba (0, 0, 255, .155);) / * neprozirnost: 15,5% * /
5. h5 (boja: rgba (0, 0, 255, 0);) / * potpuno transparentan * /

RGBA je podržan u IE9 +, Firefox 3+, Chrome, Safari i Opera 10+.

Hsl

HSL model u boji je cilindrični prikaz RGB modela. HSL predstavlja boje na intuitivniji i razumljiviji način od tipičnog RGB-a. Model se često koristi u grafičkim aplikacijama, u biračima boja i za analizu slike.

HSL je skraćenica za Hue, Saturation, Lightness/Luminance, ne treba se brkati sa svjetlinom.

Nijansa postavlja poziciju boje na krugu boja (od 0 do 360). Zasićenost je postotak zasićenja (0% do 100%). Lakoća je procenat lakoće (0% do 100%).

1. h1 (boja: hsl (120, 100%, 50%);) / * zelena * /
2. h2 (boja: hsl (120, 100%, 75%);) / * svijetlo zelena * /
3. h3 (boja: hsl (120, 100%, 25%);) / * tamno zelena * /
4. h4 (boja: hsl (120, 60%, 70%);) / * pastelno zelena * /

HSL je podržan u IE9 +, Firefoxu, Chromeu, Safariju i Opera 10+.

HSLA

Slično RGB / RGBA, HSL ima HSLA način rada s alfa kanalom koji označava neprozirnost objekta.

HSLA vrijednost boje je data kao: hsla (nijansa, zasićenost, svjetlina, alfa). Alfa je broj u rasponu od 0,0 (potpuno transparentan) do 1,0 (potpuno neproziran).

1. h1 (boja: hsl (120, 100%, 50%);) / * zelena u normalnom HSL * /
2. h2 (boja: hsla (120, 100%, 50%, 1);) / * ista zelena u HSLA, jer neprozirnost: 100% * /
3. h3 (boja: hsla (120, 100%, 50%, 0,5);) / * neprozirnost: 50% * /
4. h4 (boja: hsla (120, 100%, 50%, .155);) / * neprozirnost: 15,5% * /
5. h5 (boja: hsla (120, 100%, 50%, 0);) / * potpuno transparentan * /

CMYK

CMYK model boja se često povezuje sa štampanjem i štampanjem u boji. CMYK (za razliku od RGB) je subtraktivan model, što znači da su veće vrijednosti povezane s tamnijim bojama.

Boje su određene omjerom Cyan, Magenta, Yellow, uz dodatak crne (Key / crna).

Svaki od brojeva koji definiraju boju u CMYK-u predstavlja postotak mastila date boje koji čini kombinaciju boja, odnosno veličinu rasterske tačke prikazane na fotoseteru na filmu date boje (ili direktno na štamparska ploča u slučaju CTP).

Na primjer, da biste dobili boju PANTONE 7526, pomiješajte 9 dijelova cijan, 83 magenta, 100 žutih i 46 crnih. To se može naznačiti na sljedeći način: (9,83,100,46). Ponekad koriste takve oznake: C9M83Y100K46, ili (9%, 83%, 100%, 46%), ili (0,09 / 0,83 / 1,0 / 0,46).

HSB / HSV

HSB (također poznat kao HSV) je sličan HSL-u, ali su to dva modela različitih boja. Oba su zasnovana na cilindričnoj geometriji, ali je HSB / HSV baziran na modelu "hexcone", dok je HSL zasnovan na "bi-hexcone" modelu. Umjetnici često radije koriste ovaj model, općenito je prihvaćeno da je HSB / HSV uređaj bliži prirodnoj percepciji boja. Konkretno, model boja HSB se koristi u Adobe Photoshopu.

HSB / HSV je skraćenica za Hue, Saturation, Brightness / Value.

Nijansa postavlja poziciju boje na krugu boja (od 0 do 360). Zasićenost je postotak zasićenja (0% do 100%). Svjetlina je postotak svjetline (0% do 100%).

XYZ

Model boja XYZ (CIE 1931 XYZ) je čisto matematički prostor. Za razliku od RGB, CMYK i drugih modela, u XYZ, glavne komponente su "imaginarne", to jest, ne možete povezati X, Y i Z ni sa jednim skupom boja za miješanje. XYZ je glavni model za gotovo sve druge modele boja koji se koriste u tehničkim poljima.

LAB

LAB model boja (CIELAB, "CIE 1976 L * a * b *") se izračunava iz CIE XYZ prostora. Prilikom razvoja Lab-a cilj je bio stvoriti prostor boja u kojem će promjena boje biti linearnija sa stanovišta ljudske percepcije (u poređenju sa XYZ), odnosno da ista promjena u vrijednostima koordinata boje u različite regije prostora boja proizvode isti osjećaj promjene boje.