Dobrý deň, milí čitatelia blogu. Pokračujem v uverejňovaní článkov v sekcii "". Dnes chcem hovoriť o farbách v kóde HTML a CSS, vysvetliť pre tých, ktorí ešte nevedia, ako ich môžete nastaviť, ako sa tvoria, ako používať programy špeciálne navrhnuté na vyhľadávanie alebo zachytenie požadovanej farby atď. viac.

Otázka nastavenia požadovaného odtieňa môže byť aktuálna najmä pre začínajúcich webmasterov, keď ich kódy uvedené vo webovom dokumente nie sú úplne jasné (napríklad #f3af6c) a nie je jasné, ako a odkiaľ možno tieto informácie prevziať (odkiaľ nájsť tabuľky farieb Html a CSS) a ako ich použiť na návrh textu alebo akéhokoľvek iného bloku webového dokumentu.

Pripomínam, že sme sa už stihli zoznámiť so základnými princípmi používanými v . Tiež sme si už prezreli značky a naučili sme sa veľa a ako.

Kódy a tabuľka základných farieb RGB

Je celkom logické, že v hypertextovom značkovacom jazyku a kaskádových štýloch existuje možnosť vyfarbovania dokumentov, pretože inak by boli stránky veľmi nudné a rovnakého typu. Na tento účel sa zvyčajne používa model nazývaný RGB (skratka odvodená z troch anglických slov pre červenú, zelenú a modrú).

V modeli RGB sú použité iba tri farby (je jasné, že ide o červenú, zelenú a modrú), z ktorých každá môže byť reprezentovaná rôzne úrovne jas žiary. Pre každý z kanálov (červený, zelený a modrý) bude možné zvoliť jednu z 256 možných gradácií jasu. Číslo 256 sa používa z toho dôvodu, že do jedného bajtu informácií je možné zakódovať toľko hodnôt odtieňov.

Podľa toho si pre náš webový dokument môžeme vybrať akýkoľvek odtieň obrovské množstvo možné (256*256*256). Napríklad, ak chcete získať čiernu, musíte mať všetky tri kanály farebnej schémy nulová hodnota jas a na získanie bielej - červenej, zelenej a modrej farby musia mať maximálny jas.

Skúsme teraz prísť na to, ako nastaviť jas v každom kanáli a koľko možností na to máme?

V skutočnosti tam dva hlavné spôsoby:

1. nastavenie zaznamenaním jasu pre každý z kanálov (červený, zelený a modrý) v hexadecimálnom formáte
2. úlohu zadaním názvu farby do kódu webového dokumentu

Začnime komplexom a skúsme prísť na to, ako písať farby v hexadecimálnom kóde. Ak by sme chceli napríklad zapísať kód pre bielu v desiatkovej sústave, dostali by sme kód 256 256 256 a pre čiernu - 0 0 0. Tu je snáď všetko jasné.

Ale v systéme hexadecimálnych čísel sa okrem arabských číslic používa aj prvých šesť písmen latinskej abecedy, no, pri tvorbe čísel existuje špecifickosť. Myslím, že nemá cenu sa v tom vŕtať, ale pre príklad poviem, že bielu pre Html možno nastaviť takto: #ffffff a čiernu takto: #000000. Tie. 00 zodpovedá 0 v desiatkovej sústave a ff zodpovedá 256.

Tie. V kóde CSS sú pre každý farebný kanál RGB dve hexadecimálne číslice, takže položky hodnoty farby pozostávajú zo šiestich číslic (alebo písmen, ktoré zodpovedajú hexadecimálnym číslam), pred ktorými je znak libry „#“. Všetko je celkom jednoduché.

Napríklad vo vyššie uvedenej tabuľke pre najjednoduchšie odtiene budú ich hexadecimálne položky vyzerať takto:

Prirodzene, nie ste povinní vymýšľať a porovnávať hexadecimálne kódy odtieňov s tými, ktoré chcete vidieť vo svojom internetovom projekte. Farbu stránky si môžete vybrať v akomkoľvek grafickom editore (aj v), kde sa vám určite zobrazí záznam tohto odtieňa v RGB formát, alebo nájsť html tabuľka farby a odtiaľ skopírujte potrebný kód.

Farby Yandex - výber farebných paliet RGB vo výsledkoch vyhľadávania Yandex

Na tento účel ho nechcete použiť grafický editor alebo hľadať tabuľku s kódmi? Žiaden problém. Posuň sa po tejto stránke trochu nižšie a nájdeš množstvo špecifických a prebrúsených programov špeciálne pre prácu s farbami v Html alebo CSS kóde.

Ak vám to nevyhovuje, jednoducho ho otvorte a zadajte do vyhľadávacieho panela žiadosť s názvom tohto odtieňa, o ktoré máte záujem (aj keď môžete jednoducho zadať: šedo-hnedá karmínová).

V dôsledku toho na samom vrchole Výsledky vyhľadávania, uvidíte veľmi pohodlnú tabuľku palety Yandex.Colors na výber farieb pre vaše stránky. V pravom dolnom rohu tejto palety môžete skopírovať hexadecimálny kód požadovaného odtieňa (pred ním je mriežka), ktorý potom zostáva už len vložiť do Správne miesto váš webový dokument.

To všetko je realizované vďaka tzv., ktorá je navrhnutá tak, aby pomohla dispozičným dizajnérom a dizajnérom.

Môžeš nastaviť farbu vo vyhľadávacom riadku Yandex, a to ako vo forme názvu, tak aj vo forme kódu – vďaka tomu uvidíte, ako bude vyzerať na obrazovke a v prípade potreby získate jeho hexadecimálny zápis.

V skutočnosti môže byť tento nástroj užitočný a bežných používateľov napríklad internet, aby ste pochopili, ako bude vyzerať nábytok v šedo-bur-malinovo-škvrnitom odtieni. Môžete si tiež pozrieť video o používaní tohto sprievodcu Yandex:

Niektoré farby v hypertextovom značkovacom jazyku možno špecifikovať pomocou slov, napríklad „čierna“ znamená čiernu, „biela“ znamená bielu atď. Je tu však jedna výhrada. Úloha farby je preto možná len pre obmedzený počet z nich.

No, po prvé, je asi jasné, že všetkých 16 miliónov možných RGB vzor v žiadnej tabuľke si nebudete vedieť predstaviť odtiene pomocou slov (omrzí vás rolovanie).

Po druhé, vo validátore W3C pre špecifikáciu jazyka hypertextových značiek 4.01 (je plne podporovaná všetkými možné prehliadače momentálne) je definovaných len 16 farieb, ktoré je možné špecifikovať v Html alebo CSS kóde slovami:

Môžete nájsť aj oveľa podrobnejšie tabuľky odtieňov, ktoré sa dajú v kóde nastaviť slovom, no je tu možnosť, že v niektorom prehliadači sa táto farba nezobrazí správne.

Preto okrem vyššie uvedenej tabuľky 16 základných odtieňov by všetky ostatné farby mali byť v kóde webových dokumentov špecifikované len v hexadecimálnom zápise, aby sa predišlo zbytočným excesom.

Používanie farebných kódov a mien pri webmasteringu

Na tento moment všetky vonkajší dizajn internetové stránky ponechané na CSS (kaskádové štýly) a špecifikovanie farebného kódu priamo v Html je extrémne zriedkavé, ale stále sa vyskytuje. Okrem toho existujú situácie, keď z jedného alebo druhého dôvodu nie je možné použiť externé tabuľky. css štýly(napríklad v prípade vytvárania vydania).

Preto ešte uvediem príklad nastavenia farieb v Html, aj keď v tomto prípade už budú použité značky, ktoré validátor W3C neodporúča. Napríklad pred nastavením farby pozadia v značke „BODY“ prostredníctvom atribútu „bgcolor“ a text bol okamžite zafarbený na celej webovej stránke pomocou atribútu „text“.

Nastavenie požadovaných odtieňov v tomto prípade môže vyzerať napríklad takto:

Obsah dokumentu

V dôsledku toho získate webovú stránku s béžovým pozadím a tmavomodrým písmom. Predtým, ako sa začalo používať CSS, na zmenu farby písma ktorejkoľvek jednotlivej časti textu sa bežne používala značka „FONT“, ktorá už nie je odporúčaná validátorom W3C, ktorá obsahovala atribút „color“ s rovnakým názvom. nastaviť farbu:

časť textu, ktorú bolo potrebné zafarbiť na modro

Ak chcete vidieť výsledok napísaného kódu na obrazovke, musíte tento súbor uložiť s príponou html a potom ho otvoriť v ľubovoľnom vhodnom prehliadači.

Teraz sa odporúča, aby sa rozloženie vašej stránky považovalo za platné nastaviť farby prvkov v kaskádovom štýle prostredníctvom príslušných pravidiel a vlastností. Pravidlá pre takéto vkladanie v CSS sa nelíšia od pravidiel opísaných vyššie.

Ako vidíte, niekedy sa na skrátenie záznamu odtieňa nepoužíva šesť znakov, ale iba tri, ak sa zhodujú pre každý kanál - „# 6c0“ namiesto „# 66cc00“.

Výber farby z palety špeciálneho programu alebo jej zachytenie z obrazovky

Ako som napísal vyššie, farebná schéma RGB (červená, zelená, modrá) je široko používaná. Pre každú z troch hlavných farieb je k dispozícii 256 gradácií - od 0 do 255 (ak tieto hodnoty preložíme do hexadecimálneho číselného systému, dostaneme - od 00 do FF).

Pretože máme tri hlavné farby, z ktorých kombinácie sa vytvoria všetky ostatné odtiene, potom bude hexadecimálny záznam vyzerať asi takto: 99FF66 (odtieň zelenej). Pridaním # pred neho získate kód #99FF66, ktorý je možné použiť v Html aj v súboroch štýlov. Je samozrejmé, že vy sami nemusíte počítať a pamätať si všetky tieto nezmysly.

Na to môžete použiť špeciálny program, ktorá vám umožňuje vybrať požadovaný odtieň na palete (príp zachytiť ho z obrazovky pipetovací nástroj) a okamžite získajte jeho kód. Možno nemáte program, ale prejdite na Yandex a zadajte názov ľubovoľnej farby do reťazca dotazu (o tom som písal trochu vyššie).

Tu je zoznam programov, ktoré vám umožnia plne si toto všetko uvedomiť:

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Možno vás bude zaujímať

Zoznamy v Html kóde - značky UL, OL, LI a DL
Ako vložiť HTML odkaz a obrázok (foto) - IMG a A tagy
Ako vytvoriť hypertextový odkaz (A, Href, Target blank), ako ho otvoriť v novom okne na stránke a tiež urobiť z obrázku odkaz v Html kóde
Značky Font (Face, Size and Color), Blockquote a Pre sú staré formátovanie textu v čistom HTML (bez Použitie CSS)
Tabuľky v Html – značky Table, Tr a Td, ako aj Colspan, Cellpadding, Cellspacing a Rowspan na ich vytvorenie
Html formuláre pre web - tagy Form, Input and Select, Option, Textarea, Label a iné na vytváranie prvkov webového formulára Select, Option, Textarea, Label, Fieldset, Legend – Html tagy formulára rozbaľovacieho zoznamu a textové pole
img- html tag na vloženie obrázka (Src), zarovnanie a zalomenie textom (align), ako aj nastavenie pozadia (pozadie)
Direktívy komentárov a Doctype v kóde Html, ako aj koncept blokových a vložených prvkov (tagov)
Čo je HTML Hypertext Markup Language a ako vypísať zoznam všetkých značiek vo validátore W3C
Medzery a ich formátovanie kódu v Html, ako aj špeciálne znaky bez medzier a iné mnemotechnické pomôcky

Pri vytváraní Yandexu sa vývojári ubezpečili, že je ľahké a zrozumiteľné.

V dizajne a nastaveniach písma nie je nič zbytočné, takže používatelia môžu rýchlo pochopiť, čo je čo.

Každá verzia prehliadača Yandex je navrhnutá krásne, najlepší špecialisti sa zaoberajú dizajnom. Existujú však používatelia, ktorí nemajú radi monotónnosť. Dokonca najviac nádherný výhľad rýchlo sa začnú nudiť, budú chcieť „zmeniť situáciu“, „vdýchnuť život“ práci s webovým prehliadačom.

Na tom nie je nič zlé, inak prečo vývojári zaviedli funkciu zmeny rozhrania? Aby každý, komu nevyhovuje štandardom nastavené pozadie alebo ho nudí monotónnosť, mohol zmeniť vzhľad svojej aplikácie.

Aby sa niečo zmenilo vzhľad vášho prehliadača Yandex, stačí vás na pár minút rozptýliť:

• Zapnite webový prehliadač.
• OTVORENÉ Nová karta(môžete to urobiť v nastaveniach vedľa lišty so záložkami).
• Pred vami sa zobrazí panel Express. Musíte ísť nadol do spodnej časti obrazovky a kliknúť na ikonu „Zmeniť pozadie“.
• Potom sa otvorí zoznam s rôznymi dizajnmi prehliadača, z ktorých si musíte vybrať ten, ktorý sa vám najviac páči. Po výbere príslušného obrázka kliknite na tlačidlo „Dokončiť“.

Nemusíte sa báť zakaždým meniť pozadie – nemusíte. Teraz zakaždým, keď sa dostanete do „Expresného panela“ (aj keď ste zatvorili a znova otvorili Yandex), užijete si príjemný obraz. A práca s dobrou náladou je oveľa zaujímavejšia a jednoduchšia!

Je možné nastaviť niečo „svoje“ na pozadí?

Samozrejme, vývojári Yandex nemôžu potešiť každého používateľa obrázkami ponúkanými na zmenu pozadia. Po prezretí celého zoznamu dostupných kresieb a nenájdete nič vhodné, nezúfajte.

Takéto prípady poskytujú tvorcovia prehliadača Yandex: môžete si stiahnuť osobné obrázky dostupné vo vašom počítači. Dáva naplno priechod fantázii. Čo by bolo napríklad pekné, keby ste zakaždým, keď sa dostanete do „Express Panel“, videli živý fragment svojho života alebo fotografiu malého dieťaťa?

Ak chcete nastaviť obrázok z vášho zariadenia ako pozadie, musíte:

• povoliť Yandex;
• otvorte nové podokno;
• nájdite funkciu "Zmeniť pozadie" a kliknite na ňu;
• za posledným obrázkom je znak „+“, musíte naň kliknúť;
• vyberte v prehliadači fotografiu, ktorú chcete vidieť, a stlačte enter (Enter).

Teraz môžete nastaviť úplne akýkoľvek obrázok, ktorý sa uloží až do ďalšej zmeny.

www.livemaster.ru

Kódy a tabuľka základných farieb RGB

Je celkom logické, že v hypertextovom značkovacom jazyku a kaskádových štýloch existuje možnosť vyfarbovania dokumentov, pretože inak by boli stránky veľmi nudné a rovnakého typu. Na tento účel sa zvyčajne používa model nazývaný RGB (skratka odvodená z troch anglických slov pre červenú, zelenú a modrú).

V modeli RGB sú použité iba tri farby (je jasné, že ide o červenú, zelenú a modrú), z ktorých každá môže byť reprezentovaná inou úrovňou jasu žiary. Pre každý z kanálov (červený, zelený a modrý) bude možné zvoliť jednu z 256 možných gradácií jasu. Číslo 256 sa používa z toho dôvodu, že do jedného bajtu informácií je možné zakódovať toľko hodnôt odtieňov.

V súlade s tým si pre náš webový dokument môžeme vybrať akýkoľvek odtieň z veľkého množstva možných (256 * 256 * 256). Napríklad na získanie čiernej farby musia mať všetky tri kanály farebnej schémy hodnotu jasu nula a na získanie bielej, červenej, zelenej a modrej musia mať maximálny jas.

Skúsme teraz prísť na to, ako nastaviť jas v každom kanáli a koľko možností na to máme?

V skutočnosti tam dva hlavné spôsoby:

1. nastavenie zaznamenaním jasu pre každý z kanálov (červený, zelený a modrý) v hexadecimálnom formáte
2. úlohu zadaním názvu farby do kódu webového dokumentu

Začnime komplexom a skúsme prísť na to, ako písať farby v hexadecimálnom kóde. Ak by sme chceli napríklad zapísať kód pre bielu v desiatkovej sústave, dostali by sme kód 256 256 256 a pre čiernu - 0 0 0. Tu je snáď všetko jasné.

Ale v systéme hexadecimálnych čísel sa okrem arabských číslic používa aj prvých šesť písmen latinskej abecedy, no, pri tvorbe čísel existuje špecifickosť. Myslím, že nemá cenu sa v tom vŕtať, ale pre príklad poviem, že bielu pre Html možno nastaviť takto: #ffffff a čiernu takto: #000000. Tie. 00 zodpovedá 0 v desiatkovej sústave a ff zodpovedá 256.

Tie. V kóde CSS sú pre každý farebný kanál RGB dve hexadecimálne číslice, takže položky hodnoty farby pozostávajú zo šiestich číslic (alebo písmen, ktoré zodpovedajú hexadecimálnym číslam), pred ktorými je znak libry „#“. Všetko je celkom jednoduché.

Napríklad vo vyššie uvedenej tabuľke pre najjednoduchšie odtiene budú ich hexadecimálne položky vyzerať takto:

Prirodzene, nie ste povinní vymýšľať a porovnávať hexadecimálne kódy odtieňov s tými, ktoré chcete vidieť vo svojom internetovom projekte. Farbu stránky si môžete vybrať v akomkoľvek grafickom editore (aj v bezplatnom online Pixlr Editore), kde sa vám určite zobrazí záznam tohto odtieňa vo formáte RGB, alebo si nájdite Html tabuľku farieb a skopírujte si potrebný kód z tam.

Farby Yandex - výber farebných paliet RGB vo výsledkoch vyhľadávania Yandex

Nechce sa vám na tento účel používať grafický editor alebo hľadať tabuľku s kódmi? Žiaden problém. Posuň sa po tejto stránke trochu nižšie a nájdeš množstvo špecifických a prebrúsených programov špeciálne pre prácu s farbami v Html alebo CSS kóde.

Ak vám to nevyhovuje, jednoducho otvorte Yandex a zadajte do vyhľadávacieho poľa žiadosť s názvom tohto odtieňa, o ktoré máte záujem (aj keď môžete jednoducho zadať: šedo-hnedá karmínová).

Výsledkom je, že v hornej časti výsledkov vyhľadávania uvidíte veľmi pohodlnú tabuľku palety Yandex.Colors na výber farieb pre vašu stránku. V pravom dolnom rohu tejto palety môžete skopírovať hexadecimálny kód požadovaného odtieňa (pred ním je hash), ktorý potom stačí vložiť na správne miesto vo vašom webovom dokumente.

To všetko sa realizuje vďaka takzvanému „čarodejníkovi“ Yandex, ktorý je navrhnutý tak, aby pomohol dizajnérom a dizajnérom rozloženia.

Môžeš nastaviť farbu vo vyhľadávacom riadku Yandex, a to ako vo forme názvu, tak aj vo forme kódu – vďaka tomu uvidíte, ako bude vyzerať na obrazovke a v prípade potreby získate jeho hexadecimálny zápis.

V skutočnosti sa tento nástroj môže hodiť napríklad aj bežným používateľom internetu, aby pochopili, ako bude vyzerať nábytok v šedo-bur-malinovo-škvrnitom odtieni. Môžete si tiež pozrieť video o používaní tohto sprievodcu Yandex:

Niektoré farby v hypertextovom značkovacom jazyku možno špecifikovať pomocou slov, napríklad „čierna“ znamená čiernu, „biela“ znamená bielu atď. Je tu však jedna výhrada. Úloha farby je preto možná len pre obmedzený počet z nich.

Po prvé, je asi jasné, že pomocou slov v žiadnej tabuľke nebudete môcť reprezentovať všetkých 16 miliónov odtieňov v schéme RGB (budete unavení z toho, že ju budete posúvať).

Po druhé, vo validátore W3C pre špecifikáciu hypertextového značkovacieho jazyka 4.01 (v súčasnosti ho plne podporujú všetky možné prehliadače) je definovaných iba 16 farieb, ktoré je možné špecifikovať v Html alebo CSS kóde slovami:

Môžete nájsť aj oveľa podrobnejšie tabuľky odtieňov, ktoré sa dajú v kóde nastaviť slovom, no je tu možnosť, že v niektorom prehliadači sa táto farba nezobrazí správne.

Preto okrem vyššie uvedenej tabuľky 16 základných odtieňov by všetky ostatné farby mali byť v kóde webových dokumentov špecifikované len v hexadecimálnom zápise, aby sa predišlo zbytočným excesom.

Používanie farebných kódov a mien pri webmasteringu

V súčasnosti je všetok vonkajší dizajn webových stránok vydaný na milosť a nemilosť CSS (kaskádové štýly) a špecifikovanie farebného kódu priamo v Html je extrémne zriedkavé, ale stále sa vyskytuje. Okrem toho existujú situácie, keď z jedného alebo druhého dôvodu nie je možné použiť externé šablóny štýlov CSS (napríklad v prípade vytvorenia vydania mailing list predplatiť).

Preto ešte uvediem príklad nastavenia farieb v Html, aj keď v tomto prípade už budú použité značky, ktoré validátor W3C neodporúča. Napríklad pred nastavením farby pozadia v značke „BODY“ prostredníctvom atribútu „bgcolor“ a text bol okamžite zafarbený na celej webovej stránke pomocou atribútu „text“.

Nastavenie požadovaných odtieňov v tomto prípade môže vyzerať napríklad takto:

Obsah dokumentu

V dôsledku toho získate webovú stránku s béžovým pozadím a tmavomodrým písmom. Predtým, ako sa začalo používať CSS, na zmenu farby písma ktorejkoľvek jednotlivej časti textu sa bežne používala značka „FONT“, ktorá už nie je odporúčaná validátorom W3C, ktorá obsahovala atribút „color“ s rovnakým názvom. nastaviť farbu:

časť textu, ktorú bolo potrebné zafarbiť na modro

Ak chcete vidieť výsledok napísaného kódu na obrazovke, musíte tento súbor uložiť s príponou html a potom ho otvoriť v ľubovoľnom vhodnom prehliadači.

Teraz sa odporúča, aby sa rozloženie vašej stránky považovalo za platné nastaviť farby prvkov v kaskádovom štýle prostredníctvom príslušných pravidiel a vlastností. Pravidlá pre takéto vkladanie v CSS sa nelíšia od pravidiel opísaných vyššie.

Ako vidíte, niekedy sa na skrátenie záznamu odtieňa nepoužíva šesť znakov, ale iba tri, ak sa zhodujú pre každý kanál - „# 6c0“ namiesto „# 66cc00“.

ktonanovenkogo.ru

Paleta farieb RGB, ako správne nastaviť farby v CSS a Html.

Ako viete, na vyriešenie problémov s farebným dizajnom textu sa používa všeobecne akceptovaná konštrukcia. RGB(teda Červená- červená, zelená- Zelená a podľa toho Modrá- Modrá)

Paleta farieb RGB znamená použitie iba troch farieb, z ktorých každá môže byť dobre znázornená s inou úrovňou jasu. V CSS a Html kóde možno pre každú farbu palety definovať jednu z 256 možných farebných gradácií.

Na návrh dokumentu teda môžete použiť pomerne veľké množstvo farieb - 256-256-256. Napríklad, aby ste získali čiernu ako výsledok, všetky tri farby RGB je potrebné nastaviť indikátor jasu na nulu a naopak, ak je požadovaná biela farba, potom je potrebné pre všetky farby nastaviť maximálny jas.

Pozrime sa bližšie na to, ako nastaviť jas farby v Html. Existujú dva spôsoby nastavenia jasu:

1. Nastavením farebného kódu palety pre stránku v Html kóde, definovaním jasu RGB farby pomocou hexadecimálnej sústavy
2. Nastavením farieb v CSS v hexadecimálnej číselnej sústave.

Poďme sa zaoberať písaním kódu v šestnástkovej sústave a hypertextovým značením. Na začiatok si pripomeňme desiatková sústava kalkul - ak napríklad potrebujeme bielu farbu, jej kód bude vyzerať takto: 256 256 256, v prípade čiernej: 0 0 0.

Na rozdiel od desiatkový kód, kde sú len čísla, šestnástková paleta obsahuje aj písmená latinskej abecedy. To znamená, že v tomto prípade nájde svoje miesto jeho vlastný špecifický systém reprezentácie čísel. Napríklad biela je v HTML špecifikovaná ako: #ffffff a čierna ako #000000. Je ľahké vidieť, že tu 00 zodpovedá 0 a ff zodpovedá 256 (pri prevode na desatinné číslo).

RGB farebná paleta Html, CSS je teda rozdelená na kanály, z ktorých každý má priradené dva hexadecimálne znaky. Preto sú všetky farby v Html kóde zostavené zo šiestich písmen (ekvivalentných číslam) a samotných čísel. Je potrebné poznamenať, že pred kódom je umiestnený symbol „#“.

Samozrejme, nie je potrebný manuálny výber farebného kódu - stačí spustiť ľubovoľný grafický editor, nájsť správnu farbu a pozrieť si farebný kód v podrobných informáciách. RGB systém. Existuje ďalšia, jednoduchšia možnosť - paleta Html farby s kódmi. Nájdite a skopírujte si ho.

Farby Yandex - výber kódu farby Html v palete RGB vo výsledkoch Yandex.

Okrem iného si môžete vybrať farebnú schému pre svoje stránky pomocou Yandex. Ak to chcete urobiť, stačí do vyhľadávacieho poľa zadať slovo "farba" alebo názov farby, ktorú potrebujete. V dôsledku požiadavky sa paleta zobrazí vo výstupe Yandex.Colors. pomocou ktorého si môžete vybrať farbu. V pravom rohu môžete vidieť kód farby v RGB a hexadecimálnom systéme, ktorý sa používa pri vytváraní webového dokumentu.

Táto možnosť od spoločnosti Yandex výrazne uľahčuje pracovný proces. Všetko je veľmi jednoduché - zadajte názov farby a získajte potrebný kód.

Treba poznamenať, že niektoré farby v hypertextových značkách je možné úplne nastaviť slovom, napríklad: "šedá" - šedá, "biela" - biela, "čierna" - čierna atď. Samozrejme, nastavenie farby v Html týmto spôsobom je možné len pre nie príliš veľkú paletu farieb. Skutočne, 16 miliónov farieb RGB pomocou slov nemožno nájsť v žiadnej referenčnej knihe alebo tabuľke.

W3C 4.01 Validator (Hypertext Markup) poskytuje paletu 16 základných odtieňov, ktorá vytvára tabuľku farieb CSS a Html, ktorá ukazuje, ktoré farby je možné špecifikovať slovami.

Zostávajúce farby musia byť špecifikované pomocou hexadecimálneho kódu.

Názov farieb RGB palety na webových stránkach, ako aj nahradenie farby samotného textu pomocou atribútu color, príklady a metódy použitia farebných kódov v CSS a Html.

teraz vonkajší dizajn stránky sú štylizované pomocou CSS (kaskádové štýly), ale napriek tomu je celkom bežné nájsť prípady, keď je farba špecifikovaná v HTML.

Preto je nižšie uvedený príklad špecifikovania farieb v HTML.

stránke vášho webu

Konečným výsledkom je stránka s purpurovým písmom na zlatom pozadí.

Predtým bolo v CSS na špecifikáciu farby textu v jednej sekcii potrebné napísať značku FONT (neodporúča sa W3C) a na nastavenie farby do nej bol zahrnutý atribút „color“:

text sa vyfarbí červenou farbou

Ak chcete zafarbiť nejaký textový prvok vo farbe, ktorú potrebujete, musíte použiť značku FONT na napísanie kódu HTML, ktorý bude vyzerať takto:

Text, ktorého farbu písma chcete nahradiť

V súčasnosti, aby ste získali platný vzhľad stránky, odporúčam pri nastavovaní farebného kódu použiť CSS. Vo všeobecnosti sa pravidlá pre vkladanie farebných kódov do CSS nelíšia od pravidiel diskutovaných vyššie.

www.bestseoblog.ru

Nový algoritmus na výber farieb pre propagačné karty aplikácií v Yandex Launcher.

Rôzne služby Yandex pracujú s farbami pri riešení úloh rozhrania: zvýraznenie informačných blokov a odpovedí objektov, riadenie pozornosti a vytváranie vizuálnej hierarchie.

Príklady použitia algoritmov zhody farieb vo vyhľadávaní a Yandex.Music

V závislosti od úlohy môže zhoda farieb vyžadovať zložité výpočty. Stáva sa však, že dosiahnutie požadovaného výsledku je oveľa jednoduchšie.

Máme propagačné karty pre aplikácie v Yandex Launcher: hodnotenie, popis a tlačidlo "Inštalovať". Ide o kontextové odporúčania – otvárajú sa v hornej časti zoznamu aplikácií alebo v priečinku na pracovnej ploche.

Prvotná implementácia

Farba pozadia karty bola zvolená automaticky na základe ikony, tlačidlo bolo priesvitné biele. Algoritmus sa pokúsil určiť hlavnú farbu ikony analýzou pixelov farebný tón. Tento prístup nie vždy priniesol krásny výsledok, mal nevýhody:

• nesprávna definícia farby;
• "špinavé" farby v dôsledku spriemerovania;
• nudné gombíky, nudné karty.

Príklady problémových kariet

Čo si vlastne chcel

Karta mala byť skutočným pokračovaním ikony a farby mali byť bohaté a jasné. Chcel som navodiť pocit, že karta bola starostlivo vyrobená ručne, a nie skĺznuť niečo, čo sa nedbale vygenerovalo automaticky.

Vždy to chcete urobiť krajším, ale zdroje nie sú neobmedzené. Nebolo plánované prideliť tím, ktorý by napísal zázračnú knižnicu na určovanie farieb. Úlohou je teda vylepšiť algoritmus na určovanie farieb s minimálnou námahou, prísť na to, ako krásne vyfarbiť kartu bez vymýšľania vesmírnej lode.

V sobotu som oprášil editor kódu, odkryl HTML5 a Canvas a začal vymýšľať. V pondelok prišiel do tímu s ponukou.

Nový algoritmus detekcie farieb

Krok 1. Berieme ikonu. Vyhadzujeme biele, čierne a priehľadné pixely.

Ikona zdroja → Štvorec filtrovaných pixelov

Krok 2 Výsledný obrázok zmenšíme na veľkosť 2 × 2 pixely (s vypnutým anti-aliasingom). V dôsledku toho získame štyri farby ikony. Ak je pôvodný obrázok homogénny, môžu sa opakovať - ​​to je v poriadku.

Výsledok po druhom kroku. Ikona zdroja → Farby

Zakázali sme anti-aliasing, aby sa farby nemiešali, „nešpinili“.

V skutočnosti to vyzerá takto: štvorec je rozdelený na štyri časti, z ktorých berieme priemerný pixel vrchný rad každý štvrťrok. Pri implementácii je všetko jednoduché: nepotrebujeme ani skutočný downsample obrázok a vo všeobecnosti pracujeme s grafikou. Pixely s požadovaná poloha berieme z jednorozmerného poľa získaného po prvom kroku.

Krok 3 Takmer všetko je pripravené. Zostáva dosť málo: získame výsledné farby, preložíme do HSL, zoradíme podľa svetlosti (L). Kartičku namaľujeme.

Svetelná schéma:

• pozadie - najsvetlejšia farba;
• tlačidlo - najbližšie k svetlu;
• text je najtmavší.

Tmavá schéma (ak sú dve alebo viac farieb tmavé):

• pozadie je najviac tmavá farba;
• tlačidlo - najbližšie k tmavému;
• text je najsvetlejší.

Pri nanášaní farieb skontrolujte kontrast: Rozdiel svetlosti medzi pozadím a tlačidlom ≥ 20; medzi pozadím a textom ≥ 60. Ak sa nezhoduje, opravíme to.

Prijaté karty. Ikona zdroja → Farby → Karta

A niekoľko ďalších vzorových kariet:

Výsledok

Získali sme farebné karty, zo skutočných farieb ikony, bez „špinavých“ nečistôt. Vďaka použitiu viacerých farieb pôsobí karta oveľa živšie. Je obzvlášť príjemné, že s jednotným pozadím ikony sa karta stáva jej priamym pokračovaním: hranica medzi nimi nie je vôbec viditeľná.

A čo je najdôležitejšie: dva dni po návrhu nového algoritmu bola prvá implementácia dostupná už v dev builde. Testovali sme to v rámci tímu, v prvom kroku sme nastavili prahové hodnoty pre filter a poskytli sme špeciálne prípady:

• ikona jednej farby - urobte pozadie trochu tmavšie, aby sa nezlúčilo;
• ikona s pozadím - pozrite sa na pixely okolo okrajov; ak sú všetky rovnaké, nastavte rovnaké pozadie karty.

Upravený algoritmus je zahrnutý v ďalšom vydaní. Špeciálne poďakovanie patrí Dimovi Ovcharovovi, vedúcemu vývojového tímu Yandex Launcher, za jeho záujem, túžbu a trpezlivosť. Na záver ešte príklady.