Farebná mriežka. Farbu v štýloch je možné nastaviť rôznymi spôsobmi: podľa hexadecimálnej hodnoty, podľa názvu, vo formáte RGB, RGBA, HSL, HSLA. Príklad: nastavenie farby podľa jej názvu

Farebný modul CSS podrobne popisuje hodnoty, ktoré umožňujú autorom špecifikovať farby a nepriehľadnosť prvkov html, ako aj hodnoty vlastnosti color.

vlastnosť farby

1. Prioritné farby: vlastnosť farieb

Vlastnosť nastavuje farbu písma pomocou rôznych vykresľovacích systémov. Vlastnosť popisuje farbu textového obsahu prvku. Používa sa tiež na poskytnutie potenciálnej nepriamej hodnoty (currentColor) pre akékoľvek iné vlastnosti, ktoré akceptujú hodnoty farieb.

Nehnuteľnosť sa dedí.

2. Hodnoty farieb

2.1. Hlavné kľúčové slová

Zoznam hlavných kľúčových slov obsahuje nasledujúce hodnoty:

V názvoch farieb sa nerozlišujú veľké a malé písmená.

Syntax

Farba: modrozelená;

2.2. Číselné hodnoty farieb

2.2.1. Farby modelu RGB

Formát hodnoty RGB v hexadecimálnej sústave je znak #, za ktorým bezprostredne nasledujú tri alebo šesť hexadecimálnych znakov. Trojmiestny zápis RGB #rgb sa prevedie do šesťmiestneho tvaru #rrggbb skopírovaním číslic, nie pridaním núl. Napríklad #fb0 sa rozšíri na #ffbb00 . To zaisťuje, že bielu #ffffff možno špecifikovať v skratke #fff a odstraňuje všetky závislosti od farebnej hĺbky displeja.

Formát hodnoty RGB vo funkčnom zápise je rgb (nasledovaný zoznamom troch číselných hodnôt oddelených čiarkou (buď troch celočíselných hodnôt alebo troch percentuálne hodnoty), za ktorým nasleduje znak) . Hodnota celého čísla 255 zodpovedá 100 % a F alebo FF v hexadecimálnom zápise:

rgb(255,255,255) = rgb(100 %, 100 %, 100 %) = #FFF

Okolo číselných hodnôt sú povolené medzery.

Na určenie farieb sa používajú hexadecimálne čísla. Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už názov napovedá, na čísle 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného. Napríklad číslo 255 v desiatkovej sústave zodpovedá číslu FF v šestnástkovej sústave. Aby sa predišlo nejasnostiam v definícii číselnej sústavy, pred hexadecimálnym číslom sa nachádza symbol hash #, napríklad #666999. Každá z troch farieb – červená, zelená a modrá – môže nadobúdať hodnoty od 00 do FF. Označenie farby je teda rozdelené do troch zložiek #rrggbb, kde prvé dva znaky označujú červenú zložku farby, dva stredné zelenú a posledné dva modrú. Je povolené používať skrátenú formu #rgb, kde by mal byť každý znak zdvojený. Záznam #fe0 by sa teda mal považovať za #ffee00.

podľa názvu

Prehliadače podporujú niektoré farby podľa názvu. V tabuľke. 1 zobrazuje názvy, hexadecimálny kód, hodnoty v RGB, formát HSL a popis.

S RGB

Farbu môžete definovať pomocou hodnôt červenej, zelenej a modrej v desatinných číslach. Každá z troch farebných zložiek nadobúda hodnotu od 0 do 255. Prijateľné je aj nastavenie farby v percentách, pričom 100 % bude zodpovedať číslu 255. Najprv sa určí kľúčové slovo rgb a potom sa zadajú farebné zložky uvedené v zátvorkách oddelené čiarkami, napríklad rgb(255 , 128, 128) alebo rgb(100 %, 50 %, 50 %).

RGBA

Formát RGBA je syntaxou podobný RGB, ale obsahuje alfa kanál, ktorý nastavuje priehľadnosť prvku. Hodnota 0 je úplne priehľadná, 1 je nepriehľadná a stredná hodnota ako 0,5 je priesvitná.

RGBA sa pridáva do CSS3, takže validácia kódu CSS by sa mala vykonávať podľa tejto verzie. Treba poznamenať, že štandard CSS3 je stále vo vývoji a niektoré jeho funkcie sa môžu zmeniť. Napríklad farba RGB pridaná do vlastnosti farba pozadia prejde validáciou, ale farba pridaná do vlastnosti pozadia nie. Prehliadače zároveň celkom správne chápu farbu pre obe vlastnosti.

HSL

Názov formátu HSL je tvorený kombináciou prvých písmen Hue (odtieň), Saturate (sýtosť) a Lightness (svetlosť). Odtieň je hodnota farby na farebnom koliesku (obr. 1) a udáva sa v stupňoch. 0° je červená, 120° je zelená a 240° je modrá. Hodnota odtieňa sa môže meniť od 0 do 359.

Ryža. 1. Farebné koliesko

Sýtosť je intenzita farby meraná v percentách od 0 % do 100 %. Hodnota 0 % znamená žiadnu farbu a odtieň sivej, 100 % maximálna hodnota nasýtenia.

Svetlosť nastavuje, aká jasná je farba, a určuje sa v percentách od 0 % do 100 %. Nízke hodnoty farbu stmavia, vysoké hodnoty zosvetlia, extrémne hodnoty 0% a 100% zodpovedajú čiernej a bielej.

HSLA

Formát HSLA je syntaxou podobný HSL, ale obsahuje alfa kanál, ktorý nastavuje priehľadnosť prvku. Hodnota 0 je úplne priehľadná, 1 je nepriehľadná a stredná hodnota ako 0,5 je priesvitná.

Hodnoty farieb vo formátoch RGBA, HSL a HSLA sa pridávajú do CSS3, takže pri používaní týchto formátov skontrolujte platnosť kódu v porovnaní s verziou.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

POZOR

Všetky spôsoby odchytu leva uvedené na stránke sú teoretické a založené na výpočtových metódach. Autori neručia za vašu bezpečnosť pri ich používaní a zriekajú sa akejkoľvek zodpovednosti za výsledok. Pamätajte, že lev je dravec a nebezpečné zviera!

Výsledok tento príklad znázornené na obr. 2.

Ryža. 2. Farby na webovej stránke

Táto stránka obsahuje tabuľku s kľúčovými slovami, ktoré možno použiť na označenie farieb v jazykoch vývoja webu, ako sú: HTML, CSS, JavaScript, Flash atď.

V starej špecifikácii WC3 sa na nastavenie farieb v HTML a CSS používalo iba 16 kľúčových slov. V neskorších modernejších špecifikáciách pribudlo ďalších 130 kľúčových slov na označenie názvov farieb. Nasledujúca tabuľka obsahuje názvy farieb, hexadecimálne a RGB kódy, ktorým zodpovedajú.

V súlade s css pravidlá názvy farieb nerozlišujú veľké a malé písmená. Položky farieb IndianRed a indianred sú ekvivalentné.

Za zmienku tiež stojí, že zo 146 kľúčových slov v tabuľke je v nej v skutočnosti menej farieb. Je to preto, lebo niektorí Kľúčové slová predstavujú rovnakú farbu. Takže názvy Grey a Grey znamenajú 50 percent sivej s kódom #808080 a slovo Magenta je synonymom HTML farby Fuchsiová, zodpovedajúca hexadecimálnemu kódu #FF00FF. Slová Aqua a Cyan sú tiež synonymá, zodpovedajú kódu #00FFFF .

Existuje niekoľko spôsobov, ako reprezentovať farby vo webovom dizajne.

HEX je hexadecimálny systém na reprezentáciu farieb so základom 16. V tomto systéme sa na doplnenie digitálneho čísla do 16 používajú arabské desatinné číslice od 0 do 9 a latinské písmená od A do F. Pre webový dizajn sa používa 16 základných (kľúčových) farieb , takzvaný hexadecimálny farebný kód #RRGGBB, kde každý pár zodpovedá za svoj podiel farby: RR - červená, GG - zelená a BB - modrá. Každá farebná frakcia sa pohybuje od 00 do FF.

Ďalšie dve farebné reprezentácie vo webdizajne sú: vo forme RGB(*,*,*), kde každá "*" časť farby je reprezentovaná desatinnými číslicami od 0 do 255 a názvami farieb v angličtine.

Pri vytváraní farebného obrazu je hlavným problémom správna reprodukcia farieb na odlišné typy počítačov, monitorov a prehliadačov. Ak prehliadač nedokáže správne vykresliť farbu, zhoduje sa alebo zmieša viacero farieb. A niekedy sa dá nahradiť nejakou úplne inou farbou.

Tabuľka 16 základných farieb, ktoré sa používajú vo všetkých prehliadačoch

Tabuľka Fialová farby a odtiene

Tabuľka sivá farby a odtiene