V HTML lze barvu zadat třemi způsoby:
Nastavení barvy v HTML podle jejího názvu
Některé barvy mohou být specifikovány jejich názvem pomocí názvu barvy na anglický jazyk. Nejčastější klíčová slova: černá (černá), bílá (bílá), červená (červená), zelená (zelená), modrá (modrá) atd.:
Barva textu – červená
Nejoblíbenější barvy standardu Consortium Celosvětová Síť(English 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ý | ||||
| kaštanové | Olivový | námořnictvo | Teal |
Příklad použití různých názvů barev:
Příklad: nastavení barvy podle jejího názvu
- Zkus to sám "
Záhlaví na červeném pozadí
Záhlaví na oranžovém pozadí
Záhlaví na pozadí vápna
Bílý text na modrém pozadí
Záhlaví na červeném pozadí
Záhlaví na oranžovém pozadí
Záhlaví na pozadí vápna
Bílý text na modrém pozadí
Určení barvy pomocí RGB
Při zobrazení různých barev na monitoru se za základ bere paleta RGB. Jakákoli barva se získá smícháním tří hlavních: R - červená, G - zelená (zelená), B - modrá (modrá). Jas každé barvy je dán jedním bytem, a proto může 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ý z 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í sytost zelené barvy:
Příklad: Určení barvy pomocí RGB
- Zkus to sám "
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). Hexadecimální soustava je na rozdíl od desítkové soustavy založena, jak již z názvu vyplývá, na čísle 16. V šestnáctkové soustavě se používají tyto znaky: 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 spojením dvou znaků do jedné hodnoty. Například, největší počet 255 palců desítková soustava odpovídá nejvyšší hodnotě FF v hexadecimální soustavě. Na rozdíl od desítkové soustavy je šestnáctkovému číslu předřazen znak libry. # , například #FF0000 se vykreslí jako červená, protože červená je nastavena na nejvyšší hodnotu (FF) a zbytek barev je nastaven na minimální hodnota(00). Znaky za symbolem hash # lze psát jak velkými, tak malými písmeny. Hexadecimální systém umožňuje použití zkrácené formy jako #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: Barva HEX
- Zkus to sám "
č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 | 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 | |
| mořská zeleň | 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.
K určení barev se používají hexadecimální čísla. Hexadecimální soustava je na rozdíl od desítkové soustavy založena, jak již 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 v definici číselné soustavy, před hexadecimálním číslem je symbol hash #, například #666999. Každá ze tří barev – červená, zelená a modrá – může nabývat hodnot od 00 do FF. Označení barvy je tedy rozděleno do tří složek #rrggbb, kdy první dva znaky označují červenou složku barvy, dva prostřední 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 názvu. V tabulce. 1 zobrazuje názvy, hexadecimální kód, hodnoty v RGB, formát HSL a popis.
| název | Barva | Kód | RGB | HSL | Popis |
|---|---|---|---|---|---|
| bílý | #ffff 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ý |
S 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řijatelné nastavit barvu v procentech, přičemž 100 % bude odpovídat číslu 255. Nejprve je specifikováno klíčové slovo rgb a poté jsou barevné složky uvedeno v závorkách oddělených čá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ý nastavuje průhlednost prvku. Hodnota 0 je plně průhledná, 1 je neprůhledná a střední hodnota jako 0,5 je průsvitná.
RGBA je přidán do CSS3, takže validace kódu CSS by měla být prováděna podle této verze. Je třeba poznamenat, že standard CSS3 je stále ve vývoji a některé jeho funkce se mohou změnit. Například barva RGB přidaná do vlastnosti background-color projde ověřením, ale barva přidaná do vlastnosti pozadí nikoli. 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 tvořen kombinací 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° je červená, 120° je zelená a 240° je modrá. Hodnota odstínu se může lišit od 0 do 359.
Rýže. 1. Barevné kolečko
Sytost je intenzita barvy měřená v procentech od 0 % do 100 %. Hodnota 0 % znamená žádnou barvu a odstín šedé, 100 % je maximální hodnota sytosti.
Světlost nastavuje, jak jasná je barva, a je určena v procentech od 0 % do 100 %. Malé hodnoty barvu ztmaví, 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, který nastavuje průhlednost prvku. Hodnota 0 je plně průhledná, 1 je neprůhledná a střední hodnota jako 0,5 je průsvitná.
Hodnoty barev ve formátech RGBA, HSL a HSLA jsou přidány do CSS3, takže při použití těchto formátů zkontrolujte platnost kódu vůči verzi.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Varování
Všechny metody odchytu lva uvedené na stránce jsou teoretické a založené na výpočtový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ýsledek. 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
28. 11. 2014 11,1 tisChuťové vjemy na stránce zatím bohužel nelze zobrazit. To se ale dá plně kompenzovat používáním barvy. html barvy totiž umožňují zobrazit kterýkoli z milionů odstínů. Aby " barevné tužky“ v jeho souboru je mnohem více 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 šestnáctkové 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 sytost odstínu svou primární barvou:
- První číselný pár je zodpovědný za červenou barvu;
- Druhý pár je pro obsah zelené barvy;
- To druhé je pro obsah modré barvy.
Na začátku kódu (před čísly) je umístěna značka hash. Takto 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 - Právě teď html 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á 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 následovně: rgb(0, 210, 100).
barva pozadí:rgb(100,186,43)
4. V formát RGBA- jedná se o pokročilý formát RGB, kde čtvrtá hodnota udává průhlednost barvy ve formě desetinného zlomku 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 tabulky barev 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. V něm jsou ke 147 klíčovým názvům barevných odstínů uvedeny kódy korespondence ve všech hlavních normách pro zobrazení barev. Každé pole je navíc vybaveno lištou pro vizuální shodu barev. Jedna z těchto tabulek je uvedena na webu colorscheme.ru:
Ale i s pomocí takového strukturování korespondence může být výběr požadovaného odstínu obtížný. A není pravda, že v tabulce barevných kódů je ta správná.
Abychom tuto bariéru obešli a co nejvíce usnadnili výběr správného odstínu, byly vyvinuty interaktivní webové služby. Jim uživatelské rozhraní se může poněkud lišit.
Na webu html-color-codes.info vypadá generátor barev 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 hlavní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čnost barev
A bylo to dávno, v době grafických karet, které podporují pouze 256 barev. V těch vzdálených časech Operační systémy dokázal zobrazit pouze určitý počet osmibitových odstínů bez zkreslení.
Pak se odvodil velký stůl bezpečné barvy. Označoval 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šechno se v naší době 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í.
Vlad Merževič
V HTML se barva určuje jedním ze dvou způsobů: pomocí hexadecimálního kódu a názvem některých barev. Nejčastěji používaná metoda je založena na hexadecimální soustavě, jako nejuniverzálnější.
Hexadecimální barvy
HTML používá k určení barev hexadecimální čísla. Hexadecimální soustava je na rozdíl od desítkové soustavy založena, jak již 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 v definici číselné soustavy, před hexadecimálním číslem je znak libry #, 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 je následující.
Zde je barva pozadí webové stránky nastavena na #FA8E47. Znak libry # před číslem znamená, že je v šestnáctkové soustavě. První dvě číslice (FA) definují červenou složku barvy, třetí až čtvrtá číslice (8E) zelenou složku a poslední dvě číslice (47) modrou složku. Konečným výsledkem je tato barva.
| FA | + | 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 vznikne 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), získá se šedý odstín. Čím vyšší číslo, tím světlejší barva a hodnoty se mění z #000000 (černá) na #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 získá smícháním červené se zelenou. 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 sousedících s ní. Takže azurová (#00FFFF) se 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. Vhodné pro tento účel grafický editor kteří mohou pracovat s různými barevnými modely, např. Adobe Photoshop. Na Obr. 6.2 ukazuje okno pro výběr barvy v tomto programu, čára zakroužkuje výslednou hexadecimální hodnotu aktuální barvy. Můžete jej zkopírovat a vložit do kódu.
Rýže. 6.2. Výběr barvy ve Photoshopu
Webové barvy
Pokud nastavíte kvalitu barev monitoru na 8 bitů (256 barev), bude možné zobrazit stejnou barvu různé prohlížeče svým vlastním způsobem. To souvisí se způsobem vykreslování grafiky, když prohlížeč pracuje se svou vlastní paletou a nemůže zobrazit barvu, kterou v paletě nemá. Barva je v tomto případě nahrazena kombinací pixelů jiných, jemu blízkých barev, které danou imitují. Aby barva zůstala v různých prohlížečích stejná, byla představena paleta tzv. webových barev. Webové barvy jsou barvy, u kterých pro každou složku - červená, zelená a modrá - je nastavena jedna 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 tento moment relevance webových barev je vzhledem ke zvýšení kvality monitorů a rozšíření jejich možností velmi malá.
Barvy podle názvu
Abyste si nepamatovali sbírku čí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, jak barvu určíte - podle jejího názvu nebo pomocí hexadecimálních čísel. Ve svém účinku jsou tyto metody rovnocenné. Příklad 6.1 ukazuje, jak nastavit barvu pozadí a textu webové stránky.
Příklad 6.1. Barva pozadí a textu
Ukázka textu
V tento příklad barva pozadí se nastavuje pomocí atributu bgcolor tagu
a barvu textu prostřednictvím atributu text. Pro rozmanitost je hodnota atributu text nastavena na hexadecimální číslo a bgcolor je nastavena na vyhrazenou hodnotu. klíčové slovo modrozelená.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 popředí prvku (např. text, barva odkazu) nebo pro pozadí prvku (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ů.
Můžete si nastavit vlastní hodnoty barev různé formáty. V následující tabulce jsou uvedeny všechny možné formáty:
Tyto formáty jsou podrobněji popsány níže.
CSS barvy - Hex kódy
Hexadecimální kód barvy je šestimístné barevné zobrazení. První dvě číslice (RR) jsou červená hodnota, další dvě jsou zelená hodnota (GG) a poslední dvě jsou modrá hodnota (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é grafiky software, 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ásledují příklady použití hexadecimálního zápisu.
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ů
S naší službou můžete vytvořit miliony barevných kódů.
Bezpečné barvy prohlížeč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 hex kód. Jejich použití je bezpečné, protože zajišťují, že všechny počítače budou správně zobrazovat barvy 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 |