Ružový html. HTML návod. RGB farby. Bezpečná paleta farieb

HEX/HTML

Farba v HEX formáte nie je nič iné ako hexadecimálna reprezentácia RGB.

Farby sú reprezentované ako tri skupiny hexadecimálnych číslic, kde každá skupina je zodpovedná za svoju vlastnú farbu: #112233, kde 11 je červená, 22 je zelená, 33 je modrá. Všetky hodnoty musia byť medzi 00 a FF.

Mnoho aplikácií akceptuje skrátený zápis pre hexadecimálne farby. Ak každá z troch skupín obsahuje rovnaké znaky, napríklad #112233, možno ich zapísať ako #123.

1. h1 ( farba: #ff0000; ) /* červená */
2. h2 ( farba: #00ff00; ) /* zelená */
3. h3 ( farba: #0000ff; ) /* modrá */
4. h4 ( farba: #00f; ) /* rovnaká modrá, skratka */

RGB

Farebný priestor RGB (červená, zelená, modrá) pozostáva zo všetkých možných farieb, ktoré možno získať zmiešaním červenej, zelenej a modrej. Tento model je populárny vo fotografii, televízii a počítačovej grafike.

Hodnoty RGB sú špecifikované ako celé číslo od 0 do 255. Napríklad rgb(0,0,255) sa zobrazí ako modré, pretože modrý parameter je nastavený na najvyššiu hodnotu (255) a zvyšok je nastavený na 0.

Niektoré aplikácie (najmä webové prehliadače) podporujú percentá RGB (od 0 % do 100 %).

1. h1 ( farba: rgb(255, 0, 0); ) /* červená */
2. h2 ( farba: rgb(0, 255, 0); ) /* zelená */
3. h3 ( farba: rgb(0, 0, 255); ) /* modrá */
4. h4 ( farba: rgb(0%, 0%, 100%); ) /* rovnaká modrá, percentuálny zápis */

Hodnoty farieb RGB sú podporované vo všetkých hlavných prehliadačoch.

RGBA

V poslednej dobe sa moderné prehliadače naučili pracovať s farebným modelom RGBA, čo je rozšírenie RGB s podporou alfa kanála, ktorý určuje nepriehľadnosť objektu.

Hodnota farby RGBA je špecifikovaná ako: rgba (červená, zelená, modrá, alfa). Parameter alfa je číslo medzi 0,0 (úplne priehľadné) a 1,0 (úplne nepriehľadné).

1. h1 ( farba: rgb(0, 0, 255); ) /* modrá v bežnom RGB */
2. h2 ( farba: rgba(0, 0, 255, 1); ) /* rovnaká modrá v RGBA, pretože nepriehľadnosť: 100 % */
3. h3 ( farba: rgba(0, 0, 255, 0,5); ) /* nepriehľadnosť: 50 % */
4. h4 ( farba: rgba(0, 0, 255, 0,155); ) /* nepriehľadnosť: 15,5 % */
5. h5 ( farba: rgba(0, 0, 255, 0); ) /* úplne transparentné */

RGBA je podporovaný v IE9+, Firefox 3+, Chrome, Safari a Opera 10+.

HSL

Farebný model HSL je znázornením modelu RGB vo valcovom súradnicovom systéme. HSL predstavuje farby spôsobom, ktorý je intuitívnejší a zrozumiteľnejší ako typický RGB. Model sa často používa v grafických aplikáciách, vo farebných paletách a na analýzu obrazu.

HSL znamená Hue (farba / odtieň), Saturation (sýtosť), Lightness / Luminance (svetlosť / svetlosť / svietivosť, nezamieňať s jasom).

Odtieň nastavuje polohu farby na farebnom koliesku (od 0 do 360). Sýtosť je percentuálna hodnota nasýtenia (od 0 % do 100 %). Svetlosť je percento ľahkosti (od 0 % do 100 %).

1. h1 ( farba: hsl(120, 100 %, 50 %); ) /* zelená */
2. h2 ( farba: hsl(120, 100%, 75%); ) /* svetlozelená */
3. h3 ( farba: hsl(120, 100%, 25%); ) /* tmavozelená */
4. h4 ( farba: hsl(120, 60%, 70%); ) /* pastelovo zelená */

HSL je podporované v prehliadačoch IE9+, Firefox, Chrome, Safari a Opera 10+.

HSLA

Podobne ako RGB/RGBA má HSL režim HSLA s podporou alfa kanála na určenie nepriehľadnosti objektu.

Hodnota farby HSLA je špecifikovaná ako: hsla (odtieň, sýtosť, svetlosť, alfa). Parameter alfa je číslo medzi 0,0 (úplne priehľadné) a 1,0 (úplne nepriehľadné).

1. h1 ( farba: hsl(120, 100 %, 50 %); ) /* zelená v bežnom HSL */
2. h2 ( farba: hsla(120, 100 %, 50 %, 1); ) /* rovnaká zelená v HSLA, pretože nepriehľadnosť: 100 % */
3. h3 ( farba: hsla(120, 100 %, 50 %, 0,5); ) /* nepriehľadnosť: 50 % */
4. h4 ( farba: hsla(120, 100 %, 50 %, 0,155); ) /* nepriehľadnosť: 15,5 % */
5. h5 ( farba: hsla(120, 100 %, 50 %, 0); ) /* úplne priehľadné */

CMYK

Farebný model CMYK sa často spája s farebnou tlačou, s tlačou. CMYK (na rozdiel od RGB) je subtraktívny model, čo znamená, že vyššie hodnoty sú spojené s tmavšími farbami.

Farby sú určené pomerom azúrovej (Cyan), purpurovej (Magenta), žltej (Yellow), s prídavkom čiernej (Key / blackK).

Každé z čísel, ktoré definujú farbu v CMYK, predstavuje percento atramentu danej farby, ktoré tvorí farebnú kombináciu, resp. veľkosť rastrového bodu zobrazeného na fotosadzbe na filme tejto farby (alebo priamo na tlačová forma v prípade CTP).

Napríklad, aby ste získali farbu „PANTONE 7526“, zmiešali by ste 9 častí azúrovej, 83 častí purpurovej, 100 žltej a 46 čiernej. Dá sa to označiť takto: (9,83,100,46). Niekedy používajú takéto označenia: C9M83Y100K46 alebo (9%, 83%, 100%, 46%) alebo (0,09 / 0,83 / 1,0 / 0,46).

HSB/HSV

HSB (tiež známy ako HSV) je podobný HSL, ale ide o dva rôzne farebné modely. Obidve sú založené na valcovej geometrii, ale HSB/HSV je založený na modeli „hexcone“, zatiaľ čo HSL je založený na modeli „bi-hexone“. Umelci často uprednostňujú používanie tohto modelu, všeobecne sa uznáva, že zariadenie HSB / HSV je bližšie k prirodzenému vnímaniu farieb. V programe Adobe Photoshop sa používa najmä farebný model HSB.

HSB / HSV znamená Hue (farba / odtieň), Saturation (sýtosť), Brightness / Value (jas / hodnota).

Odtieň nastavuje polohu farby na farebnom koliesku (od 0 do 360). Sýtosť je percentuálna hodnota nasýtenia (od 0 % do 100 %). Jas je percento jasu (od 0 % do 100 %).

XYZ

Farebný model XYZ (CIE 1931 XYZ) je čisto matematický priestor. Na rozdiel od modelov RGB, CMYK a iných modelov sú v XYZ primárne komponenty „imaginárne“, čo znamená, že X, Y a Z nemôžete mapovať do žiadnej množiny farieb. XYZ je hlavný model pre takmer všetky ostatné farebné modely používané v technických oblastiach.

LAB

Farebný model LAB (CIELAB, "CIE 1976 L*a*b*") je vypočítaný z priestoru CIE XYZ. Cieľom laboratória bolo vytvoriť farebný priestor, v ktorom by zmena farby bola lineárnejšia z hľadiska ľudského vnímania (v porovnaní s XYZ), to znamená, že by viedla k rovnakej zmene hodnôt farebných súradníc v rôznych oblastiach farebného priestoru. rovnaký pocit zmeny farby.

>> Správa farieb

Hexadecimálne hodnoty farieb RGB

Metódy opisu a spracovania farieb sa navzájom líšia v tom, na aké konečné zobrazenie sú určené. Porovnajme napríklad zobrazenia farieb pre polygrafiu a pre počítačové monitory. V prvom prípade je základ biely farba papiera, na ktorý sa následne nanesú tri základné farby: Modrá, Fialová A žltá. Miešaním medzi sebou a s bielou farbou papiera v rôznych pomeroch, tieto tri základné farby dávajú rôzne farebné odtiene, okrem čistej čiernej, alebo pri úplnej absencii farieb dávajú bielemu papieru. Ak k nim pridáme čiernu, dostaneme CMYK- spôsob prenosu farby, keď sa požadovaná farba získa odčítaním chýbajúcich farieb od bielej.

V druhom prípade je základ čierny farba obrazovky monitora, ktorej každá bunka svieti jednou z troch farieb: červená- červená, zelená- zelené a Modrá-Modrá. Potom pri úplnej absencii akéhokoľvek lesku dostaneme čisto čiernu farbu obrazovky a ktorákoľvek z požadovaných farieb je daná pomerom každej z troch farieb. V tomto prípade dostaneme RGB- Metóda prenosu farieb. Primárne farby môžu mať význam od 0 predtým 255 , alebo z 0% predtým 100% , alebo môže byť vyjadrená ako hexadecimálna hodnota. Na obrázku nižšie môžete vidieť výsledky miešania základných farieb.

Hexadecimálna číselná sústava, na rozdiel od desiatkovej číselnej sústavy, nemá vo svojom číselnom rade desať číslic, ale šestnásť - odtiaľ názov. V súlade s tým môžu byť neopakujúce sa varianty kombinácií dvoch číslic iba - 256 , ak chcete pokračovať v rade číslic po 9 listy od A predtým F, takže riadok bude vyzerať takto -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Ak chcete previesť čísla z jedného číselného systému do druhého a naopak, použite nižšie uvedenú kalkulačku. Maximálna hodnota tu môže byť FF - 255 .

V tomto prípade je farba daná tromi hexadecimálnymi číslami, z ktorých každé pozostáva z dvoch číslic. Prvé číslo určuje intenzitu červená farby, priemer zelená, posledná vec- Modrá farby. Všetky čísla môžu nadobúdať hodnoty v rozmedzí od 00 predtým FF(od 0 do 255). Napríklad: zelená farba je uvedená ako #00FF00, červená - ako #FF0000, modrá - ako #0000FF, biela - ako #FFFFFF, úplná absencia farby alebo čiernej je daná ako #000000 .

Vo formulári nižšie môžete nastaviť ľubovoľné hexadecimálne hodnoty pre každú z troch farieb a kliknutím do výstupného poľa zobraziť výsledok ich zmiešania.

ČERVENÁ		ZELENÁ		Modrá
	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f
...kliknite tu

Príklady niektorých hexadecimálnych hodnôt farieb RGB: červená, modrá a zelená gradácia.

vyhliadka	kód	vyhliadka	kód	vyhliadka	kód	vyhliadka	kód	vyhliadka	kód	vyhliadka	kód
	#010000		#800000		#000100		#008000		#000001		#000080
	#100000		#900000		#001000		#009000		#000010		#000090
	#200000		#A00000		#002000		#00A000		#000020		#0000A0
	#300000		#B00000		#003000		#00B000		#000030		#0000B0
	#400000		#C00000		#004000		#00C000		#000040		#0000C0
	#500000		#D00000		#005000		#00D000		#000050		#0000D0
	#600000		#E00000		#006000		#00E000		#000060		#0000E0
	#700000		#FF0000		#007000		#00FF00		#000070		#0000FF

Určenie farby pomocou reťazcových literálov

Na uľahčenie používania boli niektoré farby a ich kombinácie pomenované, ktoré rozpoznávajú všetky prehliadače a mnohé z nich bolo možné nastaviť podľa názvu. V tabuľke nižšie sú uvedené niektoré názvy farieb:

vyhliadka	názov	vyhliadka	názov	vyhliadka	názov	vyhliadka	názov
	biely		Červená		Oranžová		žltá
	zelená		Modrá		Fialová		čierna
	Alice modrá		starožitná biela		Aqua		akvamarín
	Azure		Béžová		Bisque		blanchedalmond
	Modrofialová		Hnedá		Burlywood		Kadet modrá
	chartreuse		Čokoláda		Coral		Nevädza modrá
	Cornsilk		Crimson		tyrkysový		tmavomodrá
	Darkcyan		darkgoldenrod		tmavo-sivá		tmavozelený
	Darkkhaki		Darkmagenta		Darkolivegreen		tmavooranžová
	Darkorchid		tmavo červená		tmavý losos		Tmavomorská zelená
	tmavoslate modrá		tmavoslate šedá		tmavotyrkysová		Tmavofialová
	Deeppink		hlboká nebeská modrá		Dimgray		dodger blue
	Ohnivá tehla		Kvetinovo biele		lesná zeleň		Fuschia
	Gainsboro		duch biely		Zlato		zlatobyľ
	Šedá		Zelenožltá		Medová Rosa		hotpink
	Indická červená		Indigo		Slonovina		kaki
	Levanduľa		Levanduľová ruža		Lemonchiffon		svetlo modrá
	svetlý koral		svetlocyan		svetlostudenárodožltá		svetlo zelená
	svetlo sivá		Svetlo ružová		svetlý losos		Svetlomorská zelená
	svetloskymodrá		Svetlá bridlicová šedá		svetlo oceľovo modrá		svetlo žltá
	vápno		Limetková zelená		bielizeň		purpurová
	gaštanové		stredný akvamarín		stredne modrá		Stredná orchidea
	Stredne fialová		Strednezelená		Stredne bridlicovomodrá		Stredne jarná zelená
	stredne tyrkysová		stredne fialová červená		polnočná modrá		mätový krém
	mistyrose		Navajobiela		námorníctvo		oldlace
	Olivový		Olivedrab		oranžová červená		Orchidea
	palegoldenrod		Svetlo zelená		paleturquoise		palefialová
	papayawhip		Peachpuff		Peru		Ružová
	Slivka		Prášková modrá		Rosybrown		kráľovská modrá
	sedlovo hnedá		seagreen		Mušle		Sienna
	Strieborná		modrá obloha		Slateblue		Slategray
	Sneh		Springgreen		oceľovo modrá		Tan
	Modrozelený		Bodliak		Paradajka		tyrkysová
	fialový		Pšenica		Whitesmoke		žltá zelená

Zoznam malých literálov s názvami farieb je pomerne rozsiahly a viac než dostatočný. Ak chcete nastaviť farbu pozadia tak nezvyčajnú, že nemá ani názov, môžete použiť hexadecimálnu hodnotu.

Používanie bezpečného výberu farieb

Bohužiaľ, na rôznych platformách s rôznymi systémovými nastaveniami je správna reprodukcia farieb problém. Ide o to, že prehliadač sa vždy snaží prispôsobiť farebnú paletu dokumentu systémovým nastaveniam a možnostiam monitora, a to zmiešaním a nahradením farieb. V dôsledku toho používateľ niekedy nevidí úplne to, čo mu správca webu chcel ukázať. Východisko z tejto situácie sa našlo v použití palety, ktorej každú farbu zaručene vykreslia rovnako všetky prehliadače na rôznych platformách. Tento tzv zaručené paleta, známa aj ako bezpečné paleta. Táto paleta obsahuje farby, ktorých farebné zložky nadobúdajú nasledujúce hodnoty: 00 ,33 ,66 ,99 , CC,FF, vo všetkých možných 216 ich kombinácie.

FFFFFF CCCCCC 999999 666666 333333 000000 CCCC66 CCCC33 999966 999933 999900 666600 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300 99FF00 99FF33 99CC66 99 CC00 99CC33 669900 CCFF99 99FF99 66CC00 66CC33 669933 336600 66FF00 66FF33 33FF00 33 CC00 339900 009900 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33 CCFFCC 99CC99 66CC66 669966 336633 003300 99FF99 66FF66 33FF66 00FF66 339933 006600 66FF99 33FF99 00FF99 33CC66 00CC66 009933 66CC99 33CC99 00CC99 339966 009966 006633 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 99CCCC 66CCCC 339999 669999 006666 336666 66CCFF 33CCFF 00CCFF 3399 CC 0099CC 003333 99CCFF 3399FF 0099FF 6699 CC 336699 006699 0066FF 3366 CC 0066CC 0033FF 003399 003366 6699FF 3366FF 0000 FF 0000 CC 0033CC 000033 3333FF 3300 FF 3300 CC 3333 CC 000099 000066 9999 CC 6666FF 6666 CC 666699 333399 333366 CCCCFF 9999FF 6666FF 6600 FF 330099 330066 9966 CC 9966FF 6600 CC 6633 CC 663399 330033 CC99FF CC66FF 9933FF 9900 FF 660099 663366 CC66FF CC33FF CC00FF 9900 CC 996699 660066 CC99CC CC66CC CC33CC CC00CC 990099 993399 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399 FF66CC FF00CC FF33CC CC6699 CC0099 990066 FF99CC FF3399 FF0099 CC0066 993366 660033 FF6699 FF3399 FF0066 CC3366 996666 663333 CC9999 CC6666 CC3333 CC0000 990033 330000 FFCCCC FF9999 FF6666 FF3333 FF0000 CC0033 FF6633 CC3300 FF3300 FF0000 CC0000 990000 FFCC99 FFCC66 FF6600 CC6633 993300 660000 FF9900 FF9933 CC9966 CC6600 996633 663300 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00

vyhliadka	kód	vyhliadka	kód	vyhliadka	kód	vyhliadka	kód	vyhliadka	kód	vyhliadka	kód

Na špecifikáciu 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 je 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

internet Explorer	Chrome	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 názvu. V tabuľke. 1 zobrazuje názvy, hexadecimálny kód, hodnoty v RGB, formát HSL a popis.

Tab. 1. Názvy farieb

názov	Farba	Kód	RGB	HSL	Popis
biely		#ffff alebo #fff	rgb(255,255,255)	hsl (0,0 %, 100 %)	biely
striebro		#c0c0c0	rgb(192,192,192)	hsl (0,0 %, 75 %)	Šedá
sivá		#808080	rgb(128,128,128)	hsl (0,0 %, 50 %)	Tmavošedý
čierna		#000000 alebo #000	rgb(0,0,0)	hsl(0,0%,0%)	Čierny
gaštanové		#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íctvo		#000080	rgb(0,0,128)	hsl (240,100%,25%)	Tmavomodrá
modrozelený		#008080	rgb(0,128,128)	hsl (180,100%,25%)	modro zelená
fuchsiová		#ff00ff alebo #f0f	rgb(255,0,255)	hsl(300,100%,50%)	Ružová
Fialová		#800080	rgb(128,0,128)	hsl(300,100%,25%)	Fialová

S RGB

internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

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

internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

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

internet Explorer	Chrome	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 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 % označuje žiadnu farbu a odtieň sivej, 100 % je maximálna hodnota sýtosti.

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

internet Explorer	Chrome	Opera	safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

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

Varovanie

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 tohto príkladu je znázornený na obr. 2.

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

Vlad Merževič

V HTML je farba určená jedným z dvoch spôsobov: pomocou hexadecimálneho kódu a názvom niektorých farieb. Najčastejšie sa používa metóda založená na šestnástkovej sústave, ako najuniverzálnejšia.

Hexadecimálne farby

HTML používa na špecifikáciu farieb 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. V tabuľke. 6.1 ukazuje zhodu medzi desatinnými a hexadecimálnymi číslami.

Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného (tabuľka 6.2). Napríklad číslo 255 v desiatkovej sústave zodpovedá číslu FF v šestnástkovej sústave.

Aby sa predišlo nejasnostiam v definícii číselného systému, pred šestnástkovým číslom je znak libry #, napríklad #aa69cc. V tomto prípade nezáleží na veľkosti písmen, preto je dovolené písať #F0F0F0 alebo #f0f0f0.

Typická farba používaná v HTML je nasledovná.

Tu je farba pozadia webovej stránky nastavená na #FA8E47. Znak libry # pred číslom znamená, že je v šestnástkovej sústave. Prvé dve číslice (FA) definujú červenú zložku farby, tretia až štvrtá číslica (8E) zelenú zložku a posledné dve číslice (47) modrú zložku. Konečným výsledkom je táto farba.

FA

+

8E

+

47

=

FA8E47

Každá z troch farieb – červená, zelená a modrá – môže nadobudnúť hodnoty od 00 do FF, čo nakoniec tvorí 256 odtieňov. Celkový počet farieb teda môže byť 256x256x256 = 16 777 216 kombinácií. Farebný model založený na červenej, zelenej a modrej zložke sa nazýva RGB (červená, zelená, modrá; červená, zelená, modrá). Tento model je aditívny (od add - add), v ktorom pridaním všetkých troch komponentov vzniká biela.

Aby ste uľahčili navigáciu v hexadecimálnych farbách, vezmite do úvahy niektoré pravidlá.

• Ak sú hodnoty farebných komponentov rovnaké (napríklad: #D6D6D6), získa sa šedý odtieň. Čím vyššie číslo, tým svetlejšia farba a hodnoty sa menia z #000000 (čierna) na #FFFFFF (biela).
• Jasne červená farba sa vytvorí, ak je červená zložka nastavená na maximum (FF) a ostatné zložky sú nastavené na nulu. Farba s hodnotou #FF0000 je najčervenší možný červený odtieň. To isté platí pre zelenú (#00FF00) a modrú (#0000FF).
• Žltá (#FFFF00) sa získa zmiešaním červenej so zelenou. To je jasne vidieť na farebnom koliesku (obr. 6.1), ktoré predstavuje primárne farby (červená, zelená, modrá) a doplnkové alebo doplnkové. Patrí medzi ne žltá, azúrová a fialová (nazývaná aj purpurová). Vo všeobecnosti možno akúkoľvek farbu získať zmiešaním farieb susediacich s ňou. Takže azúrová (#00FFFF) sa získa spojením modrej a zelenej.

Ryža. 6.1. Farebný kruh

Farby založené na hexadecimálnych hodnotách nemusia byť vybrané empiricky. Na tento účel je vhodný grafický editor, ktorý dokáže pracovať s rôznymi farebnými modelmi, napríklad Adobe Photoshop. Na obr. 6.2 je zobrazené okno pre výber farby v tomto programe, čiara zakrúžkuje výslednú hexadecimálnu hodnotu aktuálnej farby. Môžete ho skopírovať a vložiť do kódu.

Ryža. 6.2. Výber farieb vo Photoshope

Webové farby

Ak nastavíte kvalitu farieb monitora na 8 bitov (256 farieb), rovnaká farba sa môže v rôznych prehliadačoch zobrazovať odlišne. Súvisí to so spôsobom vykresľovania grafiky, keď prehliadač pracuje s vlastnou paletou a nemôže zobraziť farbu, ktorú v palete nemá. V tomto prípade je farba nahradená kombináciou pixelov iných, jemu blízkych farieb, ktoré napodobňujú danú. Aby farba zostala rovnaká v rôznych prehliadačoch, bola predstavená paleta takzvaných webových farieb. Webové farby sú tie farby, ktorých pre každú zložku - červená, zelená a modrá - je nastavená jedna zo šiestich hodnôt - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Šestnástková hodnota tohto komponentu je uvedená v zátvorkách. Celkový počet farieb zo všetkých možných kombinácií dáva 6x6x6 - 216 farieb. Príklad webovej farby je #33FF66.

Hlavnou črtou webovej farby je, že sa vo všetkých prehliadačoch zobrazuje rovnako. V súčasnosti je relevancia webových farieb veľmi malá vzhľadom na zlepšenie kvality monitorov a rozšírenie ich možností.

Farby podľa názvu

Aby ste si nepamätali zbierku čísel, môžete namiesto toho použiť názvy bežne používaných farieb. V tabuľke. 6.3 zobrazuje názvy populárnych názvov farieb.

Tab. 6.3. Názvy niektorých farieb

Názov farby	Farba	Popis	Hexadecimálna hodnota
čierna		Čierny	#000000
Modrá		Modrá	#0000FF
fuchsiová		Svetlo fialová	#FF00FF
sivá		Tmavošedý	#808080
zelená		zelená	#008000
vápno		svetlo zelená	#00FF00
gaštanové		Tmavo červená	#800000
námorníctvo		Tmavomodrá	#000080
olivový		Olivový	#808000
Fialová		Tmavofialová	#800080
červená		Červená	#FF0000
striebro		svetlo sivá	#C0C0C0
modrozelený		modro zelená	#008080
biely		biely	#FFFFFF
žltá		žltá	#FFFF00

Nezáleží na tom, ako určíte farbu - podľa názvu alebo pomocou hexadecimálnych čísel. Vo svojom účinku sú tieto metódy rovnocenné. Príklad 6-1 ukazuje, ako nastaviť farby pozadia a textu webovej stránky.

Príklad 6.1. Farba pozadia a textu

Ukážkový text

V tomto príklade je farba pozadia nastavená pomocou atribútu bgcolor značky a farbu textu prostredníctvom atribútu text. Pre spestrenie je hodnota atribútu text nastavená na hexadecimálne číslo a bgcolor je nastavené na vyhradené kľúčové slovo modrozelená .

Pozrite sa pozorne na výkres. Pozadie rozbaľovacieho poľa je priehľadné. Toto je pomerne bežná dizajnová technika. Zamyslime sa nad tým, ako sa to dá zrealizovať.

Úloha

Urobte z prehliadača priesvitnú farbu.

Riešenie

Prvá myšlienka v tejto situácii je použiť na pozadie obrázok png24 s už nastavenou priesvitnosťou. Ale tento obrázok je úplne zbytočný. V pohode sa zaobídete aj bez toho (a teda bez ďalšej požiadavky na server). Skúsme nájsť to najlepšie riešenie.

Druhá myšlienka je použiť . Ale v tomto prípade to nie je príliš pohodlné. Koniec koncov, nielen pozadie, ale aj nápisy sa stanú priesvitnými. Áno, vlastne všetky okná naraz.

Samozrejme, môžete skúsiť pridať ďalší kontajner a aplikovať nepriehľadnosť len naň, ale tento HTML prvok bude len na okrasu a bude zrejme nadbytočný. Dá sa bez toho zaobísť?

Samozrejme! Ak používate RGBA.

Formát popisu farieb RGBA

CSS3 umožňuje špecifikovať farbu pomocou funkcií RGB a RGBA. Zároveň musíme uviesť podiel každej farebnej zložky, pod ktorou je pridelený jeden bajt (od 0 do 255, zrazu niekto nevie).

Syntax pre tento prípad je veľmi jednoduchá:

pozadie: rgb(0, 255, 0); /* čisto zelená farba */

Pre RGBA sa pridáva štvrtý parameter – priehľadnosť alfa (od 0 do 1).

Pozadie: rgba(255, 0, 0, 0,5); /* čisto červená s 50% krytím */

Tu je riešenie nášho problému. Stačí nastaviť farbu pozadia pomocou rgba a všetko bude vyzerať tak, ako potrebujeme. Žiadne ďalšie obrázky a prvky!

Kde môžem získať tieto čísla?

Môžete sa pozrieť na základné farby pomocou nástroja kvapkadlo vo Photoshope.

O kompatibilite medzi prehliadačmi

Keďže funkcia RGB je oveľa staršia ako RGBA a existuje už od čias štandardu CSS2, na ochranu pred najstaršími prehliadačmi môžete použiť nasledujúcu duplicitnú konštrukciu:

SomeBlock ( pozadie: rgb(255, 0, 0); pozadie: rgba(255, 0, 0, 0,5); )

S týmto prístupom nebudú mať pradedovia moderných prehliadačov priesvitnosť, ale samotná farba zostane správna.

Samostatne sa budete musieť starať o IE. Somárikovia do 8. verzie vrátane nerozumejú RGBA.

Ako vždy: pôda - roľníkom, továrne - robotníkom a osly - barla! Ako .

Samozrejme, v bojových podmienkach toto pravidlo odoberáme v samostatnom CSS, ku ktorému patrí .

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Trik je v tom určiť rovnakú počiatočnú a koncovú farbu (ff0000 - červená) a využiť skutočnosť, že v tomto filtri môžete nastaviť alfa kanál pre gradient (v príklade je to hodnota 80).

Pre informáciu: filter používa hexadecimálny systém a kód FF zodpovedá úplne nepriehľadnej farbe (v desiatkovej sústave je to 255). V súlade s tým je šestnástkové číslo 80 desatinné číslo 128, t. j. 50 % priehľadnosť.

Overené v:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Chrome