• Š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:

    BarvanázevBarvanázev Barvanázev Barvaná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 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 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?

    Someblock ( barva pozadí: rgb(255,50,50); barva pozadí: rgba(255,50,50,0,85) )

    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í.