RGB kód pre červenú farbu je napísaný ako. Nastavenie farby textu v CSS

V prvej časti knihy sme si už na niekoľkých príkladoch ukázali, ako nastaviť farbu textu v CSS. Nie je tu nič zložité: budete potrebovať vlastnosť farby a hodnotu farby, ktorou chcete vyfarbiť text.

P ( farba: #211C18; )

V našom príklade predstavuje hodnota #211C18 hexadecimálny kód farby. Ak už poznáte systém hexadecimálnych čísel, môžete preskočiť čítanie nasledujúceho odseku. Ďalej si povieme aj o ďalších spôsoboch reprezentácie farieb na webe – pomocou farebných modelov (RGB, HSL) a Kľúčové slová. Tieto informácie budú užitočné pre začiatočníkov a odporúčame ich prečítať.

Hexadecimálne farby (hexadecimálne)

Hexadecimálna číselná sústava ( hexadecimálny, hex) vychádza z čísla 16. Na zápis hexadecimálnej hodnoty sa používa 16 znakov: arabské číslice od 0 do 9 a prvé písmená latinskej abecedy (A, B, C, D, E, F). Farba v hexadecimálnom formáte sa zapisuje ako tri dvojciferné čísla od 00 do FF (musí im predchádzať krížik #), ktorý zodpovedá trom zložkám: Červená, Zelená, Modrá (farebný model RGB). Inými slovami, farebný záznam môže byť reprezentovaný ako #RRGGBB, kde prvý pár znakov určuje úroveň červenej, druhý - úroveň zelenej a tretí - úroveň modrej. Výsledná farba je kombináciou týchto troch farieb.

Skrátený zápis pre hexadecimálne farby

Niektoré hexadecimálne hodnoty farieb môžu byť zapísané v skratkách. Ak to chcete urobiť, otočte položku ako #RRGGBB na #RGB. Dá sa to urobiť, keď hexadecimálne číslo obsahuje tri páry rovnakých znakov.

Skrátená forma zápisu je pomerne bežná a pre vašu informáciu uvedieme niekoľko príkladov skratiek. Mimochodom, hexadecimálne hodnoty farieb nerozlišujú veľké a malé písmená - môžete použiť veľké aj malé písmená, všetko závisí od vašej túžby a vkusu.

Príklady skrátenej notácie pre hexadecimálne farby:

RGB farebný model

Druhým spôsobom určenia farieb v CSS je použitie desiatkových hodnôt RGB (červená, modrá, zelená). Aby ste to dosiahli, musíte za vlastnosť farby napísať kľúčové slovo rgb a potom v zátvorkách a oddelené čiarkami - tri čísla v rozsahu od 0 do 255, z ktorých každé znamená intenzitu červenej, zelenej a modrej farby (r , g, b). Ako väčšie číslo, tým je farba intenzívnejšia. Napríklad, ak chcete získať jasne zelenú farbu, musíte napísať:

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

Ale žltkastý horčičný odtieň má nasledujúci význam:

Farba: rgb(94, 81, 3); /* nižšie je rovnaká farba, zapísaná v šestnástkovej sústave: */ farba: #5E5103;

Hodnota pre čiernu sa zapíše ako (0, 0, 0) a pre bielu ako (255, 255, 255) . Tieto hodnoty je možné uviesť aj v percentách. Takže číslo 255 zodpovedá 100 %, teda, biela farba možno nastaviť nasledovne:

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

Kde hľadať farebné významy

Možno máte otázku: odkiaľ beriete všetky tieto farebné významy? Je ich veľa grafických editorov a online služby, pomocou ktorých môžete vyberať farby a vytvárať farebné schémy. Jeden z najpopulárnejších programov, v ktorom si môžete vybrať vhodnú farbu a získať jej RGB, hexadecimálnu hodnotu a ďalšie - Adobe Photoshop. Ako alternatívu existujú špeciálne stránky, kde si môžete jednoducho vybrať nielen farbu, ale aj celú farebnú schému. Skvelým príkladom je služba Adobe Color CC.

Farebný model RGBA

Farbu vo formáte RGBA môžete nastaviť v podstate rovnakým spôsobom ako v RGB. Rozdiel medzi RGBA a RGB je v prítomnosti alfa kanála, ktorý je zodpovedný za priehľadnosť farby. Priehľadnosť sa nastavuje pomocou čísla v rozsahu od 0 do 1, kde 0 je úplne priehľadná a 1 je úplne nepriehľadná. Stredné hodnoty ako 0,5 vám umožňujú nastaviť priesvitný vzhľad (skrátený zápis je povolený, bez nuly, ale s bodkou – 0,5). Napríklad, aby bol text farebný a mierne priehľadný, musíte za vlastnosť color napísať kľúčové slovo rgba a hodnotu farby:

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

Nevýhodou RGBA je, že nepodporuje internetový prehliadač Prieskumnícke verzie 8 a skôr. Najmä pre IE8 môžete použiť nasledujúce riešenie:

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

Prvá vlastnosť v príklade je určená pre prehliadač IE8, ktorý zobrazí text v požadovanej farbe, no bez priehľadnosti. A tie prehliadače, ktoré rozumejú RGBA, aplikujú druhú vlastnosť na prvok s priehľadnosťou.

Farebné modely HSL (HSLA).

Farbu môžete nastaviť aj v CSS pomocou súradníc farebného modelu HSL (Hue, Saturation, Lightness). Píše sa to takto:

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

Prvé číslo v zátvorke znamená odtieň a je uvedené v stupňoch (rozsah čísel od 0 do 359). Bude ľahké pochopiť, prečo sa používajú stupne, ak si spomeniete, ako vyzerá farebné koliesko:

Druhé a tretie číslo v zátvorkách znamená sýtosť a svetlosť. Ich hodnoty sú nastavené v percentách od 0 do 100. Čím nižšia je hodnota sýtosti, tým je farba tlmenejšia. Hodnota sýtosti nula bude mať za následok sivú farbu bez ohľadu na to, aká je hodnota odtieňa. Hodnota svetlosti vám umožňuje určiť jas farby. Nízke hodnoty vedú k tmavým odtieňom farieb, vysoké hodnoty k svetlým odtieňom. Hodnota 100 % pre svetlosť znamená bielu, 0 % znamená čiernu.

Farebný model HSLA funguje takmer rovnako ako HSL, ale podobne ako RGBA má alfa kanál, pomocou ktorého môžete nastaviť priehľadnosť farby a zadať požadovanú hodnotu v rozsahu od 0 do 1:

P ( farba: hsla(165, 100 %, 50 %, 0,6); )

HSL a HSLA sú podporované všetkými prehliadačmi okrem internet Explorer verzie 8 a staršie.

Štandardné HTML farby

Ďalším spôsobom, ako reprezentovať farby na webe, sú kľúčové slová, ktoré možno použiť na určenie farby prvku. Príklad:

P(farba:čierna ;)

Existuje 16 štandardných farieb, ktoré možno zapísať do hodnoty vlastnosti color:

Tieto farby sú podporované všetkými prehliadačmi. Okrem nich existuje asi 130 ďalších kľúčových slov pre rôzne odtiene farieb. Kompletnú tabuľku týchto farieb si môžete pozrieť v referenčnej knihe W3C.

Používanie takýchto kľúčových slov je prijateľné, existuje však riziko, že niektoré slovo nebude prehliadačom akceptované. Preto sa odporúča namiesto kľúčových slov zapísať hexadecimálny kód farby.

Výsledky

IN CSS farba text sa zadáva pomocou vlastnosti color a jeho hodnotu je možné zapísať niekoľkými spôsobmi – v hexadecimálnom (hexadecimálnom) formáte, vo formáte RGB alebo HSL alebo zadaním kľúčového slova. Aby ste sa vyhli nesprávnemu zobrazeniu farby zadanej pomocou kľúčového slova, je lepšie zadať jej hexadecimálnu hodnotu.

Je tiež možné nastaviť priehľadnosť prvku pomocou alfa kanála (formáty RGBA a HSLA). Treba mať na pamäti, že prehliadač IE8 a jeho skoré verzie nepodporujú formáty RGBA, HSL a HSLA.

V tomto článku sa zoznámime s možnosťami HTML a CSS zmeniť farbu textu na webových stránkach. Zváži sa niekoľko možností. Pre každý jednotlivý prípad je vhodný vlastný špecifický spôsob.

Na začiatok si všimneme, že všetky farby možno zadať v troch formátoch:

• Názov farby (červená, modrá, zelená atď.)
• Hexadecimálny formát (#104A00, #0F0 atď.)
• formát rgba(rgba(0,0,0,0,5) atď.)

Naša webová stránka predstavuje celú paletu a názvy html farieb pre stránku, kde si môžete vybrať vhodnú farbu.

Metóda 1. Cez html tag