Barva transparentní černá. HTML výukový program

Tato stránka obsahuje tabulku s klíčovými slovy, která lze použít k označení barev v takových jazycích webových vývojářů, jako jsou: HTML, CSS, JavaScript, Flash atd.

Ve starých specifikacích pro koncern WC3 bylo specifikováno pouze 16 klíčových slov, s jejichž pomocí se nastavovaly barvy v HTML a CSS. V dalších modernějších specifikacích bylo přidáno dalších 130 klíčových slov pro označení názvů barev. Následující tabulka obsahuje názvy barev a hexadecimální a RGB kódy, kterým odpovídají.

Podle pravidel CSS se v názvech barev nerozlišují velká a malá písmena. Položky barev IndianRed a indianred jsou ekvivalentní.

Za zmínku také stojí, že ze 146 klíčových slov v tabulce je v ní ve skutečnosti méně barev. Důvodem je, že některá klíčová slova odkazují na stejnou barvu. Názvy Gray a Grey tedy představují 50% kód šedé barvy #808080 a slovo Magenta je synonymem pro HTML barvu Fuchsia, odpovídající hexadecimálnímu kódu #FF00FF. Synonymní jsou také slova Aqua a Cyan, odpovídají kódu #00FFFF.

Barevný modul CSS podrobně popisuje hodnoty, které umožňují autorům definovat barvy a neprůhlednost prvků html a také hodnoty vlastnosti color.

vlastnost barvy

1. Prioritní barvy: vlastnost barev

Vlastnost určuje barvu písma pomocí různých systémů vykreslování barev. Vlastnost popisuje barvu textového obsahu prvku. Kromě toho se používá k poskytnutí potenciální nepřímé hodnoty (currentColor) pro jakékoli další vlastnosti, které přijímají hodnoty barev.

Nemovitost se dědí.

2. Hodnoty barev

2.1. Hlavní klíčová slova

Seznam hlavních klíčových slov obsahuje následující významy:

V názvech barev se nerozlišují velká a malá písmena.

Syntax

Barva: modrozelená;

2.2. Číselné hodnoty barev

2.2.1. Barvy modelu RGB

Hexadecimální formát hodnoty RGB je znak #, za kterým bezprostředně následují tři nebo šest hexadecimálních znaků. Třímístný zápis RGB #rgb se převede do šestimístného tvaru #rrggbb zkopírováním číslic namísto přidáváním nul. Například #fb0 se rozšíří na #ffbb00 . Tím je zajištěno, že bílá #ffffff může být specifikována v krátkém záznamu #fff, a odstraní se všechny závislosti na barevné hloubce displeje.

Formát hodnoty RGB ve funkčním zápisu je rgb(, za nímž následuje seznam tří číselných hodnot oddělených čárkami (buď tři celočíselné hodnoty nebo tři procentuální hodnoty), za nimiž následuje symbol). Hodnota celého čísla 255 odpovídá 100 % a F nebo FF v hexadecimálním zápisu:

Rgb(255,255,255) = rgb(100 %, 100 %, 100 %) = #FFF

Kolem číselných hodnot jsou povoleny mezery.

Chuťové vjemy na webu bohužel zatím nelze zobrazovat. To se ale dá plně kompenzovat pomocí barev. Koneckonců, html barvy umožňují zobrazit jakýkoli z milionů odstínů. tak" barevné tužky V jeho sadě jich je mnohem víc než sedm.

Barevné schéma v html

V html lze barvu zadat v několika formátech:

1. Jako hexadecimální hodnota – je použit kód uvedený v hexadecimální číselné soustavě. Takové barevné kódy v html se skládají ze tří párů hexadecimálních čísel. Každý pár je zodpovědný za nasycení odstínu svou primární barvou:

• První číselný pár je zodpovědný za červenou barvu;
• Druhý pár je pro obsah zelené barvy;
• Ten druhý je pro svůj modrý obsah.

Na začátek kódu (před čísly) je umístěna značka hash. Toto je hexadecimální kód barvy. Kromě čísel od 1 do 9 tento číselný systém používá písmena latinské abecedy (A, B, C, D, E, F).

Například kód bílé barvy v html bude vypadat jako #FFFFFF:

2. Klíčové slovo – HTML aktuálně podporuje asi 147 klíčových slov. Ale ne všechna tato slova jsou jedinečná. Některé z nich odkazují na stejný barevný odstín.

Šedá barva je reprezentována dvěma klíčovými slovy: šedá a šedá . Jejich hexadecimální kód (HEX) je dán stejnou hodnotou #808080.

Příklad:

#808080

3. Ve formátu RGB - toto kódování barev v html je založeno na použití tří hodnot, nastavených v rozsahu od 0 do 255. Každá z nich určuje sytost odstínu jednou ze základních barev:

• R – červená (červená);
• G – zelená (zelená);
• B – modrá (modrá).

Číslo barvy ve formátu RGB se zapisuje v následujícím tvaru: rgb(0, 210, 100).

barva pozadí:rgb(100,186,43)

4. Ve formátu RGBA - jde o vylepšený formát RGB, kde čtvrtá hodnota určuje průhlednost barvy jako desetinný zlomek od 0 do 1.

Příklad použití:

barva pozadí:rgba(100,86,143,0,2)

barva pozadí:rgba(100,86,143,0,5)

barva pozadí:rgba(100,86,143,0,8)

barva pozadí:rgba(100,86,143,1)

HTML barevné tabulky a generátory barev

S tak širokou škálou formátů nastavení barev je snadné se splést. Proto byla vynalezena speciální tabulka barev. Poskytuje 147 klíčových názvů barevných odstínů s kódy shody ve všech hlavních barevných standardech. Každé pole je navíc vybaveno lištou pro vizuální výběr barev. Jedna z těchto tabulek je uvedena na webu colorscheme.ru:

Ale i s tímto strukturováním sladění může být výběr správného odstínu obtížný. A není pravda, že tabulka barevných kódů bude obsahovat ten, který potřebujete.

Abychom tuto překážku obešli a co nejvíce usnadnili výběr správného odstínu, byly vyvinuty interaktivní webové služby. Jejich uživatelské rozhraní se může od sebe mírně lišit.

Na webu html-color-codes.info generátor barev vypadá takto:

A v rámci služby color-picker.appsmaster.co je tento nástroj implementován trochu jinak:

Sytost každé barvy v generátoru se nastavuje pomocí speciálních posuvníků. Vizuálně je odstín zobrazen barvou rámu a obdélníku na levé straně. Ve 3 polích dole je zobrazen kód barvy v základních formátech.

Ale generátor barev je k dispozici nejen na specializovaných stránkách. Téměř všechny grafické editory jsou vybaveny podobným nástrojem. Například Photoshop:

Bezpečnostní opatření při práci s barvou

A to bylo dávno, v době grafických karet, které podporovaly pouze 256 barev. V oněch vzdálených dobách mohly operační systémy zobrazit pouze určitý počet osmibitových odstínů bez zkreslení.

Poté byla vyvinuta skvělá tabulka bezpečných barev. Stanovila 216 odstínů, které bylo možné zobrazit bez zkreslení v kterémkoli z tehdejších prohlížečů. A dodnes toto" skvělý rukopis» je stále k dispozici na některých zdrojích:

V dnešní době se vše změnilo. Zcela se tedy ruší všechna bezpečnostní pravidla při práci s barvou v html. Koneckonců, moderní počítačový hardware podporuje více než 16 milionů různých odstínů. A 216 bezpečných barev upadlo v zapomnění.

Tyto údaje plně potvrzují statistiky. Soudě podle toho, v roce 2014 mělo pouze 0,5 % uživatelů počítače, které podporují pouze 256 odstínů.

Základy barevné harmonie

Ne každý z nás je obdařen přirozeným harmonickým smyslem pro chuť. Proto může být výběr správné barvy skutečným problémem. Ale chvála vědě, dokonce se jí podařilo popsat barevnou harmonii v podobě několika schémat. Všechny jsou založeny na použití barevného kruhu. Schémata pro harmonický výběr barev v html.

Existuje několik způsobů, jak reprezentovat barvu ve webovém designu.

HEX je hexadecimální systém reprezentace barev založený na základu 16. Pro tento systém se k doplnění digitálního čísla do 16 používají arabské desetinné číslice od 0 do 9 a latinská písmena od A do F. Pro webdesign 16 primárních (klíčových) barev se používá tzv. hexadecimální kód barvy #RRGGBB, kde každý pár odpovídá za svůj podíl barvy: RR – červená, GG – zelená a BB – modrá. Každá barevná frakce se pohybuje od 00 do FF.

Dvě další reprezentace barvy ve webovém designu jsou: ve formě RGB(*,*,*), kde každý „*“ zlomek barvy je reprezentován desetinnými číslicemi od 0 do 255 a názvy barev v angličtině.

Při vytváření barevného obrázku je hlavním problémem správná reprodukce barev na různých typech počítačů, monitorů a prohlížečů. Pokud prohlížeč nedokáže správně zobrazit barvu, vybere podobnou nebo smíchá několik barev. A někdy se dá nahradit nějakou úplně jinou barvou.

Tabulka 16 základních barev, které se používají ve všech prohlížečích

Tabulka fialová barvy a její odstíny

Tabulka šedá barvy a její odstíny

Barvu v CSS lze nastavit různými způsoby:

• jménem,
• 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í zadání některých barev pro prvky podle názvu. Tato tabulka obsahuje některá klíčová slova (anglické názvy barev), která se používají k určení vlastností barev, kódu RGB, hexadecimálního kódu (HEX) a kódu HSL.

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

Tento kód funguje takto:

Nastavení barev pomocí RGB

RGB je aditivní barevný model. v angličtině přidání- přídavek. 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če.

Jděte k věci.

Chcete-li nastavit vlastnosti v tomto formátu, použijte 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é, zde je 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 pro bloky vytvořené tagem

byly zobrazeny v požadované velikosti: 240px na 40px. Vlastnosti line-height přiřadíme hodnotu 40px, tedy rovnou výšce bloku, to vám umožní zobrazit text v bloku

ve vertikálním středu. Text vycentrujeme vodorovně pomocí pravidla ( zarovnání textu: na střed ;).

Dále v kódu nastavíme 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 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.

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

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 indikátor sytosti pohybuje směrem k 0 %, barva se stává matnější a bledne 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 % označují černou (žádné světlo) a bílou (přeexponovanou) barvu 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.

Sdílejte na Facebooku Podíl

Sdílejte na TwitteruTweetujte

Sdílet na Google Plus Podíl

Sdílet na Pinterestu Podíl

Odeslat email Mail