Béžová rgb. Barvu ve stylech lze nastavit různými způsoby: pomocí hexadecimální hodnoty, podle názvu, 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 popředí prvku (např. text, barva odkazu) nebo pro pozadí prvku (barva pozadí, 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 nastavit v různých formátech. 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é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á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.

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.

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.

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

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.

Toto je příklad použití názvů barev, názvy barev jsou převzaty z rozšířené tabulky.

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:

Tento příklad by měl fungovat takto:

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 nejsytější 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.

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:

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.

#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. Vzhledem k tomu, ž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, 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ě).

Můžete se s ní seznámit zde. 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í.