HTML barvy. Lekce pro začátečníky. W3Schools v ruštině

Barvy HTML se zadávají pomocí předdefinovaných názvů barev nebo hodnot RGB, HEX, HSL, RGBA, HSLA.

Názvy barev

V HTML lze barvu specifikovat pomocí názvu barvy:

Barva pozadí — Barva pozadí

Barvu pozadí pro HTML prvky můžete nastavit:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy NIBH euismod tincidunt ut laoreet Dolore magna Podělte Erat volutpat. Ut Wisi enim ad minim veniam, Quis nostrud exerci tace ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

příklad

Barva textu — Barva textu

Barvu textu můžete nastavit:

Ahoj světe

Lorem ipsum dolor sit amet, consectetuer adipiscing elita, sed diam nonummy NIBH euismod tincidunt z laoreet Dolore magna aliquam slitina volutpat.

Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

příklad

Zároveň je to enim.

Barva ohraničení — Barva ohraničení

Barvu ohraničení můžete nastavit:

Ahoj světe

Ahoj světe

Ahoj světe

příklad

Barevné významy

V HTML lze barvy specifikovat také pomocí hodnot RGB, HEX, HSL, RGBA a HSLA:

Stejné jako název barvy „Rajče“:

rgb (255, 99, 71)
hsl(9, 100 %, 64 %)

Stejné jako název barvy „Rajče“, ale o 50 % průhlednější:

rgba(255, 99, 71, 0.5)
hsla(9, 100 %, 64 %, 0.5)

příklad

Hodnota RGB

V HTML lze barvu zadat jako hodnotu RGB pomocí tohoto vzorce:

Každý parametr (červená, zelená a modrá) definuje intenzitu barvy od 0 do 255.

Například rgb(255, 0, 0) se zobrazí červeně, protože červená je nastavena na nejvyšší hodnotu (255) a zbytek je nastaven na 0.

Pro zobrazení černé barvy nastavte všechny parametry barvy na 0, například takto: rgb(0, 0, 0).

Pro zobrazení bílé nastavte všechny parametry barvy na 255, například takto: rgb(255, 255, 255).

Experimentujte smícháním níže uvedených hodnot RGB:

příklad

rgb (255, 0, 0)
rgb (0, 0, 255)
rgb (60, 179, 113)
rgb (238, 130, 238)
rgb (255, 165, 0)
rgb (106, 90, 205)

Odstíny šedé jsou často definovány pomocí stejných hodnot pro všechny tři světelné zdroje:

příklad

rgb (60, 60, 60)
rgb (120, 120, 120)
rgb (180, 180, 180)
rgb (240, 240, 240)
rgb (255, 255, 255)

HEX hodnota

V HTML lze barvu zadat pomocí hexadecimální hodnoty ve tvaru:

Kde rr (červená), gg (zelená) a bb (modrá) jsou hexadecimální hodnoty od 00 do ff (stejné jako desítkové 0–255).

Například #ff0000 se zobrazí červeně, protože červená je nastavena na nejvyšší hodnotu (ff) a ostatní jsou nastaveny na nejnižší hodnotu (00).

příklad

Odstíny šedé jsou často definovány pomocí stejných hodnot pro všechny tři světelné zdroje:

příklad

Význam HSL

V HTML lze barvu specifikovat pomocí odstínu, sytosti a světlosti – HSL ve tvaru:

Odstín je stupeň na barevném kruhu od 0 do 360. 0 je červená, 120 je zelená a 240 je modrá.

Sytost je procentuální hodnota, 0 % je stupně šedi a 100 % je plná barva.

Světlost je také v procentech, 0 % je černá, 50 % není ani světlá, ani tmavá, 100 % je bílá.

příklad

hsl(0, 100 %, 50 %)
hsl(240, 100 %, 50 %)
hsl(147, 50 %, 47 %)
hsl(300, 76 %, 72 %)
hsl(39, 100 %, 50 %)
hsl(248, 53 %, 58 %)

Nasycení

Sytost lze popsat jako intenzitu barvy.

100% čistá barva, žádné odstíny šedé

50 % je z 50 % šedé, ale barvu je stále vidět.

0 % je zcela šedých, už nevidíte barvu.

příklad

hsl(0, 100 %, 50 %)
hsl(0, 80 %, 50 %)
hsl(0, 60 %, 50 %)
hsl(0, 40 %, 50 %)
hsl(0, 20 %, 50 %)

Jasnost

Jas barvy lze popsat jako množství světla, které chcete barvě dodat, kde 0 % znamená žádné světlo (černá), 50 % znamená 50 % světla (ani tma, ani světlo) a 100 % znamená plný jas (bílá).

příklad

hsl(0, 100 %, 0 %)
hsl(0, 100 %, 25 %)
hsl(0, 100 %, 50 %)
hsl(0, 100 %, 75 %)
hsl(0, 100 %, 90 %)
hsl(0, 100 %, 100 %)

Stupně šedi se často definují nastavením odstínu a sytosti na 0 a úpravou jasu od 0 % do 100 % pro dosažení tmavších/světlejších odstínů:

příklad

Hodnota RGBA

Barevné hodnoty RGBA jsou rozšířením barevných hodnot RGB s alfa kanálem, který určuje neprůhlednost barvy.

Hodnota barvy RGBA je specifikována pomocí:

Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (vůbec neprůhledné):

příklad

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

Význam HSLA

Barevné hodnoty HSLA jsou rozšířením barevných hodnot HSL s alfa kanálem, který určuje neprůhlednost barvy.

Hodnota barvy HSLA se určuje pomocí:

Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (vůbec neprůhledné):

příklad

hsla(9, 100 %, 64 %, 0)
hsla(9, 100 %, 64 %, 0.2)
hsla(9, 100 %, 64 %, 0.4)
hsla(9, 100 %, 64 %, 0.6)
hsla(9, 100 %, 64 %, 0.8)
hsla(9, 100 %, 64 %, 1)

Otázky pro sebeovládání

• Jak nastavit barvy na webové stránce?
• Jaké názvy barev se používají na webových stránkách?
• Kolik standardních názvů barev je v HTML podporováno?
• Kterou vlastnost lze použít k nastavení barvy pozadí HTML stránky?
• Kterou vlastnost lze použít k nastavení barvy textu na HTML stránce?
• Kterou vlastnost lze použít k nastavení barvy ohraničení HTML elementu?
• Jaké barevné hodnoty lze použít k nastavení barev na webové stránce?
• Jak dešifrujete hodnotu barvy RGB?
• Co definuje každý parametr v hodnotě barvy RGB?
• Jaká je minimální a maximální hodnota každého parametru v barvě RGB?
• Jaké by měly být hodnoty každého zdroje světla při nastavování stupňů šedi v barvě RGB?
• Jaký je tvar barvy zadaný pomocí hexadecimální (HEX) hodnoty?
• Jaká je minimální a maximální hodnota každého parametru v HEX barvě?
• Jaké by měly být hodnoty každého zdroje světla při nastavování stupňů šedi v HEX barvách?
• Jak dešifrujete hodnotu barvy HSL?
• Jaká je minimální a maximální hodnota každého parametru v barvě HSL?
• Jaké by měly být hodnoty každého zdroje světla při nastavování stupňů šedi v barvě HSL?
• K čemu slouží alfa kanál při nastavování barevných hodnot RGBA a HSLA?

BAREVNÁ PALETA

PŘIPOJIT SE!

Kontaktujte administrátora

Pokud chcete nahlásit chybu, podat návrh ohledně webu, přidat na web reklamu nebo inzerát, neváhejte poslat e-mail administrátorovi na adresu:

Nejlepší učebnice

Nejlepší adresáře

Nejlepší příklady

Webové certifikáty

Tyto stránky jsou optimalizovány pro učení a testování. Příklady mohou být zjednodušeny pro zlepšení čtení a základního porozumění. Návody, odkazy a příklady jsou neustále kontrolovány, aby se předešlo chybám, ale nemůžeme zaručit úplnou správnost a funkčnost veškerého obsahu. Používáním těchto stránek souhlasíte s tím, že jste si přečetli a přijali podmínky použití, soubory cookie a zásady ochrany osobních údajů.
Také můžete absolutně stáhněte si zdarma offline verzi webových stránek W3Schools v ruštině archiv z GitHubu a používejte ho lokálně na svém počítači.
K dispozici je také webová verze W3Školy v ukrajinštině Jazyk.
Autorská práva 1999–2023 patří společnosti Refsnes Data. Všechna práva vyhrazena.
Web běží na frameworku W3.CSS.

Abu Jamus Abdurrahman

Lidé dlouho potřebovali barvy nějak třídit, aby si o nich navzájem sdělovali informace. Za tímto účelem byly vynalezeny barevné modely.

Hlavním problémem je, že existuje mnoho různých povrchů, na které se nanášejí barvy různého složení, a také mnoho různých obrazovek, které
zobrazovat barvu jinak.

K vyřešení tohoto problému bylo vynalezeno několik barevných modelů. Nejoblíbenější z nich: RGB, CMYK, Pantone, RAL, HSB.

RGB je barevný model používaný k přenosu informací o barvách na obrazovkách. Barevná hodnota v něm je určena smícháním červené (R – red), zelené (G – green) a modré (B – blue). Smícháním všech těchto barev v maximálním množství získáte bílou, smícháním v jiných poměrech můžete získat další barvy.

Je důležité vědět, že na různých obrazovkách budou barvy vypadat odlišně v závislosti na tom, jak je každá konkrétní obrazovka nakonfigurována a jaký rozsah barev může zobrazovat (některé obrazovky mohou zežloutnout, zmodrat nebo ztmavit). Pro označení konkrétní barvy v systému RGB použijte hodnoty každé barvy (R, G, B) od 0 do 255 (například R 234, G 044, B 132) nebo HEX kód barvy v hexadecimální soustavě. (například #9C2E9C) .

HSB nebo HSV je barevný model, který se také používá pouze na obrazovkách. Na rozdíl od RGB jsou hodnoty barev určeny odstínem, sytostí a jasem. Pohodlné pro výběr barev v grafických editorech.

CMYK je barevné schéma používané primárně v tisku pro tisk a zahrnuje 4 barvy: azurovou, purpurovou, žlutou a černou. Jejich smícháním můžete získat barvy, které potřebujete, existuje však mnoho nuancí, kterých byste si měli být vědomi. Při tisku „tsmic“ na různé povrchy, při různé vlhkosti, s různými tiskovými zařízeními bude viditelný výsledek odlišný.

Musíte také pochopit, že rozsah barev těchto inkoustů je mnohem užší než na obrazovce monitoru nebo smartphonu, takže můžete slyšet stížnosti, že po vytištění obrázek vypadá matně ve srovnání s tím, co je na obrazovce. Aby se snížil stupeň rozdílů, měl by tisk před tiskem plné edice provést barevný nátisk, během kterého nabídnou několik barevných možností na výběr.

K označení barev v modelu CMYK se používají kódy, které odrážejí procento každé barvy od 0 do 100 %, například C100M45Y0K10.

Často při tisku může nastat problém s matnou „černou“ (C0M0Y0K100) barvou při vyplňování pozadí Chcete-li to provést, musíte požádat tiskovou společnost o kód CMYK pro sytou černou barvu a nahradit barvy v rozvržení. ale neměli byste jej používat k vyplnění malého textu, jinak mohou okraje textu „plavat“ kvůli množství použitých barev. Musíte také pochopit, že plnění sytou černou barvou může být mnohem dražší, protože místo plnění jednou barvou se plní čtyřmi najednou.

Pantone Matching System (PMS)

Pantone Matching System je název mezinárodního systému přizpůsobení barev. Volbou „pantones“ můžete zapomenout na mnoho problémů se čtyřbarevným CMYK tiskem. V jakémkoli polygrafickém průmyslu na světě bude tisk Pantone vypadat téměř stejně, také na rozdíl od tisku Tsmikom může být výsledek mnohem bohatší, protože pokrytí těchto barev je mnohem širší než pokrytí CMYK a jejich paleta obsahuje také „neon“ a metalické barvy laky. To má ale i své nevýhody: tisk s Pantones může být mnohem dražší a ne každá tiskařská společnost s nimi tiskne. Pomocí přímých barev Pantone není možné tisknout fotografie a přechody, které obsahují více barev, protože barvy Pantone nejsou navrženy pro míchání s jinými inkousty. Navzdory velkému počtu nevýhod se doporučuje používat „pantones“ na všech médiích, kde je to možné a odůvodněné cenou.

Každá barva v systému Pantone má svůj vlastní název nebo kód, například „Pantone Black 6C“ nebo „Pantone 5545 C“. V reálném životě mohou barvy „Pantone“ vypadat velmi odlišně než na obrazovce, takže je důležité vybrat barvy na ventilátoru Pantone osobně

RAL je standard pro výběr barev pro laky, práškové barvy a plasty, používaný v mnoha oblastech průmyslu, interiérového designu a architektury. Barvy RAL se nepřekrývají s barvami Pantone, RGB, CMYK a ve skutečnosti mohou vypadat velmi odlišně. K označení barvy používá systém RAL Classic kódy jako „RAL 1016“ a systém RAL Design používá „RAL 240 60 2“.

Při vývoji firemní identity pro společnost je třeba předem zvážit, které z barevných modelů bude zákazník při používání firemní identity potřebovat, a při výběru barev se ujistit, že v těchto barevných modelech existují potřebné barevné analogy.

Závěry pro projektanta:

1. Barvy rozvržení mohou na různých obrazovkách vypadat jinak
2. Nezapomeňte, že kromě RGB existují i ​​jiné barevné modely, ve kterých je pohodlnější pracovat, například HSB
3. Aby byla černá barva pozadí při použití čtyřbarevného tisku CMYK sytější, měli byste si u tiskařské společnosti zjistit, jaký mají kód pro sytou černou barvu a nahradit jej v rozložení, ale neměli byste použijte jej pro malý text
4. Při vývoji firemní identity je důležité se ujistit, že jste vybrali všechny barvy, ve všech barevných modelech, které bude zákazník při používání firemní identity potřebovat
5. Při vývoji firemní identity je důležité vybrat barvy z palet Pantone a RAL naživo, aby nedošlo k překvapení

Závěry pro zákazníky:

1. Barvy v rozložení mohou na různých obrazovkách vypadat jinak a vy s tím budete muset prostě žít
2. Chcete-li snížit míru barevných rozdílů u tištěných produktů, měli byste před tiskem celého vydání provést barevný nátisk a vybrat barvy, které se nejvíce blíží standardu.
3. Je-li to možné a nákladově efektivní, je lepší používat barvy Pantone na všech médiích
4. Je důležité se ujistit, že jsou pro vás vybrány všechny barvy, ve všech barevných modelech, které budete při používání firemní identity potřebovat

Děkuji za pozornost.

Nechte svůj telefon
zavoláme vám zpět
Naše telefonní číslo:
+38 073 417 48 13
Ukrajina, m. Kyjev, Kudrjavskij
Uzviz 5B, 6 nahoře, kancelář 608
Copyright 2024 © Projekce – obaly pro firmy
Sledujte nás:
Zásady používání souborů cookie

Na této stránce se dozvíte, co jsou cookies a jak a kdy je používáme.

Definice pojmu „cookie“ Soubory cookie jsou části dat, které jsou generovány webovým serverem a které web ukládá na vašem uživatelském zařízení (počítač, chytrý telefon, tablet atd.). Každý web nebo služba třetí strany odesílá soubory cookie do prohlížeče nainstalovaného ve vašem zařízení pouze v případě, že to váš prohlížeč umožňuje. To je možné, pokud jste v nastavení prohlížeče nenastavili žádná omezení pro ukládání cookies. Prohlížeče jsou velmi sofistikovaná technologie. Chrání osobní údaje a umožňují webovým stránkám přístup pouze k cookies, které jim byly dříve odeslány. Soubory cookie se dělí na: soubory cookie relace. Jsou uloženy v paměti prohlížeče pouze během vaší relace a jsou okamžitě odstraněny po opuštění webu. trvalý. Jsou uloženy v paměti prohlížeče po dlouhou dobu. Definice pojmu “prohlížeč” Prohlížeč je aplikace pro prohlížení webových stránek. Nejoblíbenějšími prohlížeči jsou Chrome, Internet Explorer, Firefox a Safari. Všechny uvedené prohlížeče jsou bezpečné. V nastavení těchto prohlížečů lze cookies jednoduše zakázat a změnit nastavení jejich fungování. Můžete: přijmout všechny soubory cookie; požádat prohlížeč, aby vás upozornil na použití cookies; neakceptovat cookies. Cookies na ak1-3.com.ua a jak je používáme

Soubory cookie používáme k: zvýšení funkčnosti našich webových stránek; pochopit, jak se na webu pohybujete, jaký obsah nejlépe konzumujete, vyvinout strategii obsahu webu; pochopit, kolik návštěv webu bylo za den, měsíc, rok. Analyzujte geografickou polohu uživatelů webu, počet opakovaných návštěv a další údaje. Cookies, které používáme na našich stránkách. Soubory cookie třetích stran. Tlačítka sociálních sítí, videa a některé další služby na našich stránkách jsou majetkem jiných společností. Tyto společnosti mohou také nastavit soubory cookie na vašem zařízení, pokud jste je používali na našich stránkách nebo jste se u nich dříve zaregistrovali.

Se zásadami ochrany osobních údajů pro používání osobních údajů těmito službami se můžete seznámit na webových stránkách těchto služeb. Blokování souborů cookie Všechny prohlížeče umožňují zakázat soubory cookie pomocí jednoduchých kroků. Chcete-li je zakázat, musíte přejít do nastavení prohlížeče a najít v nich soubory cookie. Musíte si však pamatovat, že blokování souborů cookie může mít negativní dopad na výkon mnoha webových stránek. Jak smazat soubory Cookies, které jsou uloženy ve vašem počítači, můžete také kdykoli vymazat. Chcete-li to provést, postupujte podle pokynů prohlížeče. Opět platí, že smazání cookies může mít negativní dopad na funkčnost mnoha webových stránek.

Zásady ochrany osobních údajů

Správa stránek se zavazuje zachovat vaše soukromí na internetu. Přikládáme velký význam ochraně údajů, které nám poskytnete. Naše zásady ochrany osobních údajů vycházejí z požadavků obecného nařízení Evropské unie o ochraně osobních údajů (GDPR). Osobní údaje shromažďujeme pro účely: zlepšení provozu naší služby, navázání kontaktu s návštěvníky těchto stránek, zpracování uživatelských údajů pro službu online obchodování, poskytování informací požadovaných uživatelem, jakož i pro níže uvedené akce.

Shromažďování a používání osobních údajů

Vaše osobní údaje shromažďujeme a používáme pouze s vaším dobrovolným souhlasem. Souhlasem s tímto nám dáváte oprávnění shromažďovat a používat následující údaje: jméno a příjmení, e-mail, telefonní číslo. Shromažďování a zpracování vašich údajů probíhá v souladu se zákony platnými v Evropské unii a na Ukrajině.

Ukládání, úpravy a mazání dat

Uživatel, který webu poskytl své osobní údaje, má právo je změnit a vymazat, jakož i odvolat svůj souhlas s jejich používáním. Vaše osobní údaje budou uloženy po dobu nezbytně nutnou k použití údajů pro hlavní činnosti webu, po dokončení používání vašich údajů je správa webu vymaže. Pro přístup ke svým osobním údajům můžete kontaktovat administraci stránek na telefonu uvedeném na stránce. Vaše osobní údaje můžeme předat třetí straně pouze s vaším dobrovolným souhlasem, pokud byly předány, pak nemůžeme údaje měnit v jiných organizacích, které s námi nesouvisí.

Použití technických údajů při návštěvě webu

Při návštěvě stránky se do databáze ukládají záznamy o vaší IP adrese, době návštěvy, nastavení prohlížeče, operačním systému a také další technické informace nutné pro správné zobrazení obsahu stránek. Pomocí těchto údajů je pro nás nemožné identifikovat identitu návštěvníka.

Použití osobních údajů jinými službami

Tato stránka využívá internetové služby třetích stran, které shromažďují informace nezávisle na nás: Google Analytics.

Údaje, které shromažďují, mohou být sdíleny s jinými službami v rámci těchto organizací, které mohou údaje používat k personalizaci reklamy pro svou vlastní reklamní síť. Uživatelské smlouvy těchto organizací si můžete přečíst na jejich webových stránkách. Zde můžete také odmítnout shromažďování osobních údajů, například zde je umístěn blokátor Google Analytics. Osobní údaje nesdílíme s jinými organizacemi nebo službami, které nejsou uvedeny v těchto zásadách ochrany osobních údajů. Jedinou výjimkou je předávání informací podle zákonných požadavků orgánů státní správy oprávněných tyto úkony provádět.

Odkazy na jiné stránky

Naše webové stránky mohou obsahovat odkazy na jiné webové stránky, které neprovozujeme. Neneseme odpovědnost za jejich obsah. Doporučujeme vám přečíst si zásady ochrany osobních údajů každé webové stránky, kterou navštívíte, pokud nějakou má.

Změny zásad ochrany osobních údajů

Naše stránky mohou čas od času aktualizovat své zásady ochrany osobních údajů. O jakýchkoli změnách vás budeme informovat zveřejněním nových zásad ochrany osobních údajů na této stránce. Sledujeme změny v legislativě týkající se osobních údajů v Evropské unii a na Ukrajině. Pokud jste u nás zanechali osobní údaje, budeme vás informovat o změnách zásad ochrany osobních údajů. Pokud byly vaše osobní údaje zadány nesprávně, nebudeme vás moci kontaktovat.