Oranžová barva přezdívky v MTA. Barvu ve stylech lze specifikovat různými způsoby: hexadecimální hodnotou, jménem, ​​ve formátu RGB, RGBA, HSL, HSLA

Chuťové vjemy na webu bohužel zatím nelze zobrazovat. To se ale dá plně kompenzovat pomocí barev. Koneckonců, html barvy umožňují zobrazit jakýkoli z milionů odstínů. Tak " barevné tužky V jeho sadě jich je mnohem víc než sedm.

Barevné schéma v html

V html lze barvu zadat v několika formátech:

1. Jako hexadecimální hodnota – použije se kód uvedený v hexadecimální číselné soustavě. Takové barevné kódy v html se skládají ze tří párů hexadecimálních čísel. Každý pár je zodpovědný za nasycení odstínu svou primární barvou:

• První číselný pár je zodpovědný za červenou barvu;
• Druhý pár je pro obsah zelené barvy;
• Ten druhý je pro svůj modrý obsah.

Na začátek kódu (před čísly) je umístěna značka hash. Toto je hexadecimální kód barvy. Kromě čísel od 1 do 9 tento číselný systém používá písmena latinské abecedy (A, B, C, D, E, F).

Například kód bílé barvy v html bude vypadat jako #FFFFFF:

2. Klíčové slovo – HTML aktuálně podporuje asi 147 klíčových slov. Ale ne všechna tato slova jsou jedinečná. Některé z nich odkazují na stejný barevný odstín.

Šedá barva je reprezentována dvěma klíčovými slovy: šedá a šedá . Jejich hexadecimální kód (HEX) je dán stejnou hodnotou #808080.

Příklad:

#808080

3. Ve formátu RGB - toto kódování barev v html je založeno na použití tří hodnot, nastavených v rozsahu od 0 do 255. Každá z nich určuje sytost odstínu jednou ze základních barev:

• R – červená (červená);
• G – zelená (zelená);
• B – modrá (modrá).

Číslo barvy ve formátu RGB se zapisuje v následujícím tvaru: rgb(0, 210, 100).

barva pozadí:rgb(100,186,43)

4. Ve formátu RGBA - jde o vylepšený formát RGB, kde čtvrtá hodnota určuje průhlednost barvy jako desetinný zlomek od 0 do 1.

Příklad použití:

barva pozadí:rgba(100,86,143,0,2)

barva pozadí:rgba(100,86,143,0,5)

barva pozadí:rgba(100,86,143,0,8)

barva pozadí:rgba(100,86,143,1)

HTML barevné tabulky a generátory barev

S tak širokou škálou formátů nastavení barev je snadné se splést. Proto byla vynalezena speciální tabulka barev. Poskytuje 147 klíčových názvů barevných odstínů s kódy shody ve všech hlavních barevných standardech. Každé pole je navíc vybaveno lištou pro vizuální výběr barev. Jedna z těchto tabulek je uvedena na webu colorscheme.ru:

Ale i s tímto strukturováním sladění může být výběr správného odstínu obtížný. A není pravda, že tabulka barevných kódů bude obsahovat ten, který potřebujete.

Abychom tuto překážku obešli a co nejvíce usnadnili výběr správného odstínu, byly vyvinuty interaktivní webové služby. Jejich uživatelské rozhraní se může od sebe mírně lišit.

Na webu html-color-codes.info generátor barev vypadá takto:

A v rámci služby color-picker.appsmaster.co je tento nástroj implementován trochu jinak:

Sytost každé barvy v generátoru se nastavuje pomocí speciálních posuvníků. Vizuálně je odstín zobrazen barvou rámu a obdélníku na levé straně. Ve 3 polích dole je zobrazen kód barvy v základních formátech.

Ale generátor barev je k dispozici nejen na specializovaných stránkách. Téměř všechny grafické editory jsou vybaveny podobným nástrojem. Například Photoshop:

Bezpečnostní opatření při práci s barvou

A to bylo dávno, v době grafických karet, které podporovaly pouze 256 barev. V oněch vzdálených dobách mohly operační systémy zobrazit pouze určitý počet osmibitových odstínů bez zkreslení.

Poté byla vyvinuta skvělá tabulka bezpečných barev. Stanovila 216 odstínů, které bylo možné zobrazit bez zkreslení v kterémkoli z tehdejších prohlížečů. A dodnes toto" skvělý rukopis» je stále k dispozici na některých zdrojích:

V dnešní době se vše změnilo. Zcela se tedy ruší všechna bezpečnostní pravidla při práci s barvou v html. Koneckonců, moderní počítačový hardware podporuje více než 16 milionů různých odstínů. A 216 bezpečných barev upadlo v zapomnění.

Tyto údaje plně potvrzují statistiky. Soudě podle toho, v roce 2014 mělo pouze 0,5 % uživatelů počítače, které podporují pouze 256 odstínů.

Základy barevné harmonie

Ne každý z nás je obdařen přirozeným harmonickým smyslem pro chuť. Proto může být výběr správné barvy skutečným problémem. Ale chvála vědě, dokonce se jí podařilo popsat barevnou harmonii v podobě několika schémat. Všechny jsou založeny na použití barevného kruhu. Schémata pro harmonický výběr barev v html:

• Paralelní barevné schéma - když jsou oba odstíny v barevném kole paralelní;
• Triadické schéma - všechny rohy trojúhelníku jsou založeny na jedné z barev;
• Monochromatický - když je vybráno několik blízkých odstínů stejné barvy;
• Analog je pokročilejší verze monochromatického obvodu. V tomto případě jsou odstíny stejné barvy umístěny v určité vzdálenosti.

Implementace všech těchto schémat je dobře prezentována v rámci služby paletton.com. Umožňuje vám snadno vybrat harmonickou barvu.

K určení barev se používají hexadecimální čísla. Šestnáctková soustava je na rozdíl od desítkové soustavy založena, jak její název napovídá, na čísle 16. Čísla budou následující: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 jsou nahrazena latinkou. Čísla větší než 15 v šestnáctkové soustavě se tvoří spojením dvou čísel do jednoho. Například číslo 255 v desítkové soustavě odpovídá číslu FF v šestnáctkové soustavě. Aby se předešlo zmatkům při určování číselné soustavy, před hexadecimální číslo se umístí symbol hash #, například #666999. Každá ze tří barev – červená, zelená a modrá – může nabývat hodnot od 00 do FF. Barevný symbol je tedy rozdělen na tři složky #rrggbb, kde první dva symboly označují červenou složku barvy, prostřední dva - zelenou a poslední dva - modrou. Je povoleno používat zkrácený tvar #rgb, kde by měl být každý znak zdvojen. Záznam #fe0 by tedy měl být považován za #ffee00.

Podle jména

internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Prohlížeče podporují některé barvy podle jejich názvu. V tabulce 1 zobrazuje názvy, hexadecimální kód, RGB, hodnoty HSL a popis.

Stůl 1. Názvy barev

název	Barva	Kód	RGB	HSL	Popis
bílý		#ffffff nebo #fff	rgb(255,255,255)	hsl(0,0%,100%)	Bílý
stříbrný		#c0c0c0	rgb(192,192,192)	hsl (0,0 %, 75 %)	Šedá
šedá		#808080	rgb(128,128,128)	hsl (0,0 %, 50 %)	Tmavošedý
Černá		#000000 nebo #000	rgb(0,0,0)	hsl(0,0%,0%)	Černá
kaštanové		#800000	rgb(128,0,0)	hsl (0,100 %, 25 %)	Tmavě červená
Červené		#ff0000 nebo #f00	rgb(255,0,0)	hsl(0,100%,50%)	Červené
oranžový		#ffa500	rgb(255,165,0)	hsl (38,8,100%,50%)	oranžový
žlutá		#ffff00 nebo #ff0	rgb(255,255,0)	hsl(60,100%,50%)	Žlutá
olivový		#808000	rgb(128,128,0)	hsl(60,100%,25%)	Olivový
Limetka		#00ff00 nebo #0f0	rgb(0,255,0)	hsl(120,100%,50%)	Světle zelená
zelená		#008000	rgb(0,128,0)	hsl(120,100%,25%)	Zelená
aqua		#00ffff nebo #0ff	rgb(0,255,255)	hsl(180,100%,50%)	Modrý
modrý		#0000ff nebo #00f	rgb(0,0,255)	hsl(240,100%,50%)	Modrý
námořnictvo		#000080	rgb(0,0,128)	hsl(240,100%,25%)	Tmavě modrá
modrozelená		#008080	rgb(0,128,128)	hsl(180,100%,25%)	Modrá zelená
fuchsie		#ff00ff nebo #f0f	rgb(255,0,255)	hsl(300,100%,50%)	Růžový
nachový		#800080	rgb(128,0,128)	hsl(300,100%,25%)	fialový

Použití RGB

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

Barvu můžete definovat pomocí hodnot červené, zelené a modré v desítkové soustavě. Každá ze tří barevných složek nabývá hodnoty od 0 do 255. Je také přípustné určit barvu v procentech, přičemž 100 % odpovídá číslu 255. Nejprve zadejte klíčové slovo rgb a poté určete barevné složky v závorkách , oddělené čárkami, například rgb(255, 128, 128) nebo 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 syntaxí podobný RGB, ale obsahuje alfa kanál, který určuje průhlednost prvku. Hodnota 0 je plně průhledná, 1 je neprůhledná a střední hodnota jako 0,5 je poloprůhledná.

RGBA byl přidán do CSS3, takže kód CSS musí být ověřen podle této verze. Je třeba poznamenat, že standard CSS3 je stále ve vývoji a některé funkce se mohou změnit. Například barva ve formátu RGB přidaná do vlastnosti background-color je ověřena, ale barva přidaná do vlastnosti pozadí již není platná. Prohlížeče přitom celkem správně chápou barvu pro obě 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ázev formátu HSL je odvozen od kombinace prvních písmen Hue (odstín), Saturate (sytost) a Lightness (světlost). Odstín je hodnota barvy na barevném kolečku (obr. 1) a udává se ve stupních. 0° odpovídá červené, 120° zelené a 240° modré. Hodnota odstínu se může lišit od 0 do 359.

Rýže. 1. Barevné kolečko

Sytost je intenzita barvy a měří se v procentech od 0 % do 100 %. Hodnota 0 % označuje žádnou barvu a odstín šedé, 100 % je maximální hodnota pro sytost.

Světlost určuje, jak jasná je barva, a udává se v procentech od 0 % do 100 %. Nízké hodnoty barvu ztmaví a vysoké hodnoty zesvětlí, extrémní hodnoty 0 % a 100 % odpovídají černé a bílé.

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 syntaxí podobný jako HSL, ale obsahuje alfa kanál pro určení průhlednosti prvku. Hodnota 0 je plně průhledná, 1 je neprůhledná a střední hodnota jako 0,5 je poloprůhledná.

Hodnoty barev RGBA, HSL a HSLA jsou přidány do CSS3, takže při používání těchto formátů zkontrolujte platnost verze kódu.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Varování

Všechny metody odchytu lvů uvedené na stránce jsou teoretické a založené na výpočetních metodách. Autoři neručí za vaši bezpečnost při jejich používání a zříkají se jakékoli odpovědnosti za výsledky. Pamatujte, že lev je dravec a nebezpečné zvíře!

Výsledek tohoto příkladu je znázorněn na Obr. 2.

Rýže. 2. Barvy na webové stránce

Vlad Merževič

V HTML se barva určuje jedním ze dvou způsobů: pomocí hexadecimálního kódu a názvem určitých barev. Převážně se používá metoda založená na hexadecimální číselné soustavě, protože je nejuniverzálnější.

Hexadecimální barvy

HTML používá k určení barev hexadecimální čísla. Šestnáctková soustava je na rozdíl od desítkové soustavy založena, jak její název napovídá, na čísle 16. Čísla budou následující: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 jsou nahrazena latinkou. V tabulce 6.1 ukazuje shodu mezi desetinnými a šestnáctkovými čísly.

Čísla větší než 15 v šestnáctkové soustavě se tvoří spojením dvou čísel do jednoho (tab. 6.2). Například číslo 255 v desítkové soustavě odpovídá číslu FF v šestnáctkové soustavě.

Aby se předešlo zmatkům při definování číselného systému, před hexadecimálním číslem je znak hash #, například #aa69cc. V tomto případě nezáleží na velikosti písmen, takže je přípustné psát #F0F0F0 nebo #f0f0f0.

Typická barva používaná v HTML vypadá takto.

Zde je barva pozadí webové stránky nastavena na #FA8E47. Symbol hash # před číslem znamená, že je hexadecimální. První dvě číslice (FA) definují červenou složku barvy, třetí až čtvrtá číslice (8E) definují zelenou složku a poslední dvě číslice (47) definují modrou složku. Konečným výsledkem bude tato barva.

F.A.

+

8E

+

47

=

FA8E47

Každá ze tří barev – červená, zelená a modrá – může nabývat hodnot od 00 do FF, což má za následek celkem 256 odstínů. Celkový počet barev tedy může být 256x256x256 = 16 777 216 kombinací. Barevný model založený na červené, zelené a modré složce se nazývá RGB (červená, zelená, modrá; červená, zelená, modrá). Tento model je aditivní (od add - add), ve kterém přidáním všech tří složek vzniká barva bílá.

Chcete-li usnadnit navigaci v hexadecimálních barvách, vezměte v úvahu některá pravidla.

• Pokud jsou hodnoty barevných složek stejné (například: #D6D6D6), výsledkem bude šedý odstín. Čím vyšší číslo, tím světlejší barva, s hodnotami od #000000 (černá) do #FFFFFF (bílá).
• Jasně červená barva se vytvoří, pokud je červená složka nastavena na maximum (FF) a zbývající složky jsou nastaveny na nulu. Barva s hodnotou #FF0000 je nejčervenější možný červený odstín. Totéž platí pro zelenou (#00FF00) a modrou (#0000FF).
• Žlutá (#FFFF00) se vyrábí smícháním červené a zelené. To je dobře vidět na barevném kolečku (obr. 6.1), které představuje primární barvy (červená, zelená, modrá) a doplňkové nebo doplňkové. Patří mezi ně žlutá, azurová a fialová (také nazývaná purpurová). Obecně lze jakoukoli barvu získat smícháním barev blízko ní. Azurová (#00FFFF) se tedy získá kombinací modré a zelené.

Rýže. 6.1. Barevný kruh

Barvy založené na hexadecimálních hodnotách nemusí být vybrány empiricky. K tomuto účelu je vhodný grafický editor, který umí pracovat s různými barevnými modely, například Adobe Photoshop. Na Obr. Obrázek 6.2 ukazuje okno pro výběr barvy v tomto programu, výsledná hexadecimální hodnota aktuální barvy je ohraničena čarou. Můžete jej zkopírovat a vložit do kódu.

Rýže. 6.2. Okno pro výběr barev ve Photoshopu

Webové barvy

Pokud nastavíte kvalitu podání barev monitoru na 8 bitů (256 barev), pak se stejná barva může v různých prohlížečích zobrazovat různě. Je to způsobeno způsobem zobrazení grafiky, kdy prohlížeč pracuje s vlastní paletou a nemůže zobrazit barvu, která není v jeho paletě. Barva je v tomto případě nahrazena kombinací pixelů jiných, jemu blízkých barev, které danou imitují. Aby barva zůstala stejná napříč různými prohlížeči, byla představena paleta takzvaných webových barev. Webové barvy jsou barvy, pro které je každá komponenta – červená, zelená a modrá – nastavena na jednu ze šesti hodnot – 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) 255 (FF). Hexadecimální hodnota této složky je uvedena v závorce. Celkový počet barev ze všech možných kombinací dává 6x6x6 - 216 barev. Příklad webové barvy je #33FF66.

Hlavním rysem webové barvy je, že se ve všech prohlížečích zobrazuje stejně. V tuto chvíli je relevance webových barev velmi malá díky zkvalitnění monitorů a rozšíření jejich možností.

Barvy podle názvu

Abyste si nemuseli pamatovat sadu čísel, můžete místo nich použít názvy běžně používaných barev. V tabulce 6.3 zobrazuje názvy oblíbených názvů barev.

Stůl 6.3. Názvy některých barev

Název barvy	Barva	Popis	Hexadecimální hodnota
Černá		Černá	#000000
modrý		Modrý	#0000FF
fuchsie		Světle fialová	#FF00FF
šedá		Tmavošedý	#808080
zelená		Zelená	#008000
Limetka		Světle zelená	#00FF00
kaštanové		Tmavě červená	#800000
námořnictvo		Tmavě modrá	#000080
olivový		Olivový	#808000
nachový		Tmavě fialová	#800080
Červené		Červené	#FF0000
stříbrný		Světle šedá	#C0C0C0
modrozelená		Modrá zelená	#008080
bílý		Bílý	#FFFFFF
žlutá		Žlutá	#FFFF00

Nezáleží na tom, zda barvu určíte jejím názvem nebo pomocí hexadecimálních čísel. Tyto metody jsou svým účinkem rovnocenné. Příklad 6.1 ukazuje, jak nastavit barvu pozadí a textu webové stránky.

Příklad 6.1. Barva pozadí a textu

Příklad textu

V tomto příkladu je barva pozadí nastavena pomocí atributu bgcolor značky a barvu textu prostřednictvím atributu text. Pro zpestření je atribut text nastaven na hexadecimální číslo a atribut bgcolor je nastaven na vyhrazené klíčové slovo teal .

Barevné kódy v CSS se používají k určení barev. Barevné kódy nebo hodnoty barev se obvykle používají k nastavení barvy buď pro barvu popředí prvku (např. barva textu, barva odkazu) nebo barvu pozadí prvku (barva pozadí, barva bloku). Lze je také použít ke změně barvy tlačítka, ohraničení, značky, vznášení a dalších dekorativních efektů.

Hodnoty barev můžete zadat v různých formátech. V následující tabulce jsou uvedeny všechny možné formáty:

Uvedené formáty jsou podrobněji popsány níže.

CSS barvy - Hex kódy

Hexadecimální kód barvy je šestimístná reprezentace barvy. První dvě číslice (RR) představují červenou hodnotu, další dvě představují zelenou hodnotu (GG) a poslední dvě představují modrou hodnotu (BB).

CSS barvy - krátké hexadecimální kódy

Krátký hexadecimální kód barvy je kratší forma šestiznakového zápisu. V tomto formátu se každá číslice opakuje, aby vznikla ekvivalentní šestimístná hodnota barvy. Například: #0F0 se změní na #00FF00.

Hexadecimální hodnotu lze převzít z libovolného grafického softwaru, jako je Adobe Photoshop, Core Draw atd.

Každému hexadecimálnímu barevnému kódu v CSS bude předcházet znak hash „#“. Níže jsou uvedeny příklady použití hexadecimálních zápisů.

CSS barvy – hodnoty RGB

hodnota RGB je kód barvy, který se nastavuje pomocí vlastnosti rgb(). Tato vlastnost má tři hodnoty: jednu pro červenou, zelenou a modrou. Hodnota může být celé číslo od 0 do 255 nebo procento.

Poznámka: Ne všechny prohlížeče podporují vlastnost barvy rgb(), proto se nedoporučuje ji používat.

Níže je uveden příklad ukazující více barev pomocí hodnot RGB.

Generátor barevných kódů

Pomocí naší služby můžete vytvořit miliony barevných kódů.

Bezpečné barvy pro prohlížeč

Níže je tabulka 216 barev, které jsou nejbezpečnější a nezávislé na počítači. Tyto barvy v CSS se pohybují od 000000 do FFFFFF hexadecimálního kódu. Jejich použití je bezpečné, protože zajišťují, že všechny počítače zobrazují barvy správně při práci s paletou 256 barev.

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