Číslo barvy vínové. HTML tutoriál. RGB barvy. Bezpečná paleta barev

Zkuste upravit tento příklad a zadat své vlastní hodnoty, například rgb(100, 100, 100) .

Nastavení barev pomocí RGBA

CSS3 má 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 - kanálu A nebo alfa. Tento kanál nastavuje průhlednost barvy. Jeho hodnoty jsou nastaveny v rozsahu od 0 do 1. Hodnota 0 odpovídá plné průhlednosti, 1 - plné neprůhlednosti (barva bude stejná, jako byla specifikována 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.

Bude to fungovat následovně:

Tento kód je vizuálně podobný následujícímu, který používá model RGB k určení hodnoty barvy:

Zde je jeho výsledek:

Hodnota alfa kanálu rovna nule činí jakoukoli barvu neviditelnou – absolutně transparentní hodnota rovná 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 každodenním životě používáme desítkový systém počítání. Jeho původ je velmi jednoduchý – na rukou máme deset prstů a počítání na prstech bylo v životě pohodlné. Pokud má desítková soustava deset číslic: od 0 do 9 a číslo 10 je další číslice, pak má šestnáctková soustava 16 číslic a další číslice je čí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 uveďme do tabulky:

K zápisu hexadecimálních čísel větších než F (15 v desítkové soustavě), stejně jako v desítkové soustavě, používají také kombinaci dvou číslic, ale již šestnáctkovou, což je zřejmé. Chcete-li tedy zapsat desetinné číslo 255 v hexadecimálním zápisu, použijte zápis FF.

Hexadecimální systém je pro počítač srozumitelnější a rychleji zpracovává hodnoty nastavené 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 ve svém kanálu modelu RGB.

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.

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 tehdy, když se dvě číslice v barevné hodnotě jednoho 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í barev pomocí HSL

CSS3 má nový formát pro specifikaci barev.

Formát HSL je zkratka anglických slov: Hue (odstín), Saturate (saturace) a Lightness (světlost).

Odstín v HSL je hodnota barvy na speciálním barevném kole (obrázek 2) a je uvedena 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.

Druhá hodnota - sytost (Saturate) se nastavuje v procentech. Při 100% sytosti je barva co nejvíce „šťavnatá“, když se indikátor sytosti pohybuje směrem k 0 %, barva se stává matnější a přechází do šedi.

Třetí hodnota, Světlost, se také nastavuje v procentech. Čím vyšší procento, tím jasnější bude barva. Extrémní hodnoty 0 % a 100 % budou indikovat černé (žádné světlo) a bílé (přeexponované) barvy a nezáleží na tom, která barva z barevného kruhu byla vybrána v prvním kanálu. Optimální hodnota jasu barev je 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 uvedená 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. Totéž nelze říci o formátech RGB a HEX; barevný kód uvedený v těchto formátech je jasný až po zobrazení na monitoru.

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 mohu zajistit, aby styly fungovaly ve starších prohlížečích?

Somebloсk ( 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ž nebude používat alfa kanál, zobrazí ve formátu RGB.

Jak víte, barva může ovlivnit stav člověka: duševní i fyzický. Každý den při procházení webových stránek na internetu oči vyhodnocují miliony barev a odstínů. Webdesignér, který je obeznámen s psychologií barev, dokáže manipulovat s náladou návštěvníka, aby dosáhl určitých cílů.

To je způsobeno skutečností, ž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á ( Červený);
• zelená barva ( Zelený);
• modrá barva ( Modrý).

Odtud pochází zkrácený název RGB. Tyto barvy byly 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á:

Číselné vyjádření barvy

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ž v hexadecimálním zápisu odpovídá 00-FF.

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, získají se různé odstíny červené, zelené a modré. Následuje tabulka jejich gradací a také hexadecimální hodnoty každého z odstínů:

RGB barevné tabulky

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, která prezentuje všechny existující odstíny a také jejich názvy a číselné vyjádření ( v desítkové a šestnáctkové podobě).

Můžete si jej prohlédnout zde. Tato tabulka výrazně usnadňuje život webdesignérům, protože během několika sekund najdete požadovaný odstín a zjistíte 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, pokusí se získat něco blízkého 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 stále nestojí), při jeho používání můžete, jak se říká, klidně spát.

Zlatá barva v modelu RGB

Slovo „zlato“ bylo poprvé použito na počátku 14. století k označení 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á barva zaují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 z mastku a mastku, které mají béžový nádech. V modelu RGB má béžová barva následující číselná vyjádření.

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.

K určení barev se používají hexadecimální čísla. Šestnáctková soustava je na rozdíl od desítkové soustavy založena, jak její název napovídá, na čísle 16. Čísla budou následující: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 jsou nahrazena latinkou. Čísla větší než 15 v šestnáctkové soustavě se tvoří spojením dvou čísel do jednoho. Například číslo 255 v desítkové soustavě odpovídá číslu FF v šestnáctkové soustavě. Aby se předešlo zmatkům při určování číselné soustavy, před hexadecimální číslo je umístěn hash symbol #, 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

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.

Použití RGB

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

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

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

Formát HSLA je syntaxí podobný jako HSL, ale obsahuje alfa kanál pro určení průhlednosti prvku. Hodnota 0 je plně průhledná, 1 je neprůhledná a střední hodnota jako 0,5 je poloprůhledná.

Hodnoty barev RGBA, HSL a HSLA jsou přidány do CSS3, takže při používání 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