Dobrý den, milí čtenáři tohoto blogu. Pokračuji v publikování článků v sekci "". Dnes chci mluvit o barvách v HTML a CSS kódu, vysvětlit pro ty, kteří ještě nevědí, jak je můžete nastavit, jak se tvoří, jak používat speciálně navržené programy k nalezení nebo zachycení požadované barvy a mnoho dalšího.

Otázka nastavení požadovaného odstínu může být aktuální zejména pro začínající webmastery, kdy jejich kódy uvedené ve webovém dokumentu nejsou zcela jasné (například #f3af6c) a není jasné, jak a odkud lze tyto informace převzít (odkud najít Html a CSS tabulky barev) a jak je použít k návrhu textu nebo jiného bloku webového dokumentu.

Připomínám, že jsme se již stihli seznámit se základními principy používanými v . Také jsme si již prohlédli značky a naučili jsme se mnoho a jak.

Kódy a tabulka základních barev RGB

Je celkem logické, že v hypertextovém značkovacím jazyce a kaskádových stylech existuje možnost vybarvování dokumentů, protože jinak by byly stránky velmi nudné a stejného typu. K tomu se obvykle používá model nazývaný RGB (zkratka odvozená ze tří anglických slov pro červenou, zelenou a modrou).

V modelu RGB jsou použity pouze tři barvy (je jasné, že se jedná o červenou, zelenou a modrou), z nichž každá může být reprezentována různé úrovně jas záře. Pro každý z kanálů (červený, zelený a modrý) bude možné zvolit jednu z 256 možných gradací jasu. Číslo 256 se bere z toho důvodu, že do jednoho bajtu informací lze zakódovat tolik hodnot odstínu.

Podle toho si pro náš webový dokument můžeme vybrat jakýkoli odstín obrovské množství možné (256*256*256). Chcete-li například získat černou, musíte mít všechny tři kanály barevného schématu nulová hodnota jas a pro získání bílé - červené, zelené a modré barvy musí mít maximální jas.

Zkusme nyní přijít na to, jak nastavit jas v jednotlivých kanálech a kolik možností k tomu máme?

Ve skutečnosti tam dvěma hlavními způsoby:

  1. nastavení záznamem jasu pro každý z kanálů (červený, zelený a modrý) v hexadecimálním zápisu
  2. zadáním názvu barvy do kódu webového dokumentu

Začněme komplexem a zkusme přijít na to, jak psát barvy v hexadecimálním kódu. Pokud bychom chtěli například zapsat kód pro bílou v desítkové soustavě, pak bychom dostali kód 256 256 256 a pro černou - 0 0 0. Zde je snad vše jasné.

Ale v hexadecimálním číselném systému se kromě arabských číslic používá také prvních šest písmen latinské abecedy, v tvoření čísel existuje určitá specifika. Myslím, že nemá cenu se v tom vrtat, ale pro příklad řeknu, že bílou pro Html lze nastavit takto: #ffffff a černou takto: #000000. Tito. 00 odpovídá 0 v desítkové soustavě a ff odpovídá 256.

Tito. V kódu CSS jsou pro každý barevný kanál RGB dvě hexadecimální číslice, takže položky barevné hodnoty se skládají ze šesti číslic (nebo písmen, která odpovídají hexadecimálním číslům), před kterými je znak libry „#“. Všechno je docela jednoduché.

Například ve výše uvedené tabulce pro nejjednodušší odstíny budou jejich hexadecimální položky vypadat takto:

Samozřejmě nemusíte vymýšlet a porovnávat hexadecimální kódy odstínů s těmi, které chcete vidět ve svém internetovém projektu. Barvu pro stránky si můžete vybrat v libovolném grafickém editoru (i v), kde se vám určitě zobrazí záznam tohoto odstínu v RGB formát, nebo najít html tabulka barvy a odtud zkopírujte kód, který potřebujete.

Yandex Colors - výběr barevných palet RGB ve výsledcích vyhledávání Yandex

Nechcete k tomuto účelu používat grafický editor nebo hledat tabulku s kódy? Žádný problém. Posuňte tuto stránku trochu dolů a najdete spoustu konkrétních a vybroušených programů speciálně pro práci s barvou v Html nebo CSS kódu.

Pokud vám to nevyhovuje, jednoduše jej otevřete a zadejte do vyhledávacího pole žádost s názvem tohoto odstínu, o které máte zájem (i když můžete jednoduše zadat: šedohnědá karmínová).

V důsledku toho úplně nahoře Výsledky vyhledávání, uvidíte velmi pohodlnou tabulku palet Yandex.Colors pro výběr barev pro váš web. V pravém dolním rohu této palety můžete zkopírovat hexadecimální kód odstínu, který potřebujete (před ním je mřížka), který pak zbývá pouze vložit do Správné místo váš webový dokument.

To vše je realizováno díky tzv., která je navržena tak, aby pomohla dispozičním návrhářům a projektantům.

Můžeš nastavte barvu ve vyhledávacím řádku Yandex, a to jak ve formě svého názvu, tak ve formě kódu - ve výsledku uvidíte, jak bude vypadat na obrazovce a v případě potřeby můžete získat jeho hexadecimální zápis.

Ve skutečnosti může být tento nástroj užitečný a běžní uživatelé například internet, abyste pochopili, jak bude vypadat nábytek v šedo-bur-malinově skvrnitém odstínu. Můžete se také podívat na video o používání tohoto průvodce Yandex:

Některé barvy v hypertextovém značkovacím jazyce lze specifikovat pomocí slov, například „černý“ znamená černý, „bílý“ znamená bílý atd. Ale je tu jedno upozornění. Úloha barvy je tedy možná pouze pro omezený počet z nich.

No, za prvé je asi jasné, že všech 16 milionů možných RGB vzor v žádné tabulce si nebudete moci představit odstíny pomocí slov (omrzí vás její posouvání).

Za druhé, ve validátoru W3C pro specifikaci Hypertext Markup Language 4.01 (je plně podporován všemi možné prohlížeče aktuálně) je definováno pouze 16 barev, které lze zadat v kódu Html nebo CSS slovy:

Můžete také najít mnohem podrobnější tabulky odstínů, které lze nastavit v kódu slovy, ale existuje možnost, že v některém prohlížeči se tato barva nezobrazí správně.

Kromě výše uvedené tabulky 16 základních odstínů by proto všechny ostatní barvy měly být v kódu webových dokumentů specifikovány pouze v hexadecimálním zápisu, aby se předešlo zbytečným excesům.

Používání barevných kódů a názvů v Webmasteringu

Na tento moment Všechno vnější design webové stránky ponecháno na CSS (kaskádové styly) a specifikovat kód barvy přímo v Html je extrémně vzácné, ale stále se vyskytuje. Kromě toho existují situace, kdy je z toho či onoho důvodu nemožné použít externí tabulky. css styly(například v případě vytvoření vydání).

Proto ještě uvedu příklad nastavení barev v Html, i když v tomto případě již budou použity značky, které validátor W3C nedoporučuje. Například před nastavením barvy pozadí ve značce „BODY“ prostřednictvím atributu „bgcolor“ a text byl okamžitě obarven na celé webové stránce pomocí atributu „text“.

Nastavení požadovaných odstínů by v tomto případě mohlo vypadat například takto:

Obsah dokumentu

Ve výsledku získáte webovou stránku s béžovým pozadím a tmavě modrým písmem. Než se začalo používat CSS, ke změně barvy písma jakékoli jednotlivé části textu se běžně používal tag „FONT“, který již není doporučován validátorem W3C, který obsahoval stejnojmenný atribut „color“. nastavit barvu:

část textu, kterou bylo potřeba obarvit modře

Abyste viděli výsledek napsaného kódu na obrazovce, musíte tento soubor uložit s příponou html a poté jej otevřít v libovolném prohlížeči, který vám vyhovuje.

Nyní, aby bylo rozložení vašeho webu považováno za platné, je doporučeno nastavit barvy prvků v kaskádovém stylu prostřednictvím příslušných pravidel a vlastností. Pravidla pro takové vkládání do CSS se neliší od výše popsaných.

Jak vidíte, někdy se ke zkrácení záznamu odstínu nepoužívá šest znaků, ale pouze tři, pokud se shodují pro každý kanál - „# 6c0“ místo „# 66cc00“.

Výběr barvy z palety speciálního programu nebo její zachycení z obrazovky

Jak jsem psal výše, je široce používáno barevné schéma RGB (červená, zelená, modrá). Pro každou ze tří hlavních barev je k dispozici 256 gradací - od 0 do 255 (pokud tyto hodnoty převedeme do hexadecimální číselné soustavy, dostaneme - od 00 do FF).

Protože máme tři hlavní barvy, z jejichž kombinace se tvoří všechny ostatní odstíny, pak bude hexadecimální zápis vypadat asi takto: 99FF66 (odstín zelené). Přidáním # před něj získáte kód #99FF66, který lze použít jak v Html, tak v souborech stylů. Je samozřejmé, že vy sami nemusíte všechny tyto nesmysly počítat a pamatovat si je.

K tomu můžete použít speciální program, která umožňuje vybrat požadovaný odstín na paletě (příp zachytit to z obrazovky pipetovací nástroj) a okamžitě získejte jeho kód. Možná nemáte program, ale přejděte na Yandex a zadejte název libovolné barvy do řetězce dotazu (o tom jsem psal o něco výše).

Zde je seznam programů, které vám umožní toto vše plně realizovat:


Hodně štěstí! Brzy se uvidíme na stránkách blogu

Možná vás to bude zajímat

Seznamy v Html kódu - značky UL, OL, LI a DL
Jak vložit HTML odkaz a obrázek (foto) - IMG a A tagy
Jak vytvořit hypertextový odkaz (A, Href, Target blank), jak jej otevřít v novém okně na webu a také udělat z obrázku odkaz v Html kódu
Tagy Font (obličej, velikost a barva), Blockquote a Pre jsou starší formátování textu v čistém HTML (bez Použití CSS)
Tabulky v Html – značky Table, Tr a Td a také Colspan, Cellpadding, Cellspacing a Rowspan k jejich vytvoření
Html formuláře pro web - tagy Form, Input and Select, Option, Textarea, Label a další pro tvorbu prvků webového formuláře Select, Option, Textarea, Label, Fieldset, Legend - Html tagy formuláře rozevíracího seznamu a textové pole
img- html tag pro vložení obrázku (Src), zarovnání a obtékání textem (align) a také nastavení pozadí (pozadí)
Direktivy komentářů a Doctype v Html kódu, stejně jako koncept blokových a vkládaných prvků (tagů)
Co je jazyk HTML Hypertext Markup Language a jak vypsat všechny značky ve validátoru W3C
Znaky mezer a jejich formátování kódu v Html, stejně jako speciální znaky bez mezer a další mnemotechnické pomůcky

Při vytváření Yandexu se vývojáři ujistili, že je snadné a srozumitelné.

V nastavení designu a písma není nic zbytečného, ​​takže uživatelé rychle pochopí, co je co.

Každá verze prohlížeče Yandex je navržena krásně, nejlepší specialisté se zabývají designem. Existují však uživatelé, kteří nemají rádi monotónnost. Dokonce nejvíce nádherný výhled rychle je omrzí, budou chtít „změnit situaci“, „vdechnout život“ práci s webovým prohlížečem.

Na tom není nic špatného, ​​proč jinak vývojáři zavedli funkci změny rozhraní? Aby každý, komu nevyhovuje standardem nastavené pozadí nebo ho monotónnost nudí, mohl změnit vzhled své aplikace.

Aby se něco změnilo vzhled vašeho prohlížeče Yandex, stačí vás na pár minut rozptýlit:

  • Zapněte webový prohlížeč.
  • OTEVŘENO nová karta(můžete to udělat v nastavení vedle lišty záložek).
  • Objeví se před vámi Express Panel. Musíte jít dolů do spodní části obrazovky a kliknout na ikonu "Změnit pozadí".
  • Poté se otevře seznam s různými návrhy prohlížečů, z nichž si musíte vybrat ten, který se vám nejvíce líbí. Jakmile vyberete příslušný obrázek, klikněte na tlačítko "Dokončit".

Nemusíte se starat o to, abyste pokaždé změnili pozadí – nemusíte. Nyní pokaždé, když se dostanete do „Express Panel“ (i když jste zavřeli a znovu otevřeli Yandex), užijete si příjemný obrázek. A práce s dobrou náladou je mnohem zajímavější a jednodušší!

Je možné nastavit něco „svého“ na pozadí?

Vývojáři Yandex samozřejmě nemohou potěšit každého uživatele obrázky nabízenými pro změnu pozadí. Poté, co si prohlédnete úplný seznam dostupných výkresů a nenajdete nic vhodného, ​​nezoufejte.

Takové případy poskytují tvůrci prohlížeče Yandex: můžete si stáhnout osobní obrázky dostupné ve vašem počítači. Dává plný průchod fantazii. Co by bylo například hezké, kdybyste pokaždé, když se dostanete do „Express Panelu“, viděli živý fragment svého života nebo fotku malého dítěte?

Chcete-li nastavit obrázek ze zařízení jako pozadí, musíte:

  • povolit Yandex;
  • otevřít nové podokno;
  • najděte funkci "Změnit pozadí" a klikněte na ni;
  • za posledním obrázkem je znak „+“, musíte na něj kliknout;
  • vyberte v prohlížeči fotografii, kterou chcete vidět, a stiskněte enter (Enter).

Nyní můžete nastavit absolutně jakýkoli obrázek, který se uloží až do další změny.


www.livemaster.ru

Kódy a tabulka základních barev RGB

Je celkem logické, že v hypertextovém značkovacím jazyce a kaskádových stylech existuje možnost vybarvování dokumentů, protože jinak by byly stránky velmi nudné a stejného typu. K tomu se obvykle používá model nazývaný RGB (zkratka odvozená ze tří anglických slov pro červenou, zelenou a modrou).

V modelu RGB jsou použity pouze tři barvy (je jasné, že se jedná o červenou, zelenou a modrou), z nichž každá může být reprezentována jinou úrovní jasu záře. Pro každý z kanálů (červený, zelený a modrý) bude možné zvolit jednu z 256 možných gradací jasu. Číslo 256 se bere z toho důvodu, že do jednoho bajtu informací lze zakódovat tolik hodnot odstínu.

V souladu s tím si pro náš webový dokument můžeme vybrat jakýkoli odstín z velkého množství možných (256 * 256 * 256). Například pro získání černé musí mít všechny tři kanály barevného schématu hodnotu jasu nula a pro získání bílé, červené, zelené a modré musí mít maximální jas.


Zkusme nyní přijít na to, jak nastavit jas v jednotlivých kanálech a kolik možností k tomu máme?

Ve skutečnosti tam dvěma hlavními způsoby:

  1. nastavení záznamem jasu pro každý z kanálů (červený, zelený a modrý) v hexadecimálním zápisu
  2. zadáním názvu barvy do kódu webového dokumentu

Začněme komplexem a zkusme přijít na to, jak psát barvy v hexadecimálním kódu. Pokud bychom chtěli například zapsat kód pro bílou v desítkové soustavě, pak bychom dostali kód 256 256 256 a pro černou - 0 0 0. Zde je snad vše jasné.

Ale v hexadecimálním číselném systému se kromě arabských číslic používá také prvních šest písmen latinské abecedy, v tvoření čísel existuje určitá specifika. Myslím, že nemá cenu se v tom vrtat, ale pro příklad řeknu, že bílou pro Html lze nastavit takto: #ffffff a černou takto: #000000. Tito. 00 odpovídá 0 v desítkové soustavě a ff odpovídá 256.

Tito. V kódu CSS jsou pro každý barevný kanál RGB dvě hexadecimální číslice, takže položky barevné hodnoty se skládají ze šesti číslic (nebo písmen, která odpovídají hexadecimálním číslům), před kterými je znak libry „#“. Všechno je docela jednoduché.

Například ve výše uvedené tabulce pro nejjednodušší odstíny budou jejich hexadecimální položky vypadat takto:


Samozřejmě nemusíte vymýšlet a porovnávat hexadecimální kódy odstínů s těmi, které chcete vidět ve svém internetovém projektu. Barvu pro stránky si můžete vybrat v libovolném grafickém editoru (i v bezplatném online Pixlr Editoru), kde se vám určitě zobrazí záznam tohoto odstínu ve formátu RGB, nebo si najděte Html tabulku barev a zkopírujte si kód, který potřebujete tam.

Yandex Colors - výběr barevných palet RGB ve výsledcích vyhledávání Yandex

Nechcete k tomuto účelu používat grafický editor nebo hledat tabulku s kódy? Žádný problém. Posuňte tuto stránku trochu dolů a najdete spoustu konkrétních a vybroušených programů speciálně pro práci s barvou v Html nebo CSS kódu.

Pokud vám to nevyhovuje, jednoduše otevřete Yandex a zadejte do vyhledávacího pole žádost s názvem tohoto odstínu, o které máte zájem (i když můžete jednoduše zadat: šedohnědá karmínová).

Výsledkem je, že úplně nahoře ve výsledcích vyhledávání uvidíte velmi pohodlnou tabulku palet Yandex.Colors pro výběr barev pro váš web. V pravém dolním rohu této palety můžete zkopírovat hexadecimální kód požadovaného odstínu (před ním je hash), který pak stačí vložit na správné místo ve vašem webovém dokumentu.

To vše je realizováno díky takzvanému „čaroději“ Yandex, který je navržen tak, aby pomohl návrhářům a designérům rozložení.

Můžeš nastavte barvu ve vyhledávacím řádku Yandex, a to jak ve formě svého názvu, tak ve formě kódu - ve výsledku uvidíte, jak bude vypadat na obrazovce a v případě potřeby můžete získat jeho hexadecimální zápis.

Vlastně se tento nástroj může hodit i běžným uživatelům internetu, aby například pochopili, jak bude vypadat nábytek v odstínu šedá-bur-malina-strakatý. Můžete se také podívat na video o používání tohoto průvodce Yandex:

Některé barvy v hypertextovém značkovacím jazyce lze specifikovat pomocí slov, například „černý“ znamená černý, „bílý“ znamená bílý atd. Ale je tu jedno upozornění. Úloha barvy je tedy možná pouze pro omezený počet z nich.

No, zaprvé je asi jasné, že všech 16 milionů odstínů v RGB schématu pomocí slov v žádné tabulce neznázorníte (budete unavení z toho procházení).

Za druhé, ve W3C validátoru pro specifikaci hypertextového značkovacího jazyka 4.01 (je v tuto chvíli plně podporován všemi možnými prohlížeči) je definováno pouze 16 barev, které lze specifikovat v Html nebo CSS kódu slovy:

Můžete také najít mnohem podrobnější tabulky odstínů, které lze nastavit v kódu slovy, ale existuje možnost, že v některém prohlížeči se tato barva nezobrazí správně.

Kromě výše uvedené tabulky 16 základních odstínů by proto všechny ostatní barvy měly být v kódu webových dokumentů specifikovány pouze v hexadecimálním zápisu, aby se předešlo zbytečným excesům.

Používání barevných kódů a názvů v Webmasteringu

V současné době je veškerý vnější design webových stránek vydán na milost a nemilost CSS (kaskádové styly) a uvedení barevného kódu přímo v Html je extrémně vzácné, ale stále se vyskytuje. Kromě toho existují situace, kdy je z toho či onoho důvodu nemožné použít externí šablony CSS stylů (například v případě vytvoření verze poštovní seznam předplatit).

Proto ještě uvedu příklad nastavení barev v Html, i když v tomto případě již budou použity značky, které validátor W3C nedoporučuje. Například před nastavením barvy pozadí ve značce „BODY“ prostřednictvím atributu „bgcolor“ a text byl okamžitě obarven na celé webové stránce pomocí atributu „text“.

Nastavení požadovaných odstínů by v tomto případě mohlo vypadat například takto:

Obsah dokumentu

Ve výsledku získáte webovou stránku s béžovým pozadím a tmavě modrým písmem. Než se začalo používat CSS, ke změně barvy písma jakékoli jednotlivé části textu se běžně používal tag „FONT“, který již není doporučován validátorem W3C, který obsahoval stejnojmenný atribut „color“. nastavit barvu:


část textu, kterou bylo potřeba obarvit modře

Abyste viděli výsledek napsaného kódu na obrazovce, musíte tento soubor uložit s příponou html a poté jej otevřít v libovolném prohlížeči, který vám vyhovuje.

Nyní, aby bylo rozložení vašeho webu považováno za platné, je doporučeno nastavit barvy prvků v kaskádovém stylu prostřednictvím příslušných pravidel a vlastností. Pravidla pro takové vkládání do CSS se neliší od výše popsaných.

Jak vidíte, někdy se ke zkrácení záznamu odstínu nepoužívá šest znaků, ale pouze tři, pokud se shodují pro každý kanál - „# 6c0“ místo „# 66cc00“.

ktonanovenkogo.ru

Paleta barev RGB, jak správně nastavit barvy v CSS a Html .

Jak víte, k řešení problémů s barevným designem textu se používá obecně přijímaná konstrukce. RGB(tj. Červené- Červené, Zelená- Zelená a podle toho Modrý- modrá)


Barevná paleta RGB znamená použití pouze tří barev, z nichž každá může být dobře reprezentována jinou úrovní jasu. V CSS a Html kódu lze pro každou barvu palety definovat jednu z 256 možných barevných gradací.

Pro návrh dokumentu tedy můžete použít poměrně velké množství barev - 256-256-256. Chcete-li například získat černou jako výsledek, všechny tři barvy RGB je nutné nastavit indikátor jasu na nulu a naopak, pokud je požadována bílá barva, pak je pro všechny barvy nutné nastavit maximální jas.

Podívejme se blíže na to, jak nastavit jas barvy v Html. Jas lze upravit dvěma způsoby:

  1. Nastavením barevného kódu palety pro stránku v Html kódu, definováním jasu RGB barvy pomocí hexadecimální soustavy
  2. Nastavením barev v CSS v hexadecimální číselné soustavě.

Pojďme se zabývat psaním kódu v šestnáctkové soustavě a hypertextovým značením. Pro začátek si připomeňme desítková soustava kalkul - například pokud potřebujeme bílou barvu, její kód bude vypadat takto: 256 256 256, v případě černé: 0 0 0.


Na rozdíl od desetinný kód, kde jsou pouze čísla, šestnáctková paleta obsahuje i písmena latinské abecedy. To znamená, že v tomto případě najde své místo jeho vlastní specifický systém reprezentace čísel. Například bílá je v HTML specifikována jako: #ffffff a černá jako #000000. Je snadné vidět, že zde 00 odpovídá 0 a ff odpovídá 256 (při převodu na desítkové číslo).

RGB barevná paleta Html, CSS je tedy rozdělena do kanálů, z nichž každý má přiřazeny dva hexadecimální znaky. Proto jsou všechny barvy v Html kódu sestaveny ze šesti písmen (ekvivalentní číslům) a samotných čísel. Je třeba poznamenat, že před kódem je umístěn symbol „#“.

Samozřejmě není potřeba ruční výběr barevného kódu - stačí spustit libovolný grafický editor, najít správnou barvu a zobrazit kód barvy v podrobných informacích. RGB systém. Existuje další, jednodušší možnost - paleta Html barvy s kódy. Najděte a zkopírujte si to pro sebe.

Yandex Colors - výběr barevného kódu Html v paletě RGB ve výsledcích Yandex.


Kromě jiného si můžete vybrat barevné schéma pro svůj web pomocí Yandex. Chcete-li to provést, stačí do vyhledávacího pole zadat slovo "barva" nebo název barvy, kterou potřebujete. V důsledku požadavku se paleta zobrazí ve výstupu Yandex.Colors. pomocí kterého si můžete vybrat barvu. V pravém rohu vidíte kód barvy v RGB a hexadecimální soustavě, který se používá při sestavování webového dokumentu.

Tato možnost od společnosti Yandex značně usnadňuje pracovní proces. Vše je velmi jednoduché - zadejte název barvy a získejte potřebný kód.

Je třeba poznamenat, že některé barvy v hypertextovém značení lze zcela nastavit slovem, například: "šedá" - šedá, "bílá" - bílá, "černá" - černá atd. Nastavení barvy v Html tímto způsobem je samozřejmě možné pouze pro nepříliš velkou paletu barev. Skutečně, 16 milionů barev RGB pomocí slov nelze nalézt v žádné referenční knize nebo tabulce.

W3C 4.01 Validator (Hypertext Markup) poskytuje paletu 16 základních odstínů, která vytváří tabulku barev CSS a Html, která ukazuje, které barvy lze zadat pomocí slov.


Zbývající barvy musí být specifikovány pomocí hexadecimálního kódu.

Název barev palety RGB na webových stránkách a také nahrazení barvy samotného textu pomocí atributu color, příklady a metody použití barevných kódů v CSS a Html.

Nyní, vnější design Stránky jsou stylizovány pomocí CSS (kaskádové styly), ale přesto je docela běžné najít případy, kdy je barva specifikována v HTML.

Níže je proto uveden příklad určení barev v HTML.

stránce vašeho webu

Konečným výsledkem je stránka s purpurovým písmem na zlatém pozadí.

Dříve bylo v CSS pro určení barvy textu v jedné sekci nutné napsat značku FONT (nedoporučuje W3C) a pro nastavení barvy do ní byl zahrnut atribut „color“:

text bude vybarven červeně

Abyste mohli obarvit nějaký textový prvek v barvě, kterou potřebujete, musíte napsat HTML kód pomocí značky „FONT“, která bude vypadat takto:

Text, jehož barvu písma chcete nahradit

V tuto chvíli pro získání platného rozvržení webu doporučuji při nastavování barevného kódu použít CSS. Obecně platí, že pravidla pro vkládání barevných kódů do CSS se neliší od těch, která jsou popsána výše.

www.bestseoblog.ru

Nový algoritmus pro výběr barev pro propagační karty aplikací v Yandex Launcher.

Různé služby Yandex pracují s barvami při řešení úloh rozhraní: zvýraznění informačních bloků a odpovědí objektů, řízení pozornosti a vytváření vizuální hierarchie.

Příklady použití algoritmů pro shodu barev ve vyhledávání a Yandex.Music

V závislosti na úloze může shoda barev vyžadovat složité výpočty. Stává se však, že dosažení požadovaného výsledku je mnohem jednodušší.

Máme propagační karty pro aplikace v Yandex Launcher: hodnocení, popis a tlačítko "Instalovat". Jedná se o kontextová doporučení – otevírají se v horní části seznamu aplikací nebo ve složce na ploše.

Prvotní implementace

Barva pozadí karty byla vybrána automaticky na základě ikony, tlačítko bylo průsvitně bílé. Algoritmus se pokusil určit hlavní barvu ikony analýzou pixelů barevný tón. Tento přístup ne vždy poskytoval krásný výsledek, měl nevýhody:

  • nesprávná definice barev;
  • "špinavé" barvy v důsledku průměrování;
  • nudná tlačítka, nudné karty.

Příklady problémových karet

Co jsi vlastně chtěl

Karta měla být skutečným pokračováním ikony a barvy měly být syté a jasné. Chtěl jsem navodit pocit, že karta byla pečlivě vyrobena ručně, a ne vyklouzlo něco nedbale generovaného automaticky.

Vždy to chcete udělat krásnější, ale zdroje nejsou neomezené. Nebylo plánováno přidělit tým, který by napsal zázračnou knihovnu pro určování barev. Úkolem je tedy vylepšit algoritmus pro určování barev s minimálním úsilím, přijít na to, jak krásně vybarvit kartu, aniž byste museli vymýšlet vesmírnou loď.

V sobotu jsem oprášil editor kódu, odkryl HTML5 a Canvas a začal vymýšlet. V pondělí přišel do týmu s nabídkou.

Nový algoritmus detekce barev

Krok 1. Bereme ikonu. Vyhazujeme bílé, černé a průhledné pixely.

Ikona zdroje → Čtverec filtrovaných pixelů

Krok 2 Výsledný obrázek zmenšíme na velikost 2 × 2 pixely (s vypnutým vyhlazováním). V důsledku toho získáme čtyři barvy ikony. Pokud je původní obrázek homogenní, lze je opakovat - to je v pořádku.

Výsledek po druhém kroku. Ikona zdroje → Barvy

Vyhlazovali jsme anti-aliasing, aby se barvy nemíchaly, „nešpinily“.

Ve skutečnosti to dopadá takto: čtverec je rozdělen na čtyři části, z nichž vezmeme průměrný pixel horní řádek každé čtvrtletí. Při implementaci je vše jednoduché: nepotřebujeme ani skutečný downsample obrázek a obecně pracujeme s grafikou. Pixely s požadovanou pozici vezmeme z jednorozměrného pole získaného po prvním kroku.

Krok 3 Téměř vše je připraveno. Zůstává docela málo: dostaneme výsledné barvy, převedeme do HSL, seřadíme podle světlosti (L). Kartičku malujeme.

Světelné schéma:

  • pozadí - nejsvětlejší barva;
  • tlačítko - nejblíže ke světlu;
  • text je nejtmavší.

Tmavé schéma (pokud jsou dvě nebo více barev tmavé):

  • pozadí je nejvíc tmavá barva;
  • tlačítko - nejblíže tmě;
  • text je nejsvětlejší.

Při použití barev zkontrolujte kontrast: Rozdíl ve světlosti mezi pozadím a tlačítkem ≥ 20; mezi pozadím a textem ≥ 60. Pokud se neshoduje, opravíme to.

Přijaté karty. Ikona zdroje → Barvy → Karta

A několik dalších příkladů karet:

Výsledek

Získali jsme barevné karty, ze skutečných barev ikony, bez „špinavých“ nečistot. Díky použití více barev působí karta mnohem živěji. Je obzvláště příjemné, že s jednotným pozadím ikony se karta stává jejím přímým pokračováním: hranice mezi nimi není vůbec patrná.

A co je nejdůležitější: dva dny po návrhu nového algoritmu byla první implementace již dostupná v dev buildu. Testovali jsme to v týmu, nastavili jsme prahové hodnoty pro filtr v prvním kroku a poskytli jsme speciální případy:

  • ikona jedné barvy - pozadí trochu ztmavte, aby se neslévalo;
  • ikona s pozadím - podívejte se na pixely kolem okrajů; pokud jsou všechny stejné, nastavte stejné pozadí karty.

Upravený algoritmus je součástí příští verze. Zvláštní poděkování patří Dimovi Ovcharovovi, vedoucímu vývojového týmu Yandex Launcher, za jeho zájem, touhu a trpělivost. Na závěr další příklady.