Šedomodrý kód. Barvu ve stylech lze nastavit různými způsoby: pomocí hexadecimální hodnoty, podle názvu, ve formátu RGB, RGBA, HSL, HSLA
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 nejasnostem v definici číselné soustavy, před hexadecimálním číslem je uveden 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.
Tab. 1. Názvy barev
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
Barvy
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!
Arrrgh!
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 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ž nakonec tvoří 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 zbytek složek je nastaven 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. K tomuto účelu se hodí grafický editor, který umí 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), pak se stejná barva může v různých prohlížečích zobrazovat různě. To souvisí se způsobem vykreslování grafiky, když prohlížeč pracuje se svou 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 v různých prohlížečích stejná, byla představena paleta tzv. webových barev. Webové barvy jsou takové barvy, z nichž 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 tuto chvíli je relevance webových barev velmi malá díky zkvalitňování monitorů a rozšiřování jejich možností.
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.
Tab. 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, 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
Barvy
Ukázka 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 hodnota atributu text nastavena na hexadecimální číslo a bgcolor je nastaveno 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á (černá), bílá (bílá), červená (červená), zelená (zelená), modrá (modrá) atd.:
Barva textu – červená
Nejoblíbenější barvy standardu World Wide Web Consortium (W3C) jsou:
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 ostatní 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 RGB 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 nejvyšší číslo 255 v desítkové soustavě odpovídá nejvyšší FF v šestnáctkové soustavě. Na rozdíl od desítkové soustavy je šestnáctkovému číslu předřazen znak libry. #
, například #FF0000 se zobrazí jako červená, protože červená je nastavena na nejvyšší hodnotu (FF) a ostatní barvy na minimální hodnotu (00). Znaky za symbolem hash #
lze psát jak velkými, tak malými písmeny. Hexadecimální systém umožňuje používat zkrácený tvar #rgb, kde je každý znak roven 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.
Barvu v CSS lze nastavit různými způsoby:
podle jména,
pomocí hexadecimální hodnoty,
ve formátech RGB a RGBA,
ve formátech HSL a HSLA.
Nastavte barvu podle názvu
Prohlížeče podporují určení určitých barev prvků podle názvu. V této tabulce jsou některá klíčová slova (anglické názvy barev) použitá k nastavení vlastností barev, RGB kódu, Hex kódu (HEX) a HSL kódu.
Tab. 1. Názvy barev, jejich RGB, HEX a HSL kód.
název
Barva
RGB
HEX
HSL
Popis
bílý
rgb(255, 255, 255)
#ffff nebo #fff
hsl(0, 0 %, 100 %)
Bílý
stříbrný
rgb(192, 192, 192)
#c0c0c0
hsl(0, 0 %, 75 %)
Šedá
šedá
rgb(128, 128, 128)
#808080
hsl(0, 0 %, 50 %)
Tmavošedý
Černá
rgb(0, 0, 0)
#000000 nebo #000
hsl(0, 0 %, 0 %)
Černá
kaštanové
rgb(128, 0, 0)
#800000
hsl(0, 100 %, 25 %)
Tmavě červená
Červené
rgb(255, 0, 0)
#ff0000 nebo #f00
hsl(0, 100 %, 50 %)
Červené
oranžový
rgb(255, 165, 0)
#ffa500
hsl(38,8, 100 %, 50 %)
oranžový
žlutá
rgb(255, 255, 0)
#ffff00 nebo #ff0
hsl(60, 100 %, 50 %)
Žlutá
olivový
rgb(128, 128, 0)
#808000
hsl(60, 100 %, 25 %)
Olivový
Limetka
rgb(0; 255; 0)
#00ff00 nebo #0f0
hsl(120, 100 %, 50 %)
světle zelená
zelená
rgb(0; 128; 0)
#008000
hsl(120, 100 %, 25 %)
Zelená
aqua
rgb(0, 255, 255)
#00ffff nebo #0ff
hsl(180, 100 %, 50 %)
Modrý
modrý
rgb(0, 0, 255)
#0000ff nebo #00f
hsl(240, 100 %, 50 %)
Modrý
námořnictvo
rgb(0,0,128)
#000080
hsl(240, 100 %, 25 %)
Tmavě modrá
modrozelená
rgb(0; 128; 128)
#008080
hsl(180, 100 %, 25 %)
modrá zelená
fuchsie
rgb(255, 0, 255)
#ff00ff nebo #f0f
hsl(300, 100 %, 50 %)
Růžový
nachový
rgb(128, 0, 128)
#800080
hsl(300, 100 %, 25 %)
fialový
Toto je příklad použití názvů barev, názvy barev jsou převzaty z rozšířené tabulky.
RGB do CSS
Středně tyrkysová
hnědý
karmínový
modrofialová
rolelivedrab
Tento kód funguje následovně:
Nastavení barev pomocí RGB
RGB je aditivní barevný model. V angličtině přidání- přidání. RGB je zkratka anglických slov: Red, Green, Blue - červená, zelená, modrá). Z toho je zřejmé, že v modelu RGB jsou barvy syntetizovány přidáním tří barev (červená, zelená, modrá) v různém množství.
Smícháním červené, zelené a modré barvy můžete získat několik milionů odstínů. Všechny možné kombinace jsou uloženy v paměti počítačů.
Dostat se k věci.
Pro nastavení vlastností v tomto formátu se používá zápis rgb(r, g, b), kde r, g, b jsou tři kanály pro každou barvu (červená, zelená, modrá). Hodnoty pro každý kanál jsou nastaveny v rozsahu od 0 do 255.
Příklad kódu.
Aby bylo vše jasné, uvedu příklad kódu:
RGB do CSS
rgb(255, 0, 0)
rgb(0; 255; 0)
rgb(0, 0, 255)
Tento příklad by měl fungovat takto:
Obr. 1. Barvy v RGB.
Například vysvětlení.
Na začátku stránky vytvoříme třídu div.rgb, je potřeba, aby bloky vytvořené tagem
zobrazeno ve správné velikosti: 240 x 40 pixelů. Vlastnosti line-height (výška řádku) přiřadíme hodnotu - 40px, tedy rovna výšce bloku, to umožní zobrazení textu v bloku
ve středu vertikály. vodorovně vycentrovat text pomocí pravidla ( zarovnání textu: na střed ;).
Dále v kódu nastavte barvu pozadí bloku
pomocí atributu style pomocí vlastnosti pozadí a přiřazením hodnot rgb(255, 0, 0) , rgb(0, 255, 0) a rgb(0, 0, 255) . To znamená, že střídavě děláme jeden kanál co nejvíce nasycený a zbývající kanály se nepoužívají pro syntézu, protože jejich hodnota je nula.
Zkuste upravit tento příklad tak, aby zahrnoval vaše vlastní hodnoty, jako je rgb(100, 100, 100) .
Nastavení barev pomocí RGBA
CSS3 představilo nový nástroj pro práci s barvami – formát RGBA. Lze to nazvat evolucí modelu RGB, ale s přidáním jednoho nového kanálu - A nebo alfa kanálu. Tento kanál nastavuje průhlednost barvy. Jeho hodnoty jsou nastaveny v rozsahu od 0 do 1. Hodnota rovna 0 odpovídá plné průhlednosti, 1 - plné neprůhlednosti (barva bude stejná, jako je nastavena v prvních třech kanálech RGB) a středním hodnotám , jako 0,4 nebo 0,6 - průsvitnost v různé míře.
Příklad kódu.
RGBA na CSS3
Bude to fungovat následovně:
Tento kód je vizuálně podobný následujícímu, který k nastavení hodnoty barvy používá model RGB:
RGBA na CSS3
Zde je jeho výsledek:
Hodnota alfa kanálu rovna nule činí jakoukoli barvu neviditelnou – absolutně transparentní, hodnota rovna jedné převádí barvu v kódu RGB beze změn. Vlastnost rgba(255,0,0,1.0) zobrazuje červenou barvu rgb(255, 0, 0) .
Podle hexadecimální hodnoty (HEX kód)
V běžném životě používáme desítkovou soustavu počítání. Jeho původ je velmi jednoduchý – na rukou máme deset prstů a v životě bylo pohodlné počítat na prstech. Pokud je v desítkové soustavě deset číslic: od 0 do 9 a číslo 10 je další číslice, pak je v šestnáctkové soustavě 16 číslic a další číslice bude číslo 16.
K označení barevných kódů se jako hexadecimální číslice používají běžné desetinné číslice od 0 do 9 a k označení čísel od 10 do 15 se používají latinská písmena od A do F, tedy (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Pro přehlednost si to shrňme do tabulky:
K zápisu hexadecimálních čísel větších než F (15 dekadických), stejně jako v desítkové soustavě, používají také sjednocení dvou číslic, ale již šestnáctkové, což je zřejmé. Pro zápis desetinného čísla 255 v šestnáctkové soustavě se tedy používá zápis FF.
Hexadecimální systém je pro počítač srozumitelnější, rychleji zpracovává hodnoty dané hexadecimální hodnotou.
Chcete-li zadat barvu v šestnáctkové soustavě, před číselnou hodnotu uveďte znak „#“, příklad: #FFC0CB . Samotná hodnota #FFC0CB se skládá ze tří hexadecimálních číslic FF , C0 a CB . Význam této položky je stejný jako nastavení barvy ve formátu RGB (rgb(r, g, b) ) - každá hexadecimální číslice v HEX kódu označuje sytost barev v kanálu modelu RGB.
HEX kód v CSS
#FF0000
#00FF00
#0000FF
Tento kód zobrazí následující prvky:
A zde je obrázek s výsledkem ze sekce "Nastavení barev pomocí RGB" na této stránce výše.
Obr. 1. Barvy v RGB.
Vidíme, že barvy jsou stejné.
Zkrácený zápis HEX kódu barvy je povolen: 6místné číslo lze zapsat jako 3místné číslo. To platí pouze v případě, že se dvě číslice v barevné hodnotě stejného kanálu opakují.
To znamená, že je přijatelná následující zkratka:
Například barvu #ff22aa lze zapsat jako #f2a nebo barvu #44aa22 zapsat jako #4a2 .
Nastavení barvy pomocí HSL
CSS3 má nový formát pro specifikaci barev.
Formát HSL je zkratkou anglických slov: Hue (odstín), Saturate (sytost) a Lightness (světlost).
Odstín v HSL je hodnota barvy na speciálním barevném kole (obrázek 2) a je specifikována ve stupních. Pokud nakreslíme analogii s modelem RGB, pak 0° odpovídá červené, 120° odpovídá zelené a 240° odpovídá modré.
Hodnota odstínu se změní z 0 na 359.
Obrázek 2. Barevné kolo HSL.
Druhá hodnota - sytost (Saturate) se nastavuje v procentech. Při 100% sytosti je barva co nejvíce "šťavnatá", jak se ukazatel sytosti pohybuje směrem k 0%, barva je stále matnější a roluje do šedi.
Třetí hodnota - světlost (Lightness) se nastavuje také v procentech. Čím vyšší procento, tím jasnější bude barva. Extrémní hodnoty 0 % a 100 % označují černou (nedostatek světla) a bílou (exponovanou) barvu a nezáleží na tom, která barva z barevného kruhu byla vybrána v prvním kanálu. Za optimální hodnotu lze považovat hodnotu jasu barev rovnou 50 %.
Nastavení barev pomocí HSLA
Formát HSLA souvisí s HSL, stejně jako RGB s RGBA. Ve formátu HSLA, stejně jako v RGBA, je přidán alfa kanál, který je zodpovědný za průhlednost barev.
Barva zadaná ve formátu HSL je snáze čitelná. Dá se říci, že je intuitivní. Například kód hsl(120,60%,50%) může představovat konečnou barvu, pokud je v paměti obrázek barevného kola HSL. To se o formátech RGB a HEX říci nedá, barevný kód uvedený v těchto formátech je jasný až po vykreslení na monitor.
Nové formáty v CSS3 (HSL, HSLA a RGBA) fungují v prohlížečích od verzí: IE 9.0, Opera 10.0 Firefox 3.0. Jak zajistit, aby styly fungovaly ve starších prohlížečích?
Při použití tohoto kódu ve starších prohlížečích se barva pozadí pro třídu .somebloсk, i když nepoužívá alfa kanál, zobrazí ve formátu RGB.
26.02.2015 8,9 tis
Jak víte, barva může ovlivnit stav člověka: duševní i fyzický. Každý den při procházení internetu oči vyhodnocují miliony barev a odstínů. Webdesignér, který je obeznámen s psychologií barev, dokáže ovládat náladu návštěvníka, aby dosáhl jakýchkoli cílů.
To je způsobeno tím, že některé odstíny uklidňují a některé naopak vzrušují. Dále si povíme, jak se barva syntetizuje a zobrazuje pomocí výpočetní techniky.
RGB je barevný model, který představuje metodu získání všech barev a jejich odstínů smícháním tří hlavních složek v různých poměrech, kterými jsou:
Červená barva ( Červené);
zelená barva ( Zelená);
Modrá barva ( Modrý).
Odtud pochází zkrácený název RGB. Tyto barvy jsou vybrány jako hlavní z nějakého důvodu: důvodem je fyziologie sítnice lidského oka a způsob, jakým je vnímá:
Model RGB zůstává dnes nejoblíbenější a používá se k reprodukci barev na televizních obrazovkách a počítačových monitorech. Protože výrobci vybavují své produkty různými vlastnostmi, byl v roce 1996 vytvořen jednotný systém syntézy barev na bázi RGB s názvem sRGB, na kterém spolupracovaly společnosti Microsoft a HP.
Číselná barevná reprezentace
Jak již bylo zmíněno dříve, RGB barvy vznikají smícháním primárních barev. Pro popis intenzity každého z nich bylo přijato schéma, ve kterém je barva reprezentována rozsahem 0-255 (8 bitů), což odpovídá 00-FF v hexadecimální soustavě.
To znamená, že primární barvy budou vypadat takto:
Červená - RGB (255.0.0);
Zelená - RGB (0,255,0);
Modrá - RGB (0,0,255);
Pokud intenzita barvy nabývá hodnot nižších než 255, pak se získají různé odstíny červené, zelené a modré. Následuje tabulka jejich gradace a také hexadecimální hodnoty každého z odstínů:
Barevné tabulky RGB
Samozřejmě, že kromě gradací základních barev existují i smíšené a jejich počet je poměrně velký. Proto byla vytvořena tabulka barev RGB, ve které jsou uvedeny všechny existující odstíny a také jejich názvy a číselné vyjádření ( v desítkové a šestnáctkové podobě).
Zde se s ní můžete seznámit. Tato tabulka výrazně zjednodušuje život webdesignérům, protože během několika sekund můžete najít požadovaný odstín a zjistit jeho číselné vyjádření.
Bezpečná barevná paleta RGB
V určité chvíli však nastal problém se zobrazováním barev v různých prohlížečích a k jeho vyřešení byla sestavena tzv. „bezpečná“ paleta barev RGB, které byly odvozeny matematickými výpočty.
Když prohlížeč nedokáže správně zobrazit barvu, snaží se přiblížit tomu, co potřebuje, smícháním sousedních barev a výsledek bude s největší pravděpodobností zcela nepřijatelný:
Použitím barevných kódů RGB z této palety může mít webový vývojář klid na zobrazování barev na stránkách svého webu při prohlížení pomocí různých prohlížečů, platforem a monitorů. I když v současné době ztrácí tabulka bezpečných barev svou relevanci ( technologický pokrok nestojí na místě), při jeho používání můžete, jak se říká, klidně spát.
Zlatá barva v modelu RGB
Poprvé bylo slovo „zlato“ použito na počátku 14. století k popisu barvy chemického prvku zvaného Aurum – zlato. V modelu RGB je zlatá barva reprezentována následujícími číselnými hodnotami:
RGB (255, 215, 0) - desítková soustava;
HEX #FFD700 - hexadecimální systém.
Béžová barva v modelu RGB
Béžová má v historii poměrně významné místo, i když není nejvýraznější. Mnoho kulturních památek, zejména antické sochy, bylo vyrobeno ze steatitu a mastku, které mají béžový nádech. V modelu RGB má béžová následující číselná vyjádření.