Pri písaní atribútu štýlu používame vlastnosť pozadia a hodnoty sú priradené RGB (255, 0, 0), RGB (0, 255, 0) a RGB (0, 0, 255). To znamená, že sme striedavo vytvoríme jeden kanál, ako je to možné, a zostávajúce kanály sa nepoužívajú na syntézu, pretože ich hodnota sa rovná nul.

Skúste tento príklad editovať a zadajte svoje hodnoty, ako je RGB (100, 100, 100).

Nastavte farbu pomocou RGBA

CSS3 má nový nástroj na prácu s Farbou - Formát RGBA. Môže byť nazývaný vývoj modelu RGB, ale pridaním jedného nového kanála - alebo alfa kanálu. Tento kanál stanovuje transparentnosť farieb. Jeho hodnoty sú nastavené v rozsahu od 0 do 1. Hodnota rovného do 0 zodpovedá plnej priehľadnosti, 1 - úplná opacita (farba bude špecifikovaná v prvých troch kanáloch RGB) a medziprodukty, ako 0,4 alebo 0,6 - priesvitu k rôznym stupňom.

Vzorový kód.

Takto to bude fungovať:

Tento kód pre svoju vizuálnu reprezentáciu je podobná nasledujúcim spôsobom pomocou modelu RGB na nastavenie hodnoty farby:

Tu je jeho výsledok:

Hodnota alfa kanálu rovná KNAU robí akúkoľvek farbu neviditeľnú - absolútne transparentná, hodnota rovnajúca sa, aby sa preložila farbu v kóde o RGB nezmenenej. Vlastnosť RGBA (255,0,0,1.0) zobrazuje červenú RGB (255, 0, 0).

V hexadecimálnej hodnote (hexový kód)

V živote hluku používame systém desatinnej skóre. Jeho pôvod je veľmi jednoduchý - máme desať prstov v náručí, a to bolo vhodné počítať na prstoch mojej ceste. Ak existuje desať číslic v desiatnom systéme: od 0 do 9 a číslo 10 je už ďalším vypúšťaním, potom v hexadecimálnom čísle 16 číslic a nasledujúci vypúšťanie bude číslo 16.

Ak chcete špecifikovať kódy farieb ako hexadecimálne číslice, konvenčné desatinné čísla od 0 do 9 sa používajú a latinské písmená z A až F, ktorý je (0, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 6 , 2, 7, 8, 9, A, B, C, D, E, F). Pre jasnosť to znížime v tabuľke:

Ak chcete zaznamenať hexadecimálne čísla, viac ako f (15 cez desatinný systém), ako v desatinnom systéme, tiež používajú kombináciu dvoch číslic, ale už hexadecimálne, čo je zrejmé. Takže na zaznamenanie desatinného čísla 255 v hexadecimálnom systéme používa záznam FF.

Hexadecimálny systém je pochopiteľnejší pre počítača, spracuje hodnoty uvedené v hexadecimálnej hodnote.

Ak chcete zadať farbu v systéme 16.-Riche, pred číselnou hodnotou musíte nastaviť znak "#", príklad: # ffc0cb. Hodnota samotného # FFC0CB pozostáva z troch hexadecimálnych číslic FF, C0 a CB. Význam tohto záznamu je rovnaký ako inštalácia farby vo formáte RGB (RGB (R, G, B)) - Každá hexadecimálna hodnota v hexárnom kóde označuje saturáciu farieb vo svojom modelovom kanáli RGB.

Tento kód zobrazí nasledujúce položky:

Ale výkres s výsledkom z časti "nastavená farba pomocou RGB" na tejto stránke.

Obr. Farby v RGB.

Vidíme, že farby sú identické.

Skrátené nahrávanie šesťhranného kódu farby je povolené: 6-miestne číslo môže byť napísané ako 3-miestne. Je prípustné len v prípade, že dve číslice sa opakujú vo farbe farby jedného kanála.

To znamená, že nasledujúce zníženie záznamu je prípustné:

Napríklad farba # FF22AA je prípustná na písanie SO-# F2A alebo COLOR # 44AA22 je prípustné špecifikovať vo formulári # 4A2.

Nastavte farbu pomocou HSL

Nový formát sa objavil v CSS3 na určenie farby.

Formát HSL je skratka z anglických slov: odtieň (odtieň), nasýtených (nasýtenia) a ľahkosťou (Svetlota).

Hue na HSL je farebná hodnota na špeciálnom farebnom kruhu (obrázok 2) a je nastavená v stupňoch. Ak držíte analógie s modelom RGB, potom 0 ° zodpovedá červenej, 120 ° zodpovedá zelenej a 240 ° - modrej farbe.

Hodnota odtieňa sa zmení v rozsahu od 0 do 359.

Obrázok 2. Farba HSL.

Druhou hodnotou je saturácia (nasýtená) nastavená v percentách. S 100% nasýtením je farba maximálna "šťavnatá", pretože indikátor posúva nasýtenie na 0%, farba sa stáva viac nudnými a valcami do šedej.

Tretí význam - lightlock (ľahkosť) tiež nastavené percento. Čím vyššie je to percento, tým jasná farba bude. Extrémne hodnoty 0% a 100% budú označené čiernou (nedostatok svetla) a biele (zatratené) farby, nezáleží na tom, akú farbu z farebného kruhu bola vybratá v prvom kanáli. Optimálna hodnota môže byť považovaná za hodnotu svetla farieb 50%.

Nastavte farbu pomocou HSLA

Formát HSLA je spojený s HSL, rovnako ako RGB s RGBA. Vo formáte HSLA, ako v RGBA pridaný alfa kanál zodpovedný za transparentnosť farieb.

Farba zadaná vo formáte HSL čítajte jednoduchšie. Možno povedať, že je intuitívne pochopený. Napríklad kód HSL (120,60%, 50%) môže byť odoslaný konečnú farbu, ak je obraz farebného kruhu HSL. Nie je možné povedať o formátoch RGB a HEX, farebný kód uvedený v týchto formátoch sa vydá len po vizualizácii na monitore.

Nové formáty v CSS3 (HSL, HSLA a RGBA) Práca v prehliadačoch od verzie: IE 9.0, Opera 10.0 Firefox 3.0. Ako urobiť štýly pracujúce na starých prehliadačoch?

Nejabeblock (pozadia-farba: RGB (255,50,50); na pozadí - farba: RGBA (255,50,50,0,0,085))

Pri použití takéhoto kódu v starej prehliadačoch, farba pozadia pre triedu .Somebloxk, hoci nebude používať alfa kanál, ale bude zobrazený v RGB formáte.

Vlad merzehevich

V HTML je farba nastavená jedným z dvoch spôsobov: pomocou hexadecimálneho kódu a menom niektorých farieb. Metóda sa používa primárne, založená na hexadecimálnom počítači ako najuniverzálnejší.

HEX FARBY

Pri nastavení farieb v HTML sa používajú čísla v hexadecimálnom kóde. Hexadecimálny systém, na rozdiel od desatinného systému, je založený z jeho mena, medzi číslom 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, \\ t A, B, C, D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. V Tab. 6.1 Korešpondencia desatinných a hexadecimálnych čísel.

Čísla sú viac ako 15 v hexadecimálnom systéme sú tvorené kombináciou dvoch čísel v jednom (tabuľka 6.2). Napríklad číslo 255 v desatinnom systéme zodpovedá číslu ff v hexadecimálnom.

Aby ste nemali zamieňať zmätok v definícii číselného systému, symbol mriežky je nastavený pred hexadecimálnym, napríklad # AA69CC. V tomto prípade je register nezáleží, preto je prípustné písať # f0f0f0 alebo # f0f0f0.

Typická farba použitá v HTML je nasledovná.

Tu je farba webovej stránky nastavená ako # FA8E47. Symbol mriežky # pred číslom znamená, že je hexadecimálny. Prvé dve číslice (FA) určujú červenú zložku farieb, čísla s tretími až štvrtými (8E) - zelenými a poslednými dvoma číslicami (47) - modrý. Výsledkom je, že takúto farbu vypne.

Fa.

+

8e.

+

47

=

Fa8E47.

Každá z týchto troch farieb je červená, zelená a modrá - môže mať hodnoty od 00 až ff, čo nakoniec tvorí 256 odtieňov. Celkový počet farieb teda môže byť 256x256x256 \u003d 16.777.216 kombinácie. Farebný model založený na červenej, zelenej a modrej zložke sa nazýval RGB (červená, zelená, modrá; červená, zelená, modrá). Tento model je aditívum (od add-toly), v ktorom pridanie všetkých troch zložiek tvorí bielu.

Ak chcete uľahčiť navigáciu v hexadecimálnych farbách, zohľadnite určité pravidlá.

• Ak sú hodnoty farebného komponentu rovnaké (napríklad: # D6D6D6), potom sa zobrazí sivý odtieň. Čím väčšie je číslo, zapaľovacia farba, hodnoty sa menia z # 000000 (čierne) do #fffffffff (biely).
• Bright Red Farba je vytvorená, ak je červená zložka vyrobená maximálna (FF), a zostávajúce komponenty reset. Farba s hodnotou # FF0000 je najdôležitejšia z možných červených odtieňov. To je rovnaké so zelenou (# 00FF00) a modrou (# 0000ff).
• Žltá (# FFFF00) sa získa zmiešaním červenou farbou so zelenou farbou. Je jasne viditeľný vo farebnom kruhu (obr. 6.1), kde sú uvedené hlavné farby (červené, zelené, modré) a komplementárne alebo ďalšie. Patrí medzi ne žltá, modrá a fialová (stále nazývaná fialová). Všeobecne platí, že každá farba môže byť získaná zmiešaním kvetov neďaleko neho. Blue (# 00ffff) sa získa kombináciou modrej a zelenej.

Obr. 6.1. Farebný kruh

Farby v hexadecimálnych hodnotách nemusí nutne vybrať empiricky. Grafický editor môže pracovať na tento účel, schopný pracovať s rôznymi farebnými modelmi, ako je Adobe Photoshop. Na obr. 6.2 Zobrazenie okna Ak chcete vybrať farbu v tomto programe, riadok krúžil výslednú hexadecimálnu hodnotu aktuálnej farby. Môže sa kopírovať a prilepiť na môj kód.

Obr. 6.2. Okno pre výber farby vo Photoshope

Farby

Ak nastavíte kvalitu vydávania farby monitora v 8 bitoch (256 farbách), potom sa rovnaká farba sa môže objaviť v rôznych prehliadačoch vlastným spôsobom. Je to spôsobené spôsobom zobrazenia grafiky, keď prehliadač pracuje s vlastnou palete a nemôže zobraziť farbu, ktorú nemá v palete. V tomto prípade je farba nahradená kombináciou pixelov iných, blízkych, farieb, ktoré napodobňujú špecifikované. Aby sa farba zostala nezmenená v rôznych prehliadačoch, predstavil paletu takzvaných webových farieb. Webové prostriedky sa nazývajú také farby pre každú zložku, ktorej je nainštalovaná červená, zelená a modrá - jedna zo šiestich hodnôt - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) ), 255 (FF). V zátvorkách je uvedená hexadecimálna hodnota tejto zložky. Celkový počet farieb zo všetkých možných kombinácií poskytuje 6x6x6 - 216 farbách. Príklad Web Color - # 33FF66.

Hlavným znakom webovej farby je, že sa zobrazuje rovnako vo všetkých prehliadačoch. V súčasnosti je relevantnosť webových farieb pomerne malý kvôli zlepšeniu kvality monitorov a rozšíriť ich schopnosti.

Farby podľa mena

Aby ste nezapamätali sa súbor čísel, namiesto toho môžete použiť mená rozsiahlych farieb. V Tab. 6.3 Zobrazuje názvy populárnych názvov farieb.

Tabuľka. 6.3. Názvy niektorých farieb

Názov farby	Farba	Popis	Hexadecimálny
Čierna.		Čierny	#000000
modrá		Modrá	# 0000ff.
fuchsia.		Ľahký fialový	# FF00FF.
Šedá.		Tmavošedý	#808080
zelená.		zelená	#008000
vápno		Svetlo zelená	# 00ff00.
more.		Tmavo červená	#800000
námorníctva.		Tmavomodrá	#000080
olivový.		Olivový	#808000
fialová.		Tmavý fialový	#800080
červený		Červený	# FF0000.
strieborný		Svetlo sivá	# C0c0c0.
modrozelený		Sine-zelená	#008080
biely		biely	#Ffffff.
žltá		žltá	# Ffff00.

Nezáleží na tom, aký spôsob, ako nastavíte farbu - podľa jeho mena alebo s hexadecimálnymi číslami. Pokiaľ ide o jej činnosť, tieto spôsoby sú rovnaké. Príklad 6.1 Zobrazuje, ako nastaviť farbu pozadia a textu webovej stránky.

Príklad 6.1. Farebné pozadie a text

Vzorový text

V tomto príklade je farba pozadia nastavená pomocou atribútu BGColor Tag a farba textu prostredníctvom textového atribútu. Pre odrodu je hodnota v textovom atribúte nainštalovaná ako hexadecimálne číslo a BGColor má vyhradené kľúčové slovo teal.

Pre nastavenie farieb sa čísla používajú v hexadecimálnom kóde. Hexadecimálny systém, na rozdiel od desatinného systému, je založený z jeho mena, medzi číslom 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, \\ t A, B, C, D, E, F. Obrázky od 10 do 15 sú nahradené latinskými písmenami. Čísla sú viac ako 15 v hexadecimálnom systéme sú tvorené kombináciou dvoch čísel v jednom. Napríklad číslo 255 v desatinnom systéme zodpovedá číslu FF v hexadecimálnom systéme. Aby sme nemali zamieňať zmätok v definícii číselného systému, symbol mriežky je nastavený pred hexadecimálnym, napríklad # 666999. Každá z troch farieb je červená, zelená a modrá - môže mať hodnoty od 00 až ff. Označenie farby je teda rozdelená na tri komponenty #RRGGBB, kde prvé dva znaky označujú červenú zložku farby, dve stredné - zelené a posledné dve sú modré. Je možné použiť skrátenú formu #RGB, kde by mal každý znak zdvojnásobiť. Takže, nahrávanie # fe0 by malo byť považované za # ffee00.

Podľa názvu

Internet Explorer.	Chróm.	Opera.	Safari.	Firefox.	Android	iOS.
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Prehliadače podporujú niektoré farby podľa ich mena. V Tab. 1 Zobrazuje názvy, hexadecimálny kód, hodnoty v RGB, formáte HSL a popis.

Tabuľka. 1. Názvy kvetov

názov	Farba	Kód	RGB.	Hmla	Popis
biely		#Fffffff alebo #fff.	rGB (255,255,255)	hSL (0,0%, 100%)	biely
strieborný		# C0c0c0.	rGB (192,192,192)	hSL (0,0%, 75%)	Šedý
Šedá.		#808080	rGB (128,128,128)	hSL (0,0%, 50%)	Tmavošedý
Čierna.		# 000000 alebo # 000	rGB (0,0,0)	hSL (0,0%, 0%)	Čierny
more.		#800000	rGB (128,0,0)	hSL (0,100%, 25%)	Tmavo červená
červený		# FF0000 alebo # F00	rGB (255,0,0)	hSL (0,100%, 50%)	Červený
oranžový		# FFA500.	rGB (255,165,0)	hSL (38.8.100%, 50%)	Oranžový
žltá		# Ffff00 alebo # ff0	rGB (255,255,0)	hSL (60,100%, 50%)	žltá
olivový.		#808000	rGB (128,128,0)	hSL (60,100%, 25%)	Olivový
vápno		# 00ff00 alebo # 0f0	rGB (0,255,0)	hSL (120,100%, 50%)	Svetlo zelená
zelená.		#008000	rGB (0,128,0)	hSL (120,100%, 25%)	zelená
aqua.		# 00ffff alebo # 0ff	rGB (0,255,255)	hSL (180,100%, 50%)	Modrá
modrá		# 0000FF alebo # 00F	rGB (0,0,255)	hSL (240,100%, 50%)	Modrá
námorníctva.		#000080	rGB (0,0,128)	hSL (240,100%, 25%)	Tmavomodrá
modrozelený		#008080	rGB (0,128,128)	hSL (180,100%, 25%)	Sine-zelená
fuchsia.		# FF00FF alebo # F0F	rGB (255,0,255)	hSL (300,100%, 50%)	Ružová
fialová.		#800080	rGB (128,0,128)	hSL (300,100%, 25%)	Fialová

Použitie RGB

Internet Explorer.	Chróm.	Opera.	Safari.	Firefox.	Android	iOS.
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Farba môžete určiť pomocou hodnôt červenej, zelenej a modrej zložky v desatinnom počítači. Každá z troch farebných komponentov si vyžaduje hodnotu od 0 do 255. Je tiež prípustná nastaviť farbu ako percentuálny pomer, a 100% bude zodpovedať číslu 255. Po prvé, je uvedené kľúčové slovo RGB, a potom v zátvorkách, Farebné komponenty, ako je RGB (255, 128, 128) alebo RGB (100%, 50%, 50%).

Rgba

Internet Explorer.	Chróm.	Opera.	Safari.	Firefox.	Android	iOS.
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Formát RGBA je podobný syntaxi na RGB, ale obsahuje alfa kanál, ktorý určuje priehľadnosť prvku. Hodnota 0 zodpovedá kompletnej transparentnosti, 1 - opacity a medziproduktu ako 0,5 - priesvitnosť.

RGBA bola pridaná do CSS3, takže podľa tejto verzie sa musí vykonať validácia CSS. Treba poznamenať, že štandard CSS3 je stále vo vývoji a niektoré možnosti v IT sa môžu zmeniť. Napríklad farba vo formáte RGB pridaná do nehnuteľnosti na pozadí-farebné prechádza validáciou a pozadie už bolo pridané do nehnuteľnosti. Súčasne prehliadače celkom správne pochopia farbu pre obe vlastnosti.

Hmla

Internet Explorer.	Chróm.	Opera.	Safari.	Firefox.	Android	iOS.
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

Názov formátu HSL je vytvorený z kombinácie prvých hnacích písmen (odtieňov), nasýtených a ľahších (SVETLOTA). Odtieň je farebná hodnota vo farebnom kruhu (obr. 1) a nastavená v stupňoch. 0 ° zodpovedá červenej farbe, 120 ° - zelenej a 240 ° - modrá. Hodnota tieňa sa môže pohybovať od 0 do 359.

Obr. 1. Farebný kruh

Sýtosť je intenzita farby, meria sa ako percento 0% až 100%. Hodnota 0% označuje absenciu farby a odtieňa sivej, 100% maximálna saturačná hodnota.

SVETLOTA Nastavuje, koľko je farba jasná a je označená ako percento 0% až 100%. Malé hodnoty robia farebnú tmavšiu a vysokú ľahšiu, extrémne hodnoty 0% a 100% zodpovedajú čiernej a bielej farbe.

Hsla

Internet Explorer.	Chróm.	Opera.	Safari.	Firefox.	Android	iOS.
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Formát HSLA je podobný syntaxe HSL, ale obsahuje alfa kanál, ktorý určuje priehľadnosť prvku. Hodnota 0 zodpovedá kompletnej transparentnosti, 1 - opacity a medziproduktu ako 0,5 - priesvitnosť.

Farebné hodnoty v RGBA vo formátoch RGBA, HSL a HSLA sa pridajú do CSS3, takže pri používaní týchto formátov skontrolujte kód pre platnosť s prihliadnutím na verziu.

HTML5 CSS2.1 CSS3 IE CRO OP SA FX

Varovanie

Všetky metódy rybolovu leva uvedené na stránke sú teoretické a založené na výpočtových metódach. Autori nezaručujú vašu bezpečnosť pri ich používaní a odstrániť všetku zodpovednosť za výsledok. Pamätajte, že lev je predátor a nebezpečné zviera!

Výsledok tohto príkladu je znázornený na obr. 2.

Obr. 2. Farby na webovej stránke