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é výrobky různými vlastnostmi, v roce 1996 jeden systém Syntéza barev na bázi RGB s názvem sRGB, která byla vyvinuta společně společnostmi 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. Tento stůl velmi usnadňuje život webdesignérům, protože během pár 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 se webový vývojář nemusí starat o zobrazování barev na svých stránkách při prohlížení pomocí různé prohlížeče, na různé platformy a monitory. I když na tento moment tabulka bezpečných barev ztrácí svůj význam ( 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 béžová barva má následující číselná vyjádření.

>> Správa barev

Hexadecimální hodnoty barev RGB

Metody popisu a zpracování barev se od sebe liší tím, pro jaké konečné zobrazení jsou určeny. Srovnejme například znázornění barev pro polygrafii a pro počítačové monitory. V prvním případě je základ bílý barva papíru, na který jsou následně aplikovány tři základní barvy: modrý, nachový a žlutá. Mícháním mezi sebou a s bílou barvou papíru v různých poměrech dávají tyto tři základní barvy různé barevné odstíny, kromě čistě černé, nebo při úplné absenci barev dávají papíru bílý. Pokud k nim přidáme černou, dostaneme CMYK- způsob přenosu barvy, když se požadovaná barva získá odečtením chybějících barev od bílé.

V druhém případě je základ Černá barva obrazovky monitoru, jejíž každá buňka svítí jednou ze tří barev: Červené-Červené, zelená-zelená a modrý-modrý. Pak při úplné absenci jakéhokoli záře získáme čistě černou barvu obrazovky a jakákoliv z požadovaných barev je dána poměrem každé ze tří barev. V tomto případě dostaneme RGB- Metoda přenosu barev. Primární barvy mohou mít význam od 0 před 255 , nebo od 0% před 100% , nebo může být reprezentován jako hexadecimální hodnota. Na obrázku níže můžete vidět výsledky míchání základních barev.

Hexadecimální číselná soustava, na rozdíl od desítkové číselné soustavy, nemá ve své číselné řadě deset číslic, ale šestnáct – odtud název. V souladu s tím mohou být neopakující se varianty kombinací dvou číslic pouze - 256 , chcete-li pokračovat v řadě číslic po 9 dopisy od A před F, takže řádek bude vypadat takto -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Pro převod čísel z jedné číselné soustavy do druhé a naopak použijte níže uvedenou kalkulačku. Maximální hodnota zde může být FF - 255 .

V tomto případě je barva dána třemi hexadecimálními čísly, z nichž každé se skládá ze dvou číslic. První číslo určuje intenzitu Červené barvy, průměr zelená, poslední věc- modrý barvy. Všechna čísla mohou nabývat hodnot v rozmezí od 00 před FF(od 0 do 255). Například: zelená barva je uvedena jako #00FF00, jako červená #FF0000, modrá - jako #0000FF, jako bílá #FFFFFF, úplná absence barvy nebo černá je uvedena jako #000000 .

Ve formuláři níže můžete pro každou ze tří barev nastavit libovolné hexadecimální hodnoty a kliknutím do výstupního pole zobrazit výsledek jejich smíchání.

ČERVENÉZELENÁmodrý
0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f0 1 2 3 4 5 6 7 8 9 a b c d e f
...klikněte zde

Příklady některých hexadecimálních hodnot barev RGB: červená, modrá a zelená gradace.

Pohled kód Pohled kód Pohled kód Pohled kód Pohled kód Pohled kód
#010000 #800000 #000100 #008000 #000001 #000080
#100000 #900000 #001000 #009000 #000010 #000090
#200000 #A00000 #002000 #00A000 #000020 #0000A0
#300000 #B00000 #003000 #00B000 #000030 #0000B0
#400000 #C00000 #004000 #00C000 #000040 #0000C0
#500000 #D00000 #005000 #00D000 #000050 #0000D0
#600000 #E00000 #006000 #00E000 #000060 #0000E0
#700000 #FF0000 #007000 #00FF00 #000070 #0000FF

Určení barvy pomocí řetězcových literálů

Pro snadné použití byly některé barvy a jejich kombinace pojmenovány, které jsou rozpoznány všemi prohlížeči, a bylo možné mnoho z nich nastavit podle názvu. Níže uvedená tabulka ukazuje některé názvy barev:

Pohled název Pohled název Pohled název Pohled název
Bílý Červené oranžový Žlutá
Zelená Modrý Nachový Černá
Alice modrá starožitná bílá Aqua akvamarín
Blankyt Béžový Bisque blanchedalmond
Modrofialová Hnědý Burlywood Kadetská modrá
chartreuse Čokoláda Korál Chrpa modrá
Cornsilk Karmínový tyrkysová tmavě modrá
Darkcyan darkgoldenrod tmavě šedá tmavozelený
Darkkhaki Darkmagenta Darkolivegreen tmavě oranžová
Darkorchid tmavě červená tmavý losos Tmavomořská zelená
tmavě břidlicově modrá tmavě břidlicově šedá tmavě tyrkysová Tmavě fialová
Sytě růžová hluboká nebesky modrá Dimgray dodger modrá
Ohnivá cihla Květinově bílá lesní zelená Fuschia
Gainsboro duch bílý Zlato Zlatobýl
Šedá Zelená žlutá Medovice hotpink
Indická červená Indigo Slonová kost Khaki
Levandule Levandulový ruměnec Lemonchiffon světle modrá
světlý korál světle azurová světlochladnýrodžlutý světle zelená
světle šedá Světle růžová světlý losos Lightsea zelená
Světle nebesky modrá Světle břidlicově šedá světle ocelově modrá světle žlutá
Limetka Limetkově zelená prádlo Purpurová
kaštanové střední akvamarín středně modrá Střední orchidej
Středně fialová Středně zelená Středně břidlicověmodrá Středně jarní zelená
středně tyrkysová středně fialově červená půlnoční modrá mátový krém
mistyrose Navajobílá námořnictvo oldlace
Olivový Olivedrab oranžová červená Orchidej
palegoldenrod Bledězelená paleturquoise palefialová
papayawhip Peachpuff Peru Růžový
Švestka Modrý prášek Růžově hnědá královská modrá
sedlově hnědé zelené moře Mušle Sienna
stříbrný modrá obloha Slateblue Slategray
Sníh Springgreen ocelově modrá Opálení
Teal Bodlák rajče Tyrkysový
fialový Pšenice Bílý kouř žluto zelená
Seznam malých literálů s názvy barev je poměrně rozsáhlý a více než dostatečný. Pokud chcete nastavit barvu pozadí tak neobvyklou, že ani nemá jméno, můžete použít hexadecimální hodnotu.

Použití nástroje Safe Color Picker

Bohužel na různé platformy, s různými nastaveními systému je správná reprodukce barev problém. Jde o to, že prohlížeč se vždy snaží upravit barevnou paletu dokumentu nastavení systému a monitorovací schopnosti samomícháním barev a jejich nahrazováním. V důsledku toho někdy uživatel nevidí úplně to, co mu webmaster chtěl ukázat. Východisko z této situace se našlo v použití palety, jejíž každou barvu zaručeně stejně vykreslí všechny prohlížeče na různých platformách. Tato tzv zaručena paleta, známá také jako bezpečný paleta. Tato paleta obsahuje barvy, jejichž barevné složky nabývají následujících hodnot: 00 ,33 ,66 ,99 , CC,FF, ve všech možných 216 jejich kombinace.

FFFFFF CCCCCC 999999 666666 333333 000000 CCCC66 CCCC33 999966 999933 999900 666600 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300 99 FF00 99FF33 99CC66 99 CC00 99CC33 669900 CCFF99 99FF99 66 CC00 66CC33 669933 336600 66FF00 66FF33 33 FF00 33 CC00 339900 009900 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33 CCFFCC 99CC99 66CC66 669966 336633 003300 99FF99 66FF66 33FF66 00FF66 339933 006600 66FF99 33FF99 00FF99 33CC66 00CC66 009933 66CC99 33CC99 00CC99 339966 009966 006633 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 99 CCCC 66CCCC 339999 669999 006666 336666 66CCFF 33CCFF 00CCFF 3399 CC 0099CC 003333 99CCFF 3399 FF 0099FF 6699 CC 336699 006699 0066FF 3366 CC 0066CC 0033FF 003399 003366 6699 FF 3366FF 0000 FF 0000 CC 0033CC 000033 3333FF 3300 FF 3300 CC 3333 CC 000099 000066 9999 CC 6666FF 6666 CC 666699 333399 333366 CCCCFF 9999 FF 6666FF 6600 FF 330099 330066 9966 CC 9966FF 6600 CC 6633 CC 663399 330033 CC99FF CC66FF 9933FF 9900 FF 660099 663366 CC66FF CC33FF CC00FF 9900 CC 996699 660066 CC99CC CC66CC CC33CC CC00CC 990099 993399 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399 FF66CC FF00CC FF33CC CC6699 CC0099 990066 FF99CC FF3399 FF0099 CC0066 993366 660033 FF6699 FF3399 FF0066 CC3366 996666 663333 CC9999 CC6666 CC3333 CC0000 990033 330000 FFCCCC FF9999 FF6666 FF3333 FF0000 CC0033 FF6633 CC3300 FF3300 FF0000 CC0000 990000 FFCC99 FFCC66 FF6600 CC6633 993300 660000 FF9900 FF9933 CC9966 CC6600 996633 663300 FFCC66 FFCC00 FFCC33 9900 CC CC9933 996600 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00
Pohled kód Pohled kód Pohled kód Pohled kód Pohled kód Pohled kód

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 palců desítková soustava 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. 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, 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 zkvalitnění monitorů a rozšíření 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 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. Obvykle se barevné kódy nebo hodnoty barev používají k nastavení barvy buď pro popředí prvku (např. text, barva odkazu) nebo 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