Názvy barev v html. Barvu ve stylech lze zadat různými způsoby: hexadecimální hodnotou, jménem, ve formátu RGB, RGBA, HSL, HSLA
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 nejvíce 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 |
Minecraft kódy květiny, nebo Minecraft kódy formátování, umožní každému hráči přidávat květiny a formátovat text všemi možnými způsoby přímo v Minecraftu. Barevné kódy od &0-9 - do &a-f. Přidejte je před text. Zprávy od hráčů mohou obsahovat barevné kódy, které vám umožní přidat barvu do vašich vět.
Barvy a formátovací kódy
Znak ampersand (&) následovaný hexadecimálním číslem ve zprávách signalizuje klientovi, aby při zobrazování textu přepínal barvy. Text lze navíc formátovat pomocí znaku & následovaného písmenem. Můžete přidat různé barvy do knih, příkazových bloků, názvu serveru, popisu serveru (motd), světových jmen, značek a dokonce i jmen hráčů.
Je velmi snadné formátovat text v konfiguracích nebo ve hře pomocí barevné tabulky níže. &r slouží k resetování všech kódů, tzn. &mAAA&rBBB se zobrazí jako AAA BBB.
Pro vaše pohodlí uvádíme tabulku stávajících barevných kódů v Minecraftu:
Kód | Jméno | Technický název | Barva symbolu | Barva stínu symbolu | ||||||
---|---|---|---|---|---|---|---|---|---|---|
R | G | B | Hex | R | G | B | Hex | |||
&0 | Černý | černý | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
&1 | Tmavě modrá | tmavě_modrá | 0 | 0 | 170 | 0000 AA | 0 | 0 | 42 | 00002A |
&2 | Tmavě zelená | tmavě_zelená | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
&3 | Tmavě modro-zelená | dark_aqua | 0 | 170 | 170 | 00AAA | 0 | 42 | 42 | 002A2A |
&4 | Tmavě červená | tmavě_červená | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
&5 | Tmavě fialová | tmavě_fialová | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
&6 | Zlato | zlato | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
&7 | Šedá | šedá | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
&8 | Tmavě šedá | tmavě_šedá | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
&9 | Modrý | modrý | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
&A | Zelený | zelený | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
&b | Modro-zelená | aqua | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
&C | Červený | červený | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
&d | Světle fialová | světle_fialová | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
&E | Žluť | žluť | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
&F | Bílý | bílý | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
Někdy je to nutné podtrhnout, přeškrtnout, zvýraznění jakýkoli text. To se provádí pomocí formátování textu. Používá se přesně stejným způsobem jako barvy (uvádíme před text kód, například &lMinecraft = Minecraft.
Pro vaše pohodlí uvádíme níže tabulku formátovacích kódů:
Kód | Jméno |
---|---|
&k | Magický text |
&l | Tučný text |
&m | Přeškrtnutý text |
&n | Podtržený text |
&Ó | Text kurzívou |
&r | Text bez formátování |
CSS není pochopeno). Budoucí webmaster proto prostě potřebuje studovat HTML nástroje, které vám umožní změnit barvu, například za účelem vytváření jasných a barevných e-mailových zpravodajů, které přitáhnou pozornost cílového publika webu.
Tento příspěvek je poměrně dlouhý, ale dozvíte se z něj o všech technických vlastnostech práce s barvami pomocí HTML. Nahrávání začneme pochopením otázky: proč potřebujeme zvýraznit určité prvky HTML stránky barvou? Poté si povíme o modelu RGB, který umožňuje nastavit barvy v HTML pomocí speciálních kódů (postupem se podíváme na desetinné barevné kódy a hexadecimální hodnoty barev HTML). Také z tohoto příspěvku se dozvíte o paletě barev a také pochopíte, proč v HTML není žádná paleta. A na konci této publikace bude příklady změny barvy pozadí, textu a odkazů.
Použití barev v HTML
Webové stránky by byly bez obrázků nudné a nezajímavé, jak jsme o tom mluvili dříve a velmi podrobně. Obrázky však mají jednu významnou nevýhodu: každý obrázek je dodatečný, a tedy další zatížení hostingu.
Chtěl bych poznamenat, že jsem k návrhu svého blogu WordPress nepoužil jediný obrázek; Stejně Dnes budeme mluvit o barvách v HTML. Barvy v HTML se používají pro různé účely, například můžeme navrhnout rozvržení webových stránek zvýrazněním určitých položek tou či onou barvou.
Pomocí barev můžeme zaměřit pozornost našich návštěvníků na konkrétní text nebo blok webu. Všimněte si, že je také určena pomocí barvy takovým způsobem, aby uživatel pochopil: na který odkaz již klikl, který odkaz ještě nenavštívil a na které HTML stránce se právě nachází.
Buďte opatrní použití barev k návrhu HTML dokumentů, ne všechny barvy se k sobě hodí a ne každá barva bude návštěvníkům vašeho webu příjemná. Na tyto jemnosti se však raději zeptejte webových designérů. Tento článek vám pomůže porozumět technickým funkcím, které vám umožňují ovládat barvu prvků HTML stránky.
Neměli byste ale zapomínat na to, že design by měl být oddělený od obsahu, takže pro manipulaci s barvami na HTML stránkách je lepší použít CSS, ale o tom si povíme v jiném příspěvku. Teď uvidíme Jaké nástroje má HTML pro ovládání barev na stránkách webu?.
V IT průmyslu existuje mnoho barevných modelů pro manipulaci s barvami. Nejpoužívanějším modelem reprezentace barev je model RGB. O některých funkcích tohoto modelu si povíme zde a pro podrobnější představení RGB bude k dispozici samostatná publikace. Níže naleznete seznam barevných modelů používaných v IT (nejen HTML a CSS):
- RGB model. Tento model se velmi rozšířil a je možná jedním z nejpohodlnějších a nejběžnějších způsobů manipulace s barvou prvků HTML.
- Model RGBA. Tento model je velmi podobný modelu RGB, ale obsahuje alfa kanál pro barvu. Zvláštností modelu RGBA je, že umožňuje nastavení nejen barvu HTML elementu, ale i jeho průhlednost kvůli přítomnosti alfa kanálu. Model RGBA byl přidán do CSS3 a starší prohlížeče jej nepodporují.
- Model HSL. Zvláštností modelu HSL je, že barvu nastavujeme pomocí jejích parametrů: odstín, intenzita a světlost. Tento model je poněkud obtížnější pochopit než model RGB.
- Model HSLA. Tento model je velmi podobný modelu HSL, ale stejně jako model RGBA umožňuje pracovat s barevným kanálem alfa, takže pomocí HSLA můžeme nastavit nejen barvu HTML elementu na stránce, ale i jeho průhlednost .
- Model HSV (HSB). Tento model by neměl být zaměňován s modelem HSL. Všimněte si, že první čtyři modely lze použít v HTML nebo CSS k návrhu webových stránek, ale model HSV nikoli. HSV navrhl jeden ze zakladatelů Pixar v roce 1978 a je velmi podobný HSL.
- Model CMY nebo CMYK. Tento model se používá ve všech barevných tiskárnách pro tisk. Model CMYK je založen na pravidle, že tisk probíhá na bílé listy papíru. Jakákoli barva CMYK se získá smícháním azurové (bledě modré, tyrkysové), purpurové (purpurové) a žluté. Každá barva v modelu CMY má charakteristiku krytí (množství inkoustu), měřenou v procentech. Model CMYK ale kromě tří uvedených barev používá i černou.
Všechny výše uvedené barevné modely jsou závislé na hardwaru, tedy pokud vy nastavit barvu prvku HTML pomocí modelu RGB nebo HSL, pak nelze s jistotou říci, jaký přesný odstín barvy uvidí návštěvník vašeho webu, protože monitory všech uživatelů jsou jiné a barvy předávají jinak. Všimněte si také, že všechny výše uvedené modely jsou založeny na modelu RGB a jakoukoli barvu specifikovanou v kterémkoli z modelů (kromě HSLA a RGBA kvůli přítomnosti alfa kanálu) lze převést na RGB.
Pokud mluvíme o hardwarově nezávislých modelech přenosu barev, stojí za zmínku model LAB. Dali jsme si tedy malou pauzu od práce s barvami v HTML tím, že jsme se seznámili s některými barevnými modely. Všimněte si, že prohlížeče „rozumí“ pouze prvním čtyřem modelům: HSL, RGB, HSLA a RGBA. Proto můžeme barvu prvků HTML ovládat pouze pomocí těchto modelů.
Jak se tvoří barva prvku HTML: některé vlastnosti modelu RGB
Pojďme na to přijít jak se tvoří barva elementu HTML a s některými funkcemi modelu RGB. Všimněte si, že o modelu RGB, stejně jako o dalších modelech, které se používají k návrhu webových stránek, budeme hovořit o něco později v samostatných příspěvcích.
RGB model tedy znamená červená, zelená, modrá. RGB model je založen na principu aditivity. Tento princip spočívá v tom, že pro získání jakékoli barvy se barva přidává k černé. Pro lepší pochopení si představte, že vaše obrazovka je černá stěna a máte tři reflektory: první svítí červeně, druhý zeleně a třetí modře. Jas každého reflektoru můžete upravit pomocí pravítka s čísly od 0 do 255. Pokud tedy nastavíte reflektor na nulu, vypne se a nesvítí, pokud je hodnota 255, pak reflektor produkuje nejjasnější možnou barvu .
Ukazuje se tedy, že pokud posvítíte červeným a zeleným reflektorem na stejný bod, všimnete si žluté skvrny na černé stěně. Pokud zkombinujete červenou a modrou, získáte fialovou, a pokud zkombinujete zelenou a modrou, bude světlý bod na černé stěně azurový, ale pokud nasměrujete všechny tři reflektory do jednoho bodu, bude světlý bod bílý.
Výše popsaný princip je základem modelu RGB a používá se k manipulaci s barvami v prvcích HTML na stránce v prohlížeči.
Atributy HTML pro změnu barvy prvků: barva pozadí prvku a barva textu uvnitř prvku
Používá se k tomu, aby byly prvky stránky jedinečné. Pomocí atributů HTML můžeme manipulovat s barvou prvků:
- Barva atributu HTML. Tento atribut umožňuje změnit barvu textu uvnitř elementu HTML. Atribut může nabývat hodnot ve formě názvů barev HTML a kódů modelu RGB v hexadecimálním a desítkovém zápisu. Atribut color je jedinečný atribut HTML, který umožňuje změnit barvu textu uvnitř některých prvků HTML.
- Atribut textu HTML. Tento atribut je jedinečný atribut značky . Štítek spolu se značkami A formulář . Pokud si pamatujete, uvnitř kontejneru jsou umístěny prvky, které pak prohlížeč zobrazí v oblasti zobrazení. Atribut text umožňuje specifikovat Výchozí barva textu pro celou stránku HTML.
- HTML atribut bgcolor. Je to také jedinečný atribut HTML a umožňuje změnit barvu pozadí některých prvků HTML.
- HTML atribut vlink. Tento atribut je jedinečný a vztahuje se pouze na značku změnit barvu odkazu, který uživatel již navštívil.
- HTML atribut alink. Tento atribut je také jedinečný a vztahuje se pouze na značku . Atribut alink mění barvu aktivního odkazu HTML.
- Atribut odkazu HTML. Atribut link se používá pouze ve spojení se značkou a slouží ke změně barvy odkazů HTML stránek, které uživatel ještě nenavštívil.
Poznámka: Použití atributů ke změně barvy prvků HTML se nedoporučuje, protože existují kaskádové styly, které umožňují oddělit design webové stránky od jejího obsahu.
Použití desetinných barevných kódů v HTML
Mluvili jsme tedy o tom, že jas barvy reflektoru můžete nastavit pomocí speciálního pravítka, na kterém jsou očíslované kresby od 0 do 255. Nyní se podívejme, jak nám to pomůže změnit barvu HTML prvků. Jde o to, že můžeme změnit barvu textu uvnitř prvku HTML nebo barvu pozadí v HTML pomocí desetinného kódu takto:
Pokud vytvoříte dokument HTML, ve kterém je popsán kontejner těla, jako v příkladu, uvidíte:
- Barva pozadí HTML dokumentu je nyní zelená: bgcolor=”rgb (0,255,0)”.
- Barva textu HTML stránky se změní na modrou: text=”rgb (0,0,255)”.
- Barva HTML odkazu, který uživatel nenavštívil, bude bílá: link=”rgb (255,255,255)”.
- Barvy aktuálně otevřeného odkazu budou černé: alink=”rgb (0,0,0)”.
- A barva odkazu HTML, který již byl navštíven, bude červená: vlink=”rgb (255,0,0)”.
Vezměte prosím na vědomí: nikdo vám nezakazuje upravit „sílu reflektoru“ podle svého uvážení, můžete nastavit barvu HTML, například tímto způsobem:
rgb(94, 85, 50) |
A získejte barvu dětského překvapení. To je zvláštnost, flexibilita a pohodlí modelu RGB. Váš monitor je černá stěna, na které svítí reflektory, a můžete upravit sílu těchto reflektorů a vytvořit všechny druhy barev pozadí, textu a odkazů pomocí atributů HTML v systému desetinného zápisu, nebo můžete také říci: pomocí desetinných barevných kódů.
Ve skutečnosti Je špatné říkat v HTML desetinné barevné kódy, správnější by bylo říci RGB desetinné barevné kódy, protože tento model se používá nejen pro navrhování webových stránek v HTML a CSS.
Hexadecimální hodnoty barev HTML
Nastavení barvy prvků HTML pomocí desítkových kódů modelu RGB není příliš pohodlné (a v tuto chvíli ne všechny prohlížeče tuto metodu manipulace s barvami podporují), protože záznam nebude nejkompaktnější nastavit barvu prvků HTML pomocí hexadecimálních hodnot. Na obrázku níže můžete vidět, jak jsou desetinné hodnoty převedeny na šestnáctkové.
Pro ty, kteří nejsou obeznámeni s hexadecimálním číselným systémem, by mělo být uvedeno malé vysvětlení, abyste mohli snadno manipulovat s barvou prvků HTML pomocí hexadecimálních kódů modelu RGB. Za prvé, desítková číselná soustava je takto pojmenována, protože libovolné číslo lze získat kombinací deseti číslic (terminologie je důležitá: mezi číslem a číslicí je rozdíl): 0, 1, 2, 3, 5, 6, 7, 8, 9.
V hexadecimální číselné soustavě lze libovolné číslo zapsat pomocí kombinace šestnácti číslic: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Pro snazší pochopení můžete předpokládat, že a je deset a f je patnáct. Například číslo šestnáct by bylo zapsáno v šestnáctkové soustavě jako 10. A číslo 255 by bylo zapsáno jako ff.
Nyní se podívejme, jak můžeme nastavit barvu prvků HTML pomocí hexadecimálních hodnot, zopakujeme náš předchozí příklad a nahradíme desetinné barevné kódy jejich hexadecimálními protějšky:
<
body
alink
=
”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”> |
Poznámka: zápis barvy v HTML v hexadecimálním formátu je poněkud kompaktnější než v desítkové soustavě, to je první. Zadruhé: výkon každého reflektoru se nastavuje čísly od 0 do 255. K zápisu čísla 255 jsou potřeba dvě číslice v hexadecimálním formátu (ff = 250), takže jas každého barevného kanálu (naše reflektory se správně nazývají barevný kanál, barevný kanál) se nastavuje dvěma čísly od 0 do f.
Poznámka: jas každého barevného kanálu se nastavuje samostatně, ale pokud si představíme, že se jedná o jediné číslo, pak maximální možné číslo v hexadecimální číselné soustavě modelu RGB je ffffff, dá nám bílou a v v desítkové soustavě je to: 16 777 215. Tento počet barev a odstínů umožňuje nastavit/použít RGB model. Toto číslo pochází ze skutečnosti, že každý barevný kanál má 256 hodnot jasu (od 0 do 255), respektive: 256 * 256 * 256 = 16 777 215.
Hexadecimální hodnoty barev HTML jsou kompaktnější a jasnější, většina webových designérů a návrhářů rozvržení používá k manipulaci s barvami v HTML hexadecimální hodnoty, takže vám doporučujeme, abyste si nezvykali na desítkovou formu barevného zápisu, ale rovnou použili hexadecimální.
Je jasné, že zpočátku bude pro začínajícího designéra nebo designéra rozložení obtížné orientovat se v hexadecimální formě barevného zápisu, takže téměř každý grafický editor má takzvanou barevnou paletu, která vám umožní vybrat požadovanou barvu a získat její kód pro různé barevné modely v různých číselných soustavách.
Některé textové editory, jako je , mají rozšíření palety, která jsou velmi užitečná, když chcete rychle vybrat barvu a změnit ji. V tomto ohledu k tomu nemohu nic říct.
Názvy barev v HTML
Atributy HTML mohou nabývat hodnot nejen desítkové kódy a hexadecimální hodnoty, ale i speciální názvy květin. Změna barvy prvků HTML pomocí jejich názvu není dobrý nápad. Za prvé, za názvem barvy v HTML se skrývá kód modelu RGB a za druhé každý prohlížeč zobrazuje barvu prvku HTML určenou názvem jinak, záleží pouze na přání vývojářů prohlížeče.
Proto použití názvu barvy v HTML se nedoporučuje. Model RGB je závislý na hardwaru a barva určená názvem závisí na prohlížeči a dokonce i na jeho verzi. Zkusme nastavit barvu prvků HTML stránky pomocí názvu:
<
body
alink
=
”black
”link
=
”#white” vlink=”red” bgcolor=”green” text=”blue”> |
Jak jste pochopili, existuje spousta barev a odstínů. Zde stojí za zmínku, že atributy HTML neumožňují nastavit přechod CSS, ale o tom budeme mluvit v jiném příspěvku. A mnoho barev v HTML má názvy. Tabulku názvů barev v HTML a jejich RGB kódů najdete na mém webu.
Výše uvedená tabulka ukazuje jakou barvu získá prvek HTML, pokud jej zadáte pomocí názvu. Tato tabulka obsahuje 16 barev a jejich názvy, které jsou schváleny konsorciem W3C a měly by se zobrazovat stejně v jakémkoli prohlížeči. Ale ve skutečnosti v HTML můžete použít asi 200 názvů barev, které jsou podporovány hlavními prohlížeči, jako jsou: Opera, Chrome, Firefox, Safari, Internet Explorer (toto tvrzení je velmi kontroverzní o druhém).
HTML paleta barev
Ve skutečnosti v HTML není žádná barevná paleta. Připomeňme si definici slova paleta. Paleta je malá tenká deska čtyřúhelníkového nebo oválného tvaru, na které umělec míchá barvy a získává všechny druhy barev. Někdy se v paletce udělá otvor pro palec, aby se pohodlně držela. Níže naleznete obrázek palety. Proto v HTML není žádná paleta.
Ale v různých textových editorech existuje pluginy palety barevže pomoc rychle vybrat barvu prvku HTML. V grafických editorech je také barevná paleta, protože pro návrháře není příliš pohodlné a zábavné sedět a vypočítat: jaká barva vyjde při tom či onom jasu toho či onoho kanálu. Na obrázku níže vidíte nejjednodušší paletu editoru Malování.
Všimněte si, že mnoho modulů a pluginů palety barev umožňuje získat kód barvy nejen ve formátu RGB/RGBA, ale také ve formátu jiných modelů. Pamatujte si že v HTML není žádná paleta, no, pokud nejste umělec do morku kostí a tyto barvy nazýváte paletu barev stránky HTML které byly použity k jeho zdobení (ostatně někdy paleta označuje barvy, které konkrétní umělec používá, nebo barvy, které byly použity při tvorbě konkrétního obrazu).
Naučte se měnit barvu textu v HTML
Máme hodně teorie o barvách v HTML, pojďme cvičit a zkoušet práce s barvami prvků HTML. První věc, kterou se naučíme dělat, je změnit barvu textu v HTML dokumentu pomocí speciálních atributů a značek. Otevřete libovolný editor a napište do něj následující kód:
Naučit se pracovat s barvami v HTML
Změna barvy textu
Pro změnu barvy textu můžeme použít jedinečný atribut textového prvku BODY a dále můžeme použít prvek FONT a jeho atribut color. Tento text bude zašedlý.
< ! DOCTYPE html > < html lang = "ru-RU" > < head > < meta charset = "UTF-8" > < title >Změna barvy textu v dokumentu HTML< / title > < link rel = "stylesheet" type = "text/css" href = "style.css" / > < / head > < body text = "#ff0000" > < h1 > < font color = "rgb(0,255,0)" >Naučit se pracovat s barvami v HTML< / font > < / h1 > < h2 > < font color = "yellow" >Změna barvy textu< / font > < / h2 > < p >Pro změnu barvy textu můžeme použít unikátní textový atribut BODY prvku a také použít prvek FONT < / body > < / html > |
Tento soubor uložím jako color.html a poradím vám, abyste nezapomněli na . Zaznamenávání barvy v systému desetinných čísel není podporováno prohlížeči Chrome, Firefox a Opera, ale IE rozumí tomuto barevnému zápisu a zvýrazní záhlaví HTML zeleně:
Správná věc není změnit barvu textu v HTML, ale změnit barvu písma v HTML. O
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ě vznikají 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.
Jméno | Barva | Kód | RGB | HSL | Popis |
---|---|---|---|---|---|
bílý | #ffffff nebo #fff | rgb(255,255,255) | hsl(0,0%,100%) | Bílý | |
stříbro | #c0c0c0 | rgb(192,192,192) | hsl (0,0 %, 75 %) | Šedá | |
šedá | #808080 | rgb(128,128,128) | hsl (0,0 %, 50 %) | Tmavě š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ý | |
pomerančový | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | Pomerančový | |
žluť | #ffff00 nebo #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Žluť | |
olivový | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Olivový | |
vápno | #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%) | Modro-zelená | |
fuchsie | #ff00ff nebo #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Růžový | |
fialová | #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 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 byly 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
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 | Jméno | Barva | Jméno | Barva | Jméno | Barva | Jméno |
---|---|---|---|---|---|---|---|
Černý | Šedá | Stříbro | Bílý | ||||
Žluť | Vápno | Aqua | Fuchsie | ||||
Červený | Zelený | Modrý | Fialová | ||||
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
- Zkuste to sami »
Záhlaví na červeném pozadí
Záhlaví na oranžovém pozadí
Směr na vápno pozadí
Bílý text na modrém pozadí
Záhlaví na červeném pozadí
Záhlaví na oranžovém pozadí
Směr na vápno pozadí
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
- Zkuste to sami »
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
- Zkuste to sami »
č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ě používaných barev (název, HEX a RGB):
anglický název | ruské jméno | Ochutnat | HEX | RGB | ||
---|---|---|---|---|---|---|
Amarant | Amarant | #E52B50 | 229 | 43 | 80 | |
Jantar | Jantar | #FFBF00 | 255 | 191 | 0 | |
Aqua | Modro-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 | |
Vápno | Vápno | #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 | |
Pomerančový | Pomerančový | #FFA500 | 255 | 165 | 0 | |
Broskev | Broskev | #FFE5B4 | 255 | 229 | 180 | |
Dýně | Dýně | #FF7518 | 255 | 117 | 24 | |
Fialová | Fialový | #800080 | 128 | 0 | 128 | |
Červený | Červený | #FF0000 | 255 | 0 | 0 | |
Šafrán | Šafrán | #F4C430 | 244 | 196 | 48 | |
Mořská zelená | Zelené moře | #2E8B57 | 46 | 139 | 87 | |
Bažinatá zelená | Bolotný | #ACB78E | 172 | 183 | 142 | |
Teal | Modro-zelená | #008080 | 0 | 128 | 128 | |
Ultramarín | Ultramarín | #120A8F | 18 | 10 | 143 | |
Fialový | Fialový | #8B00FF | 139 | 0 | 255 | |
Žluť | Žluť | #FFFF00 | 255 | 255 | 0 |
Barevné kódy (pozadí) podle sytosti a odstínu.