Bijela boja u html-u. HTML vodič

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

CSS3 je predstavio 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 jednaka 0 odgovara punoj transparentnosti, 1 - punoj neprozirnosti (boja će biti ista kao što je postavljena u prva tri RGB kanala), a srednje vrijednosti , poput 0,4 ili 0,6 - prozirnost u različitim stupnjevima.

Primjer koda.

Evo kako će to raditi:

Ovaj kod je vizualno 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 - apsolutno transparentnom, vrijednost jednaka jedan prevodi boju u RGB kodu 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 decimalnom sustavu ima deset znamenki: od 0 do 9, a broj 10 je sljedeća znamenka, tada u heksadecimalnom brojevnom sustavu postoji 16 znamenki, 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. Dakle, da bi se decimalni broj 255 zapisao u heksadecimalu, koristi se oznaka FF.

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

Da biste naveli boju u heksadecimalnom sustavu, ispred numeričke vrijednosti stavite 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 u RGB formatu (rgb(r, g, b)) - svaka heksadecimalna znamenka u HEX kodu označava zasićenost boje u svom kanalu RGB modela.

Ovaj kod će prikazati sljedeće elemente:

A evo i slike s rezultatom iz odjeljka "Postavljanje boje uz 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

CSS3 ima novi format za određivanje boja.

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 s RGB modelom, tada 0° odgovara crvenoj, 120° odgovara zelenoj, a 240° odgovara plavoj.

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 formatu, kao i u RGBA, dodan je alfa kanal koji je 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.

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. Brojevi od 10 do 15 zamjenjuju se 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 bi se izbjegla zabuna u definiciji brojevnog sustava, heksadecimalnom broju prethodi 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%)	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%)	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 se specificira ključna riječ rgb, a zatim se komponente boje navedeno u zagradama, odvojeno zarezima, 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% označava da nema boje i ima nijansu sive, 100% je maksimalna vrijednost zasićenja.

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 formatima RGBA, HSL i HSLA dodaju se 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 teorijske i temelje se na računskim metodama. 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!

Rezultat ovog primjera prikazan je na sl. 2.

Riža. 2. Boje na web stranici

HEX/HTML

Boja u HEX formatu nije ništa drugo do heksadecimalni prikaz RGB-a.

Boje su predstavljene kao tri grupe heksadecimalnih znamenki, 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.

Mnoge aplikacije prihvaćaju skraćeni zapis za heksadecimalne boje. Ako svaka od tri grupe sadrži iste znakove, na primjer #112233, tada 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 računalnoj grafici.

RGB vrijednosti navedene su kao cijeli broj između 0 i 255. Na primjer, rgb(0,0,255) se prikazuje kao plava jer je plavi parametar postavljen na najvišu vrijednost (255), a ostali su postavljeni na 0.

Neke aplikacije (osobito web preglednici) podržavaju RGB postotke (od 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, zapis postotka */

RGB vrijednosti boja podržane su u svim glavnim preglednicima.

RGBA

Nedavno su moderni preglednici naučili raditi s RGBA modelom boja, proširenjem RGB-a s podrškom za alfa kanal koji određuje neprozirnost objekta.

Vrijednost RGBA boje navedena je kao: rgba(crvena, zelena, plava, alfa). Alfa parametar je broj između 0,0 (potpuno proziran) i 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+, Firefoxu 3+, Chromeu, Safariju i Operi 10+.

HSL

HSL model boja je prikaz RGB modela u cilindričnom koordinatnom sustavu. HSL predstavlja boje na način koji je intuitivniji i lakši za razumijevanje od tipičnog RGB-a. Model se često koristi u grafičkim aplikacijama, u paletama boja i za analizu slike.

HSL je skraćenica za Hue (boja / nijansa), Saturation (zasićenost), Lightness / Luminance (svjetlina / svjetlina / svjetlina, ne brkati se sa svjetlinom).

Nijansa postavlja položaj boje na kotaču boja (od 0 do 360). Zasićenje je vrijednost postotka zasićenja (od 0% do 100%). Lakoća je postotak lakoće (od 0% do 100%).

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

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

HSLA

Slično RGB/RGBA, HSL ima HSLA način rada s podrškom za alfa kanal za određivanje neprozirnosti objekta.

Vrijednost HSLA boje navedena je kao: hsla(hue, saturation, lightness, alpha). Alfa parametar je broj između 0,0 (potpuno proziran) i 1,0 (potpuno neproziran).

1. h1 ( boja: hsl(120, 100%, 50%); ) /* zelena u običnom HSL-u */
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 prozirno */

CMYK

CMYK model boja često se povezuje s tiskom u boji, s tiskom. 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 cijan (Cyan), magenta (Magenta), žuta (Yellow), uz dodatak crne (Key / blackK).

Svaki od brojeva koji definira boju u CMYK-u predstavlja postotak tinte date boje koja čini kombinaciju boja, odnosno veličinu zaslonske točke prikazane na fotoseteru na filmu te boje (ili izravno na tiskarska ploča u slučaju CTP).

Na primjer, da biste dobili boju "PANTONE 7526" pomiješali biste 9 dijelova cijan, 83 dijela magenta, 100 žutih i 46 crnih. To se može označ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) sličan je HSL-u, ali su to dva različita modela boja. Oba se temelje na cilindričnoj geometriji, ali HSB/HSV se temelji na modelu "hexcone", dok se HSL temelji na "bi-hexcone" modelu. Umjetnici često radije koriste ovaj model, općenito je prihvaćeno da je uređaj HSB / HSV bliži prirodnoj percepciji boja. Konkretno, model boja HSB koristi se u Adobe Photoshopu.

HSB / HSV je kratica za Hue (boja / nijansa), Saturation (zasićenost), Brightness / Value (svjetlina / vrijednost).

Nijansa postavlja položaj boje na kotaču boja (od 0 do 360). Zasićenje je vrijednost postotka zasićenja (od 0% do 100%). Svjetlina je postotak svjetline (od 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 su primarne komponente "imaginarne", što znači da ne možete mapirati X, Y i Z u bilo koji skup boja. XYZ je glavni model za gotovo sve druge modele boja koji se koriste u tehničkim područjima.

LABORATORIJA

LAB model boja (CIELAB, "CIE 1976 L*a*b*") izračunava se iz CIE XYZ prostora. Cilj Lab-a bio je stvoriti prostor boja u kojem bi promjena boje bila linearnija u smislu ljudske percepcije (u usporedbi s XYZ), odnosno da bi ista promjena u vrijednostima koordinata boje u različitim područjima prostora boja proizvela isti osjećaj promjene boje.