Nebesky modrý barevný kód. Barvu ve stylech lze zadat různými způsoby: hexadecimální hodnotou, jménem, ve formátu RGB, RGBA, HSL, HSLA
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.
| 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 % znamená žá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 ztmaví barvu a vysoké hodnoty zesvětlí barvu, 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žití 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ý odstín červené. 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á (nazývaná také 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.
| 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 .V HTML lze barvu zadat třemi způsoby:
Nastavení barvy v HTML podle jejího názvu
Některé barvy lze specifikovat svým názvem, přičemž jako hodnotu použijete název barvy v angličtině. Nejčastější klíčová slova: černá, bílá, červená, zelená, modrá atd.:
Barva textu – červená
Nejoblíbenější barvy standardu World Wide Web Consortium (W3C):
| Barva | název | Barva | název | Barva | název | Barva | název |
|---|---|---|---|---|---|---|---|
| Černá | Šedá | stříbrný | Bílý | ||||
| Žlutá | Limetka | Aqua | Fuchsie | ||||
| Červené | Zelená | Modrý | Nachový | ||||
| Maroon | Olivový | námořnictvo | Teal |
Příklad použití různých názvů barev:
Příklad: určení barvy podle jejího názvu
Záhlaví na červeném pozadí
Záhlaví na oranžovém pozadí
Okruh na pozadí vápna
Bílý text na modrém pozadí
Záhlaví na červeném pozadí
Záhlaví na oranžovém pozadí
Okruh na pozadí vápna
Bílý text na modrém pozadí
Určení barvy pomocí RGB
Při zobrazování různých barev na monitoru se jako základ používá paleta RGB. Jakákoli barva se získá smícháním tří základních: R - červená, G - zelená, B - modrá. Jas každé barvy je dán jedním bytem a může tedy nabývat hodnot od 0 do 255. Například RGB(255,0,0) se zobrazí jako červená, protože červená je nastavena na nejvyšší hodnotu (255) a zbytek jsou nastaveny na 0 Barvu můžete také nastavit v procentech. Každý parametr udává úroveň jasu odpovídající barvy. Například: hodnoty rgb(127, 255, 127) a rgb(50 %, 100 %, 50 %) nastaví stejnou středně zelenou barvu:
Příklad: Určení barvy pomocí RGB
rgb(127, 255, 127)
rgb (50 %, 100 %, 50 %)
rgb(127, 255, 127)
rgb (50 %, 100 %, 50 %)
Nastavte barvu pomocí hexadecimální hodnoty
Hodnoty R G B lze také zadat pomocí hexadecimálních (HEX) barevných hodnot ve tvaru: #RRGGBB kde RR (červená), GG (zelená) a BB (modrá) jsou hexadecimální hodnoty od 00 do FF (stejné jako desítkové 0-255 ). Šestnáctková soustava, na rozdíl od desítkové soustavy, je založena, jak její název napovídá, na čísle 16. V šestnáctkové soustavě se používají tato znaménka: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Zde jsou čísla od 10 do 15 nahrazena latinkou. Čísla větší než 15 v šestnáctkové soustavě jsou reprezentována kombinací dvou znaků do jedné hodnoty. Například nejvyšší číslo 255 v desítkové soustavě odpovídá nejvyšší hodnotě FF v šestnáctkové soustavě. Na rozdíl od desítkové soustavy je šestnáctkovému číslu předřazen symbol hash. # , například #FF0000 se zobrazí jako červená, protože červená je nastavena na nejvyšší hodnotu (FF) a zbytek barev na minimální hodnotu (00). Znaky za symbolem hash # Můžete psát jak velkými, tak malými písmeny. Hexadecimální systém umožňuje používat zkrácený tvar #rgb, kde každý znak je ekvivalentní dvojnásobku. Záznam #f7O by tedy měl být považován za #ff7700.
Příklad: HEX barva
červená: #FF0000
zelená: #00FF00
modrá: #0000FF
červená: #FF0000
zelená: #00FF00
modrá: #0000FF
červená+zelená=žlutá: #FFFF00
červená+modrá=fialová: #FF00FF
zelená+modrá=azurová: #00FFFF
Seznam běžných barev (název, HEX a RGB):
| anglické jméno | ruské jméno | Vzorek | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amarant | Amarant | #E52B50 | 229 | 43 | 80 | |
| Jantar | Jantar | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Modrá zelená | #00FFFF | 0 | 255 | 255 | |
| Blankyt | Blankyt | #007FFF | 0 | 127 | 255 | |
| Černá | Černá | #000000 | 0 | 0 | 0 | |
| Modrý | Modrý | #0000FF | 0 | 0 | 255 | |
| Modrá Bondi | Voda na pláži Bondi | #0095B6 | 0 | 149 | 182 | |
| Mosaz | Mosaz | #B5A642 | 181 | 166 | 66 | |
| Hnědý | Hnědý | #964B00 | 150 | 75 | 0 | |
| Cerulean | Blankyt | #007BA7 | 0 | 123 | 167 | |
| Tmavě jarní zelená | Tmavě jarní zelená | #177245 | 23 | 114 | 69 | |
| Smaragd | Smaragd | #50C878 | 80 | 200 | 120 | |
| Lilek | Lilek | #990066 | 153 | 0 | 102 | |
| Fuchsie | Fuchsie | #FF00FF | 255 | 0 | 255 | |
| Zlato | Zlato | #FFD700 | 250 | 215 | 0 | |
| Šedá | Šedá | #808080 | 128 | 128 | 128 | |
| Zelená | Zelená | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Nefrit | Nefrit | #00A86B | 0 | 168 | 107 | |
| Limetka | Limetka | #CCFF00 | 204 | 255 | 0 | |
| Malachit | Malachit | #0BDA51 | 11 | 218 | 81 | |
| námořnictvo | Tmavě modrá | #000080 | 0 | 0 | 128 | |
| Okr | Okr | #CC7722 | 204 | 119 | 34 | |
| Olivový | Olivový | #808000 | 128 | 128 | 0 | |
| oranžový | oranžový | #FFA500 | 255 | 165 | 0 | |
| Broskev | Broskev | #FFE5B4 | 255 | 229 | 180 | |
| Dýně | Dýně | #FF7518 | 255 | 117 | 24 | |
| Nachový | fialový | #800080 | 128 | 0 | 128 | |
| Červené | Červené | #FF0000 | 255 | 0 | 0 | |
| Šafrán | Šafrán | #F4C430 | 244 | 196 | 48 | |
| Zelené moře | Zelené moře | #2E8B57 | 46 | 139 | 87 | |
| Bažinatá zelená | Bolotný | #ACB78E | 172 | 183 | 142 | |
| Teal | Modrá zelená | #008080 | 0 | 128 | 128 | |
| Ultramarín | Ultramarín | #120A8F | 18 | 10 | 143 | |
| fialový | fialový | #8B00FF | 139 | 0 | 255 | |
| Žlutá | Žlutá | #FFFF00 | 255 | 255 | 0 | |
Barevné kódy (pozadí) podle sytosti a odstínu.
