>> Správa farieb
Hexadecimálne hodnoty farieb RGB
Metódy opisu a spracovania farieb sa navzájom líšia v tom, na aké konečné zobrazenie sú určené. Porovnajme napríklad zobrazenia farieb pre polygrafiu a pre počítačové monitory. V prvom prípade je základ biely farba papiera, na ktorú sa následne nanesú tri základné farby: Modrá, Fialová a žltá. Miešaním medzi sebou a s bielou farbou papiera v rôznych pomeroch, tieto tri základné farby dávajú rôzne farebné odtiene, okrem čistej čiernej, alebo pri úplnej absencii farieb dávajú bielemu papieru. Ak k nim pridáme čiernu, dostaneme CMYK- spôsob prenosu farby, keď sa požadovaná farba získa odčítaním chýbajúcich farieb od bielej.
V druhom prípade je základ čierna farba obrazovky monitora, ktorej každá bunka svieti jednou z troch farieb: červená- červená, zelená- zelené a Modrá-Modrá. Potom pri úplnej absencii akejkoľvek žiary dostaneme čisto čiernu farbu obrazovky a ktorákoľvek z požadovaných farieb je daná pomerom každej z troch farieb. V tomto prípade dostaneme RGB- Metóda prenosu farieb. Primárne farby môžu mať význam od 0
predtým 255
, alebo z 0%
predtým 100%
, alebo môže byť vyjadrená ako hexadecimálna hodnota. Na obrázku nižšie môžete vidieť výsledky miešania základných farieb.
Hexadecimálna číselná sústava, na rozdiel od desiatkovej číselnej sústavy, nemá vo svojom číselnom rade desať číslic, ale šestnásť - odtiaľ názov. V súlade s tým môžu byť neopakujúce sa varianty kombinácií dvoch číslic iba - 256 , ak chcete pokračovať v rade číslic po 9 listy od A predtým F, takže riadok bude vyzerať takto -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
V tomto prípade je farba daná tromi hexadecimálnymi číslami, z ktorých každé pozostáva z dvoch číslic. Prvé číslo určuje intenzitu červená farby, priemer zelená, posledná vec- Modrá farby. Všetky čísla môžu nadobúdať hodnoty v rozsahu od 00 predtým FF(od 0 do 255). Napríklad: zelená farba je uvedená ako #00FF00, červená - ako #FF0000, modrá - ako #0000FF, biela - ako #FFFFFF, úplná absencia farby alebo čierna sa uvádza ako #000000 .
Vo formulári nižšie môžete pre každú z troch farieb nastaviť ľubovoľné hexadecimálne hodnoty a kliknutím do výstupného poľa zobraziť výsledok ich zmiešania.
Príklady niektorých hexadecimálnych hodnôt farieb RGB: červená, modrá a zelená gradácia.
| vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Určenie farby pomocou reťazcových literálov
Pre uľahčenie používania dostali niektoré farby a ich kombinácie názvy, ktoré rozpoznávajú všetky prehliadače a mnohé z nich bolo možné nastaviť podľa názvu. V tabuľke nižšie sú uvedené niektoré názvy farieb:
| vyhliadka | názov | vyhliadka | názov | vyhliadka | názov | vyhliadka | názov |
| biely | Červená | Oranžová | žltá | ||||
| zelená | Modrá | Fialová | čierna | ||||
| Alice modrá | starožitná biela | Aqua | akvamarín | ||||
| Azure | Béžová | Bisque | blanchedalmond | ||||
| Modrofialová | Hnedá | Burlywood | Cadetblue | ||||
| chartreuse | Čokoláda | Coral | Nevädza modrá | ||||
| Cornsilk | Crimson | tyrkysový | tmavomodrá | ||||
| Darkcyan | darkgoldenrod | tmavo-sivá | tmavozelený | ||||
| Darkkhaki | Darkmagenta | Darkolivegreen | tmavooranžová | ||||
| Darkorchid | tmavo červená | tmavý losos | Tmavomorská zelená | ||||
| tmavoslate modrá | tmavoslate šedá | tmavotyrkysová | Tmavofialová | ||||
| Deeppink | hlboká nebeská modrá | Dimgray | dodger blue | ||||
| Ohnivá tehla | Kvetinovo biele | lesná zeleň | Fuschia | ||||
| Gainsboro | duch biely | Zlato | zlatobyľ | ||||
| Šedá | Zelenožltá | Medová Rosa | hotpink | ||||
| Indická červená | Indigo | Slonovina | kaki | ||||
| Levanduľa | Levanduľová ruža | Lemonchiffon | svetlo modrá | ||||
| svetlý koral | svetlocyan | svetlostudenárodožltá | svetlo zelená | ||||
| svetlo sivá | Svetlo ružová | svetlý losos | Svetlomorská zelená | ||||
| svetloskymodrá | Svetlá bridlicová šedá | svetlo oceľovo modrá | svetlo žltá | ||||
| vápno | Limetková zelená | bielizeň | purpurová | ||||
| gaštanové | stredný akvamarín | stredne modrá | Stredná orchidea | ||||
| Stredne fialová | Strednezelená | Stredne bridlicovomodrá | Stredne jarná zelená | ||||
| stredne tyrkysová | stredne fialová | polnočná modrá | mätový krém | ||||
| mistyrose | Navajobiela | námorníctvo | oldlace | ||||
| Olivový | Olivedrab | oranžová červená | Orchidea | ||||
| palegoldenrod | Svetlo zelená | paleturquoise | palefialová | ||||
| papayawhip | Peachpuff | Peru | Ružová | ||||
| Slivka | Prášková modrá | Rosybrown | kráľovská modrá | ||||
| sedlovo hnedá | seagreen | Mušle | Sienna | ||||
| Strieborná | modrá obloha | Slateblue | Slategray | ||||
| Sneh | Springgreen | oceľovo modrá | Tan | ||||
| Modrozelený | Bodliak | Paradajka | tyrkysová | ||||
| fialový | Pšenica | Whitesmoke | žltá zelená |
Používanie bezpečného výberu farieb
Bohužiaľ, na rôzne platformy, pri rôznych systémových nastaveniach je správna reprodukcia farieb problém. Ide o to, že prehliadač sa vždy snaží prispôsobiť farebnú paletu dokumentu systémové nastavenia a monitorovacie schopnosti, pomocou vlastného miešania farieb a ich nahrádzania. V dôsledku toho používateľ niekedy nevidí úplne to, čo mu správca webu chcel ukázať. Východisko z tejto situácie sa našlo v použití palety, ktorej každú farbu zaručene vykreslia rovnako všetky prehliadače na rôznych platformách. Tento tzv zaručené paleta, známa aj ako bezpečné paleta. Táto paleta obsahuje farby, ktorých farebné zložky nadobúdajú nasledujúce hodnoty: 00 ,33 ,66 ,99 , CC,FF, vo všetkých možných 216 ich kombinácie.
| vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód | vyhliadka | kód |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33 CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99 CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399 CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699 CC | 336699 | 006699 | ||||||
| 0066FF | 3366 CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000 FF | 0000 CC | 0033CC | 000033 | ||||||
| 3333FF | 3300 FF | 3300 CC | 3333 CC | 000099 | 000066 | ||||||
| 9999 CC | 6666FF | 6666 CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600 FF | 330099 | 330066 | ||||||
| 9966 CC | 9966FF | 6600 CC | 6633 CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900 FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900 CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
V HTML môže byť farba určená tromi spôsobmi:
Nastavenie farby v HTML podľa jej názvu
Niektoré farby môžu byť špecifikované ich názvom pomocou názvu farby na obrázku anglický jazyk. Najčastejšie kľúčové slová: čierna (čierna), biela (biela), červená (červená), zelená (zelená), modrá (modrá) atď.:
Farba textu – červená
Najobľúbenejšie farby štandardu Consortium World Wide Web(English World Wide Web Consortium, W3C):
| Farba | názov | Farba | názov | Farba | názov | Farba | názov |
|---|---|---|---|---|---|---|---|
| čierna | Šedá | Strieborná | biely | ||||
| žltá | vápno | Aqua | Fuchsiová | ||||
| Červená | zelená | Modrá | Fialová | ||||
| gaštanové | Olivový | námorníctvo | Modrozelený |
Príklad použitia rôznych názvov farieb:
Príklad: nastavenie farby podľa jej názvu
- Skúste to sami"
Hlavička na červenom pozadí
Hlavička na oranžovom pozadí
Hlavička na pozadí vápna
Biely text na modrom pozadí
Hlavička na červenom pozadí
Hlavička na oranžovom pozadí
Hlavička na pozadí vápna
Biely text na modrom pozadí
Určenie farby pomocou RGB
Pri zobrazovaní rôznych farieb na monitore sa za základ berie paleta RGB. Akákoľvek farba sa získa zmiešaním troch hlavných: R - červená, G - zelená (zelená), B - modrá (modrá). Jas každej farby je daný jedným bytom, a preto môže nadobúdať hodnoty od 0 do 255. Napríklad RGB (255,0,0) sa vykreslí ako červená, pretože červená je nastavená na najvyššiu hodnotu (255) a zvyšok sú nastavené na 0 Farbu môžete nastaviť aj v percentách. Každý z parametrov udáva úroveň jasu zodpovedajúcej farby. Napríklad: hodnoty rgb(127, 255, 127) a rgb(50%, 100%, 50%) nastavia rovnakú strednú sýtosť zelenej farby:
Príklad: Určenie farby pomocou RGB
- Skúste to sami"
rgb(127, 255, 127)
rgb (50 %, 100 %, 50 %)
rgb(127, 255, 127)
rgb (50 %, 100 %, 50 %)
Nastavte farbu podľa hexadecimálnej hodnoty
hodnoty R G B možno zadať aj pomocou hexadecimálnych (HEX) hodnôt farieb v tvare: #RRGGBB kde RR (červená), GG (zelená) a BB (modrá) sú hexadecimálne hodnoty od 00 do FF (rovnaké ako desatinná 0- 255). Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už z jej názvu vyplýva, na čísle 16. Šestnástková sústava používa tieto znaky: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Tu sú čísla od 10 do 15 nahradené latinskými písmenami. Čísla väčšie ako 15 v šestnástkovej sústave predstavujú spojenie dvoch znakov do jednej hodnoty. Napríklad, najväčší počet 255 palcov desiatková sústava zodpovedá najvyššej hodnote FF v šestnástkovej sústave. Na rozdiel od desiatkovej sústavy je pred šestnástkovým číslom znak libry. # , napríklad #FF0000 sa vykreslí ako červená, pretože červená je nastavená na najvyššiu hodnotu (FF) a ostatné farby sú nastavené na minimálna hodnota(00). Znaky za symbolom hash # možno písať veľkými aj malými písmenami. Hexadecimálny systém umožňuje použiť skrátenú formu #rgb, kde sa každý znak rovná dvojnásobku. Záznam #f7O by sa teda mal považovať za #ff7700.
Príklad: Farba HEX
- Skúste to sami"
červená: #FF0000
zelená: #00FF00
modrá: #0000FF
červená: #FF0000
zelená: #00FF00
modrá: #0000FF
červená+zelená=žltá: #FFFF00
červená+modrá=fialová: #FF00FF
zelená+modrá=azúrová: #00FFFF
Zoznam bežne používaných farieb (názov, HEX a RGB):
| anglické meno | Ruské meno | Ukážka | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amarant | amarant | #E52B50 | 229 | 43 | 80 | |
| Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
| Aqua | modro zelená | #00FFFF | 0 | 255 | 255 | |
| Azure | Azure | #007FFF | 0 | 127 | 255 | |
| čierna | čierna | #000000 | 0 | 0 | 0 | |
| Modrá | Modrá | #0000FF | 0 | 0 | 255 | |
| Modrá Bondi | Plážová voda Bondi | #0095B6 | 0 | 149 | 182 | |
| Mosadz | Mosadz | #B5A642 | 181 | 166 | 66 | |
| Hnedá | Hnedá | #964B00 | 150 | 75 | 0 | |
| Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
| tmavo jarná zelená | Tmavo jarná zelená | #177245 | 23 | 114 | 69 | |
| Emerald | Emerald | #50C878 | 80 | 200 | 120 | |
| Baklažán | baklažán | #990066 | 153 | 0 | 102 | |
| Fuchsiová | Fuchsiová | #FF00FF | 255 | 0 | 255 | |
| Zlato | Zlato | #FFD700 | 250 | 215 | 0 | |
| Šedá | Šedá | #808080 | 128 | 128 | 128 | |
| zelená | zelená | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| vápno | Limetka | #CCFF00 | 204 | 255 | 0 | |
| malachit | malachit | #0BDA51 | 11 | 218 | 81 | |
| námorníctvo | Tmavomodrá | #000080 | 0 | 0 | 128 | |
| okrová | okrová | #CC7722 | 204 | 119 | 34 | |
| Olivový | Olivový | #808000 | 128 | 128 | 0 | |
| Oranžová | Oranžová | #FFA500 | 255 | 165 | 0 | |
| broskyňa | Peach | #FFE5B4 | 255 | 229 | 180 | |
| Tekvica | Tekvica | #FF7518 | 255 | 117 | 24 | |
| Fialová | fialový | #800080 | 128 | 0 | 128 | |
| Červená | Červená | #FF0000 | 255 | 0 | 0 | |
| Šafran | Šafran | #F4C430 | 244 | 196 | 48 | |
| morská zeleň | zelené more | #2E8B57 | 46 | 139 | 87 | |
| Bažinatá zelená | Bolotný | #ACB78E | 172 | 183 | 142 | |
| Modrozelený | modro zelená | #008080 | 0 | 128 | 128 | |
| Ultramarínový | ultramarín | #120A8F | 18 | 10 | 143 | |
| fialový | fialový | #8B00FF | 139 | 0 | 255 | |
| žltá | žltá | #FFFF00 | 255 | 255 | 0 | |
Farebné kódy (pozadie) podľa sýtosti a odtieňa.
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. Najčastejšie používaná metóda je založená na hexadecimálnej sústave, ako najuniverzálnejšej.
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.
| FA | + | 8E | + | 47 | = | FA8E47 |
Každá z troch farieb – červená, zelená a modrá – môže nadobudnúť hodnoty od 00 do FF, čo nakoniec tvorí 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ú nemá v palete. 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ú tie 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. AT tento moment relevancia webových farieb je veľmi malá vzhľadom na zvýšenie kvality monitorov a rozšírenie 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.
| Názov farby | Farba | Popis | Hexadecimálna hodnota |
|---|---|---|---|
| čierna | čierna | #000000 | |
| Modrá | Modrá | #0000FF | |
| fuchsiová | Svetlo fialová | #FF00FF | |
| sivá | Tmavošedý | #808080 | |
| zelená | zelená | #008000 | |
| vápno | svetlo zelená | #00FF00 | |
| gaštanové | Tmavo červená | #800000 | |
| námorníctvo | Tmavomodrá | #000080 | |
| olivový | Olivový | #808000 | |
| Fialová | Tmavo fialová | #800080 | |
| červená | Červená | #FF0000 | |
| striebro | svetlo sivá | #C0C0C0 | |
| modrozelený | modro zelená | #008080 | |
| biely | biely | #FFFFFF | |
| žltá | žltá | #FFFF00 |
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
V tomto príklade je farba pozadia nastavená pomocou atribútu bgcolor značky
a farbu textu prostredníctvom atribútu text. Pre spestrenie je hodnota atribútu text nastavená na hexadecimálne číslo a bgcolor je nastavené na rezervované kľúčové slovo modrozelená .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
| internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
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.
| názov | Farba | Kód | RGB | HSL | Popis |
|---|---|---|---|---|---|
| biely | #ffff alebo #fff | rgb(255,255,255) | hsl(0,0%,100%) | biely | |
| striebro | #c0c0c0 | rgb(192,192,192) | hsl (0,0 %, 75 %) | Šedá | |
| sivá | #808080 | rgb(128,128,128) | hsl (0,0 %, 50 %) | Tmavošedý | |
| čierna | #000000 alebo #000 | rgb(0,0,0) | hsl(0,0%,0%) | čierna | |
| gaštanové | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Tmavo červená | |
| červená | #ff0000 alebo #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Červená | |
| oranžová | #ffa500 | rgb(255,165,0) | hsl (38,8,100%,50%) | Oranžová | |
| žltá | #ffff00 alebo #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | žltá | |
| olivový | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Olivový | |
| vápno | #00ff00 alebo #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | svetlo zelená | |
| zelená | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | zelená | |
| aqua | #00ffff alebo #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Modrá | |
| Modrá | #0000ff alebo #00f | rgb(0,0,255) | hsl(240,100%,50%) | Modrá | |
| námorníctvo | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Tmavomodrá | |
| modrozelený | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | modro zelená | |
| fuchsiová | #ff00ff alebo #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Ružová | |
| Fialová | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | fialový |
S RGB
| internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
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. Je tiež prijateľné nastaviť farbu v percentách, pričom 100 % bude zodpovedať číslu 255. Najprv špecifikujte kľúčové slovo rgb a potom v zátvorkách oddelených čiarkami uveďte farebné zložky, napríklad rgb(255, 128, 128) alebo rgb(100 %, 50 %, 50 %).
RGBA
| internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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
| internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
názov formát HSL vytvorené z kombinácie 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
| internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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 tento príklad znázornené na obr. 2.
Ryža. 2. Farby na webovej stránke