RGB kód pro červenou barvu je zapsán jako. Nastavení barvy textu v CSS

V první části knihy jsme si již na některých příkladech ukázali, jak nastavit barvu textu v CSS. Není zde nic složitého: budete potřebovat vlastnost color a hodnotu barvy, kterou chcete text vybarvit.

P ( barva: #211C18; )

V našem příkladu představuje hodnota #211C18 hexadecimální kód barvy. Pokud jste již obeznámeni s hexadecimální číselnou soustavou, můžete čtení dalšího odstavce přeskočit. Dále si povíme i o dalších způsobech reprezentace barev na webu – pomocí barevných modelů (RGB, HSL) a klíčová slova. Tyto informace budou užitečné pro začátečníky a doporučujeme je přečíst.

Hexadecimální barvy (hexadecimální)

Hexadecimální číselná soustava ( hexadecimální, hex) vychází z čísla 16. K zápisu hexadecimální hodnoty se používá 16 znaků: arabské číslice od 0 do 9 a první písmena latinské abecedy (A, B, C, D, E, F). Barva v hexadecimálním formátu se zapisuje jako tři dvoumístná čísla od 00 do FF (musí jim předcházet znak hash #), který odpovídá třem složkám: Červená, Zelená, Modrá (barevný model RGB). Jinými slovy, barevný záznam může být reprezentován jako #RRGGBB, kde první pár znaků určuje úroveň červené, druhý - úroveň zelené a třetí - úroveň modré. Výsledná barva je kombinací těchto tří barev.

Těsnopisný zápis pro hexadecimální barvy

Některé hexadecimální hodnoty barev mohou být zapsány ve zkratkách. Chcete-li to provést, otočte položku jako #RRGGBB na #RGB. To lze provést, když hexadecimální číslo obsahuje tři páry identických znaků.

Zkrácená forma zápisu je poměrně běžná a pro vaši informaci uvedeme několik příkladů zkratek. Mimochodem, hexadecimální hodnoty barev nerozlišují velká a malá písmena - můžete použít velká i malá písmena, vše závisí na vaší touze a vkusu.

Příklady zkrácené notace pro hexadecimální barvy:

RGB barevný model

Druhým způsobem, jak určit barvy v CSS, je použití desítkových hodnot RGB (červená, modrá, zelená). Chcete-li to provést, musíte za vlastnost color napsat klíčové slovo rgb a poté v závorce a oddělené čárkami - tři čísla v rozsahu od 0 do 255, z nichž každé znamená intenzitu červené, zelené a modré barvy (r , g, b). Čím vyšší číslo, tím intenzivnější barva. Chcete-li například získat jasně zelenou barvu, musíte napsat:

P ( barva: rgb(0, 255, 0); )

Ale nažloutlý hořčičný odstín má následující význam:

Barva: rgb(94, 81, 3); /* níže je stejná barva, zapsáno v šestnáctkové soustavě: */ barva: #5E5103;

Hodnota pro černou je zapsána jako (0, 0, 0) a pro bílou jako (255, 255, 255) . Tyto hodnoty je také možné uvést v procentech. Takže číslo 255 odpovídá 100 %, tedy, bílá barva lze nastavit následovně:

Barva: rgb (100 %, 100 %, 100 %);

Kde hledat barevné významy

Možná máte otázku: odkud berete všechny tyto barevné významy? Je jich mnoho grafické editory a online služby, pomocí kterých můžete vybírat barvy a vytvářet barevná schémata. Jeden z nejoblíbenějších programů, ve kterém si můžete vybrat vhodnou barvu a získat její RGB, hexadecimální hodnotu a další - Adobe Photoshop. Alternativně existují speciální stránky, kde si snadno vyberete nejen barvu, ale i celé barevné schéma. Skvělým příkladem je služba Adobe Color CC.

Barevný model RGBA

Barvu ve formátu RGBA můžete nastavit v podstatě stejným způsobem jako v RGB. Rozdíl mezi RGBA a RGB je přítomnost alfa kanálu, který je zodpovědný za průhlednost barvy. Průhlednost se nastavuje pomocí čísla v rozsahu od 0 do 1, kde 0 znamená úplnou průhlednost a 1 naopak znamená zcela neprůhledné. Mezilehlé hodnoty jako 0,5 umožňují nastavit průsvitný vzhled (je povolen zkrácený zápis bez nuly, ale s tečkou – 0,5). Například, aby byl text barevný a mírně průhledný, musíte za vlastnost color napsat klíčové slovo rgba a hodnotu barvy:

P ( barva: rgba(94, 81, 3, .9); )

Nevýhodou RGBA je, že nepodporuje internetový prohlížeč Průzkumné verze 8 a dříve. Speciálně pro IE8 můžete použít následující řešení:

P ( barva: rgb(94, 81, 3); barva: rgba(94, 81, 3, .9); )

První vlastnost v příkladu je určena pro prohlížeč IE8, který zobrazí text v požadované barvě, ale bez průhlednosti. A ty prohlížeče, které rozumí RGBA, aplikují na prvek druhou vlastnost s průhledností.

Barevné modely HSL (HSLA).

Barvu můžete také nastavit v CSS pomocí souřadnic barevného modelu HSL (Hue, Saturation, Lightness). Píše se to takto:

P ( barva: hsl(165, 100 %, 50 %); )

První číslo v závorce znamená odstín a udává se ve stupních (rozsah čísel od 0 do 359). Bude snadné pochopit, proč se používají stupně, pokud si pamatujete, jak vypadá barevné kolečko:

Druhé a třetí číslo v závorce znamená sytost a světlost. Jejich hodnoty jsou nastaveny v procentech od 0 do 100. Čím nižší je hodnota sytosti, tím je barva tlumenější. Hodnota sytosti nula bude mít za následek šedou barvu bez ohledu na to, jaká je hodnota odstínu. Hodnota světlosti umožňuje určit jas barvy. Nízké hodnoty mají za následek tmavé odstíny barev, vysoké hodnoty světlé odstíny. Hodnota 100 % pro světlost znamená bílou, 0 % znamená černou.

Barevný model HSLA funguje téměř stejně jako HSL, ale podobně jako RGBA má alfa kanál, pomocí kterého můžete nastavit průhlednost barvy a zadat požadovanou hodnotu v rozsahu od 0 do 1:

P ( barva: hsla(165, 100 %, 50 %, .6); )

HSL a HSLA jsou podporovány všemi prohlížeči kromě internet Explorer verze 8 a starší.

Standardní HTML barvy

Dalším způsobem reprezentace barev na webu jsou klíčová slova, která lze použít k určení barvy prvku. Příklad:

P(barva:černá;)

Existuje 16 standardních barev, které lze zapsat do hodnoty vlastnosti color:

Tyto barvy jsou podporovány všemi prohlížeči. Kromě nich existuje asi 130 dalších klíčových slov pro různé odstíny barev. Kompletní tabulku těchto barev lze vidět v referenční knize W3C.

Použití takových klíčových slov je přijatelné, ale existuje riziko, že některé slovo nebude prohlížečem přijato. Proto se doporučuje zapsat hexadecimální kód barvy místo klíčových slov.

Výsledek

V CSS se barva textu určuje pomocí vlastnosti color a její hodnotu lze zapsat více způsoby – v hexadecimálním (hexadecimálním) formátu, ve formátu RGB či HSL nebo zadáním klíčového slova. Aby se zabránilo nesprávnému zobrazení barvy zadané pomocí klíčového slova, je lepší zadat její hexadecimální hodnotu.

Je také možné nastavit průhlednost prvku pomocí alfa kanálu (formáty RGBA a HSLA). Je třeba mít na paměti, že prohlížeč IE8 a jeho rané verze nepodporují formáty RGBA, HSL a HSLA.

V tomto článku se seznámíme s možnostmi HTML a CSS pro změnu barvy textu na webových stránkách. Bude zváženo několik možností. Pro každý jednotlivý případ je vhodná jeho vlastní specifická metoda.

Nejprve si všimneme, že všechny barvy lze zadat ve třech formátech:

• Název barvy (červená, modrá, zelená atd.)
• Hexadecimální formát (#104A00, #0F0 atd.)
• formát rgba (rgba(0,0,0,0,5) atd.)

Náš web představuje celou paletu a názvy html barev pro web, kde si můžete vybrat vhodnou barvu.

Metoda 1. Prostřednictvím html značky