Skúste tento príklad upraviť tak, aby obsahoval vaše vlastné hodnoty, napríklad rgb(100, 100, 100) .

Nastavenie farby pomocou RGBA

V CSS3 sa objavil nový nástroj pre prácu s farbou - formát RGBA. Možno to nazvať evolúciou modelu RGB, ale s pridaním jedného nového kanála - A alebo alfa kanála. Tento kanál nastavuje priehľadnosť farby. Jeho hodnoty sú nastavené v rozsahu od 0 do 1. Hodnota rovnajúca sa 0 zodpovedá úplnej priehľadnosti, 1 - plná nepriehľadnosť (farba bude rovnaká, ako je nastavená v prvé tri RGB kanály) a stredné hodnoty ako 0,4 alebo 0,6 - priesvitnosť v rôznej miere.

Príklad kódu.

Takto to bude fungovať:

Tento kód je vizuálne podobný nasledujúcemu, ktorý používa model RGB na nastavenie hodnoty farby:

Tu je jeho výsledok:

Hodnota alfa kanála rovná nule robí akúkoľvek farbu neviditeľnou – absolútne transparentnou, hodnota rovnajúca sa jednej prevedie farbu v kóde RGB bez zmien. Vlastnosť rgba(255,0,0,1.0) zobrazuje červenú farbu rgb(255, 0, 0) .

Podľa hexadecimálnej hodnoty (HEX kód)

V bežnom živote používame desiatkovú sústavu počítania. Jeho pôvod je veľmi jednoduchý – na rukách máme desať prstov a v živote sa hodilo počítať na prstoch. Ak v desiatková sústava desať číslic: od 0 do 9 a číslo 10 je ďalšia číslica, potom je v systéme hexadecimálnych čísel 16 číslic a ďalšia číslica bude číslo 16.

Na označenie farebných kódov sa ako hexadecimálne číslice používajú obyčajné desatinné číslice od 0 do 9 a na označenie čísel od 10 do 15 sa používajú latinské písmená od A do F, teda (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Pre prehľadnosť si to zhrňme do tabuľky:

Na zápis hexadecimálnych čísel väčších ako F (15 desiatkových), ako v desiatkovej sústave, tiež používajú spojenie dvoch číslic, ale už šestnástkové, čo je zrejmé. Áno, pre poriadok desatinné číslo 255 v hexadecimálnom zápise je FF.

Hexadecimálny systém je pre počítač zrozumiteľnejší, rýchlejšie spracováva hodnoty dané hexadecimálnou hodnotou.

Ak chcete zadať farbu v šestnástkovej sústave, pred číselnú hodnotu uveďte znak „#“, napríklad: #FFC0CB . Samotná hodnota #FFC0CB pozostáva z troch hexadecimálnych číslic FF , C0 a CB . Význam tohto vstupu je rovnaký ako pri nastavovaní farby RGB formát(rgb(r, g, b) ) - každá hexadecimálna číslica v HEX kóde označuje sýtosť farieb v kanáli modelu RGB.

Tento kód zobrazí nasledujúce prvky:

A tu je obrázok s výsledkom zo sekcie "Nastavenie farby pomocou RGB" na tejto stránke vyššie.

Vidíme, že farby sú rovnaké.

Skrátený zápis HEX kódu farby je povolený: 6-miestne číslo môže byť napísané ako 3-miestne číslo. Platí to len vtedy, ak sa dve číslice vo farbe toho istého kanála opakujú.

To znamená, že je prijateľná nasledujúca skratka:

Napríklad farba #ff22aa môže byť napísaná ako #f2a alebo farba #44aa22 môže byť napísaná ako #4a2.

Nastavenie farby pomocou HSL

CSS3 má nový formát na špecifikovanie farieb.

Formát HSL je skratkou anglických slov: Hue (odtieň), Saturate (sýtosť) a Lightness (svetlosť).

Odtieň v HSL je hodnota farby na špeciálnom farebnom koliesku (obrázok 2) a je špecifikovaná v stupňoch. Ak nakreslíme analógie s modelom RGB, potom 0° zodpovedá červenej, 120° zodpovedá zelenej a 240° zodpovedá modrej.

Hodnota odtieňa sa zmení z 0 na 359.

Druhá hodnota - sýtosť (Saturate) sa nastavuje v percentách. Pri 100% sýtosti je farba čo najviac "šťavnatá", pri pohybe indikátora sýtosti smerom k 0% sa farba stáva čoraz matnejšou a roluje do sivej.

Tretia hodnota - svetlosť (Lightness) sa nastavuje tiež v percentách. Čím vyššie percento, tým jasnejšia bude farba. Extrémne hodnoty 0% a 100% budú indikovať čiernu (nedostatok svetla) a bielu (exponovanú) farbu a nezáleží na tom, ktorá farba z farebného kolieska bola zvolená v prvom kanáli. Za optimálnu hodnotu možno považovať hodnotu jasu farby rovnú 50 %.

Nastavenie farieb pomocou HSLA

Formát HSLA súvisí s HSL, rovnako ako RGB s RGBA. Vo formáte HSLA, ako aj v RGBA, je pridaný alfa kanál, ktorý je zodpovedný za priehľadnosť farieb.

Farba špecifikovaná vo formáte HSL je ľahšie čitateľná. Dá sa povedať, že je to intuitívne. Napríklad kód hsl(120,60%,50%) môže predstavovať konečnú farbu, ak je v pamäti obrázok farebného kolieska HSL. To sa nedá povedať o formátoch RGB a HEX, farebný kód špecifikovaný v týchto formátoch je jasný až po vykreslení na monitore.

Nové formáty v CSS3 (HSL, HSLA a RGBA) fungujú v prehliadačoch od verzií: IE 9.0, Opera 10.0 Firefox 3.0. Ako zabezpečiť, aby štýly fungovali v starších prehliadačoch?

Someblock ( farba pozadia: rgb(255,50,50); farba pozadia: rgba(255,50,50,0,85) )

Pri použití tohto kódu v starších prehliadačoch sa farba pozadia pre triedu .somebloсk, aj keď nepoužíva alfa kanál, zobrazí vo formáte RGB.

Na určenie farieb sa používajú hexadecimálne čísla. Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už názov napovedá, na čísle 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného. Napríklad číslo 255 v desiatkovej sústave zodpovedá číslu FF v šestnástkovej sústave. Aby sa predišlo nejasnostiam v definícii číselnej sústavy, pred hexadecimálnym číslom sa nachádza symbol hash #, napríklad #666999. Každá z troch farieb – červená, zelená a modrá – môže nadobúdať hodnoty od 00 do FF. Označenie farby je teda rozdelené do troch zložiek #rrggbb, kde prvé dva znaky označujú červenú zložku farby, dva stredné zelenú a posledné dva modrú. Je povolené používať skrátenú formu #rgb, kde by mal byť každý znak zdvojený. Záznam #fe0 by sa teda mal považovať za #ffee00.

podľa názvu

Prehliadače podporujú niektoré farby podľa názvu. V tabuľke. 1 zobrazuje názvy, hexadecimálny kód, hodnoty v RGB, formát HSL a popis.

S RGB

Farbu môžete definovať pomocou hodnôt červenej, zelenej a modrej v desatinných číslach. Každá z troch farebných zložiek nadobúda hodnotu od 0 do 255. Prijateľné je aj nastavenie farby v percentách, pričom 100 % bude zodpovedať číslu 255. Najprv sa určí kľúčové slovo rgb a potom sa zadajú farebné zložky uvedené v zátvorkách oddelené čiarkami, napríklad rgb(255 , 128, 128) alebo rgb(100 %, 50 %, 50 %).

RGBA

Formát RGBA je syntaxou podobný RGB, ale obsahuje alfa kanál, ktorý nastavuje priehľadnosť prvku. Hodnota 0 je úplne priehľadná, 1 je nepriehľadná a stredná hodnota ako 0,5 je priesvitná.

RGBA sa pridáva do CSS3, takže validácia kódu CSS by sa mala vykonávať podľa tejto verzie. Treba poznamenať, že štandard CSS3 je stále vo vývoji a niektoré jeho funkcie sa môžu zmeniť. Napríklad farba RGB pridaná do vlastnosti farba pozadia prejde validáciou, ale farba pridaná do vlastnosti pozadia nie. Prehliadače zároveň celkom správne chápu farbu pre obe vlastnosti.

HSL

Názov formátu HSL je tvorený kombináciou prvých písmen Hue (odtieň), Saturate (sýtosť) a Lightness (svetlosť). Odtieň je hodnota farby na farebnom koliesku (obr. 1) a udáva sa v stupňoch. 0° je červená, 120° je zelená a 240° je modrá. Hodnota odtieňa sa môže meniť od 0 do 359.

Ryža. 1. Farebné koliesko

Sýtosť je intenzita farby meraná v percentách od 0 % do 100 %. Hodnota 0 % označuje žiadnu farbu a odtieň sivej, 100 % je maximálna hodnota sýtosti.

Svetlosť nastavuje, aká jasná je farba, a určuje sa v percentách od 0 % do 100 %. Nízke hodnoty farbu stmavia, vysoké hodnoty zosvetlia, extrémne hodnoty 0% a 100% zodpovedajú čiernej a bielej.

HSLA

Formát HSLA je syntaxou podobný HSL, ale obsahuje alfa kanál, ktorý nastavuje priehľadnosť prvku. Hodnota 0 je úplne priehľadná, 1 je nepriehľadná a stredná hodnota ako 0,5 je priesvitná.

Hodnoty farieb v RGBA formáty, HSL a HSLA sú pridané do CSS3, takže pri používaní týchto formátov skontrolujte platnosť kódu voči verzii.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

POZOR

Všetky spôsoby odchytu leva uvedené na stránke sú teoretické a založené na výpočtových metódach. Autori neručia za vašu bezpečnosť pri ich používaní a zriekajú sa akejkoľvek zodpovednosti za výsledok. Pamätajte, že lev je dravec a nebezpečné zviera!

Výsledok tohto príkladu je znázornený na obr. 2.

Ryža. 2. Farby na webovej stránke

Vlad Merževič

V HTML je farba určená jedným z dvoch spôsobov: pomocou hexadecimálneho kódu a názvom niektorých farieb. Používa sa najmä metóda založená na šestnástkovej sústave, ako najuniverzálnejšia.

Hexadecimálne farby

HTML používa na špecifikáciu farieb hexadecimálne čísla. Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už názov napovedá, na čísle 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. V tabuľke. 6.1 ukazuje zhodu medzi desatinnými a hexadecimálnymi číslami.

Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného (tabuľka 6.2). Napríklad číslo 255 v desiatkovej sústave zodpovedá číslu FF v šestnástkovej sústave.

Aby sa predišlo nejasnostiam v definícii číselného systému, pred šestnástkovým číslom je znak libry #, napríklad #aa69cc. V tomto prípade nezáleží na veľkosti písmen, preto je dovolené písať #F0F0F0 alebo #f0f0f0.

Typická farba používaná v HTML je nasledovná.

Tu je farba pozadia webovej stránky nastavená na #FA8E47. Znak libry # pred číslom znamená, že je v šestnástkovej sústave. Prvé dve číslice (FA) definujú červenú zložku farby, tretia až štvrtá číslica (8E) zelenú zložku a posledné dve číslice (47) modrú zložku. Konečným výsledkom je táto farba.

Každá z troch farieb – červená, zelená a modrá – môže nadobudnúť hodnoty od 00 do FF, výsledkom čoho je celkovo 256 odtieňov. Celkový počet farieb teda môže byť 256x256x256 = 16 777 216 kombinácií. Farebný model založený na červenej, zelenej a modrej zložke sa nazýva RGB (červená, zelená, modrá; červená, zelená, modrá). Tento model je aditívny (od add - add), v ktorom pridaním všetkých troch komponentov vzniká biela.

Aby ste uľahčili navigáciu v hexadecimálnych farbách, vezmite do úvahy niektoré pravidlá.

• Ak sú hodnoty farebných komponentov rovnaké (napríklad: #D6D6D6), získa sa šedý odtieň. Čím vyššie číslo, tým svetlejšia farba a hodnoty sa menia z #000000 (čierna) na #FFFFFF (biela).
• Jasne červená farba sa vytvorí, ak je červená zložka nastavená na maximum (FF) a ostatné zložky sú nastavené na nulu. Farba s hodnotou #FF0000 je najčervenší možný červený odtieň. To isté platí pre zelenú (#00FF00) a modrú (#0000FF).
• Žltá (#FFFF00) sa získa zmiešaním červenej so zelenou. To je jasne vidieť na farebnom koliesku (obr. 6.1), ktoré predstavuje primárne farby (červená, zelená, modrá) a doplnkové alebo doplnkové. Patrí medzi ne žltá, azúrová a fialová (nazývaná aj purpurová). Vo všeobecnosti možno akúkoľvek farbu získať zmiešaním farieb susediacich s ňou. Takže azúrová (#00FFFF) sa získa kombináciou modrej a zelenej.

Ryža. 6.1. Farebný kruh

Farby založené na hexadecimálnych hodnotách nemusia byť vybrané empiricky. Vhodné na tento účel grafický editor ktorí môžu pracovať s rôznymi farebnými modelmi, napr. Adobe Photoshop. Na obr. 6.2 je zobrazené okno pre výber farby v tomto programe, čiara zakrúžkuje výslednú hexadecimálnu hodnotu aktuálnej farby. Môžete ho skopírovať a vložiť do kódu.

Ryža. 6.2. Výber farieb vo Photoshope

Webové farby

Ak nastavíte kvalitu farieb monitora na 8-bit (256 farieb), môže sa zobraziť rovnaká farba rôzne prehliadače svojim spôsobom. Súvisí to so spôsobom vykresľovania grafiky, keď prehliadač pracuje s vlastnou paletou a nemôže zobraziť farbu, ktorú v palete nemá. V tomto prípade je farba nahradená kombináciou pixelov iných, jemu blízkych farieb, ktoré napodobňujú danú. Aby farba zostala v rôznych prehliadačoch rovnaká, bola predstavená paleta takzvaných webových farieb. Webové farby sú farby, ktorých pre každú zložku - červená, zelená a modrá - je nastavená jedna zo šiestich hodnôt - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Šestnástková hodnota tohto komponentu je uvedená v zátvorkách. Celkový počet farieb zo všetkých možných kombinácií dáva 6x6x6 - 216 farieb. Príklad webovej farby je #33FF66.

Hlavnou črtou webovej farby je, že sa vo všetkých prehliadačoch zobrazuje rovnako. V súčasnosti je relevantnosť webových farieb veľmi malá kvôli zvýšeniu kvality monitorov a rozšíreniu ich možností.

Farby podľa názvu

Aby ste si nepamätali zbierku čísel, môžete namiesto toho použiť názvy bežne používaných farieb. V tabuľke. 6.3 zobrazuje názvy populárnych názvov farieb.

Nezáleží na tom, ako určíte farbu - podľa názvu alebo pomocou hexadecimálnych čísel. Vo svojom účinku sú tieto metódy rovnocenné. Príklad 6-1 ukazuje, ako nastaviť farby pozadia a textu webovej stránky.

Príklad 6.1. Farba pozadia a textu

Ukážkový text

AT tento príklad farba pozadia sa nastavuje pomocou atribútu bgcolor značky a farbu textu prostredníctvom atribútu text. Pre rozmanitosť je hodnota atribútu text nastavená na hexadecimálne číslo a bgcolor je nastavená na rezervovanú hodnotu. kľúčové slovo modrozelený.