>> Správa farieb
Hexadecimálne hodnoty farieb RGB
Metódy popisu a spracovania farby sa navzájom líšia v tom, na akú konečnú prezentáciu sú určené. Porovnajme napríklad reprezentácie farieb pre tlač a pre počítačové monitory. V prvom prípade sa berie základ biely farba papiera, na ktorý sa následne použijú tri základné farby: Modrá, Fialová a žltá... Tieto tri základné farby, ktoré sa miešajú navzájom a s bielou farbou papiera v rôznych pomeroch, poskytujú rôzne farebné odtiene, s výnimkou čisto čiernej, alebo pri úplnej absencii farieb poskytujú bielu farbu papiera. Ak k nim pridáme čiernu, dostaneme CMYK- spôsob podania farieb, keď sa požadovaná farba získa odčítaním chýbajúcich farieb od bielej.
V druhom prípade sa berie základ čierna farba obrazovky monitora, z ktorých každá bunka svieti v jednej z troch farieb: červená-červená, zelená-zelená a Modrá-Modrá. Potom v úplnej absencii akejkoľvek žiary získame čistú čiernu farbu obrazovky a všetky požadované farby sa nastavia pomerom každej z týchto troch farieb. V tomto prípade dostaneme RGB-spôsob prenosu farby. Primárne farby sa môžu pohybovať od 0
predtým 255
, alebo z 0%
predtým 100%
alebo môže byť reprezentovaná ako hexadecimálna hodnota. Na obrázku nižšie vidíte výsledky miešania základných farieb.
Hexadecimálna číselná sústava, na rozdiel od desatinného čísla, v jej rade číslic nemá desať číslic, ale šestnásť - odtiaľ názov. Neopakujúce sa varianty kombinácií dvoch číslic teda môžu byť iba - 256 , aby ste pokračovali v sérii číslic po 9 listy od A predtým F preto bude séria vyzerať takto -
0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
V tomto prípade je farba určená 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 mať hodnoty v rozsahu od 00 predtým FF(od 0 do 255). Napríklad: zelená je daná ako # 00FF00, červená - ako # FF0000, modrý - ako # 0000FF, biela - ako #FFFFFF, úplná absencia farby alebo čiernej je uvedená ako #000000 .
V nižšie uvedenom formulári môžete nastaviť ľubovoľné hexadecimálne hodnoty pre každú z troch farieb a kliknutím na tlačidlo vo výstupnom poli uvidíte výsledok ich zmiešania.
Príklady niektorých hexadecimálnych hodnôt farieb RGB sú gradácie červenej, modrej a zelenej.
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 |
Špecifikácia farby pomocou reťazcových literálov
Kvôli jednoduchosti použitia boli niektorým farbám a ich kombináciám priradené názvy, ktoré rozpoznávajú všetky prehliadače, a mnohé z nich bolo možné nastaviť podľa názvu. Nasledujúca tabuľka uvádza 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 | ||||
Aliceblue | Starožitný biely | Aqua | Akvamarín | ||||
Azure | Béžová | Bisque | Blanchedalmond | ||||
Blueviolet | Hnedá | Burlywood | Cadetblue | ||||
Chartreuse | Čokoláda | Coral | Chrpa kvetová | ||||
Cornsilk | Crimson | Tyrkysový | Tmavomodrá | ||||
Darkcyan | Darkgoldenrod | Tmavo-sivá | Tmavozelený | ||||
Darkkhaki | Darkmagenta | Darkolivegreen | Darkorange | ||||
Darkorchid | Tmavo červená | Darksalmon | Darkseagreen | ||||
Darkslateblue | Darkslategray | Darkturquoise | Darkviolet | ||||
Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
Pálená tehla | Kvetinová biela | Forestgreen | Fuschia | ||||
Gainsboro | Ghostwhite | Zlato | Zlatobyľ | ||||
Sivá | Greenyellow | Medová Rosa | Hotpink | ||||
Indianred | Indigo | Slonovina | Kaki | ||||
Levanduľa | Levanduľový rumenec | Lemonchiffon | Svetlo modrá | ||||
Lightcoral | Lightcyan | Lightcoldenrodyellow | Svetlo zelená | ||||
Svetlo sivá | Svetlo ružová | Svetelný losos | Svetlá | ||||
Lightskyblue | Lightslategray | Lightsteelblue | Svetlo žltá | ||||
Vápno | Limetková zelená | Bielizeň | Purpurová | ||||
Gaštanová | Stredný akvamarín | Stredne modrá | Stredneorchidový | ||||
Stredne purpurový | Stredne zlatá | Stredne zlatá modrá | Stredná jarná zeleň | ||||
Stredne tyrkysová | Stredne fialové | Polnočná modrá | Mintcream | ||||
Mistyrose | Navajowhite | Námorníctvo | Oldlace | ||||
Olivový | Olivedrab | Oranžová | Orchidea | ||||
Palegoldenrod | Svetlo zelená | Paleturquoise | Palevioletred | ||||
Papayawhip | Peachpuff | Peru | Ružová | ||||
Slivka | Prášková modrá | Rosybrown | Kráľovská modrá | ||||
Saddlebrown | Seagreen | Mušle | Sienna | ||||
Striebro | Modrá obloha | Slateblue | Slategray | ||||
Sneh | Jarná zeleň | Steelblue | Tan | ||||
Modrozelený | Bodliak | Paradajka | tyrkysová | ||||
fialový | Pšenica | Biely dym | Žltá zelená |
Použitie bezpečného výberu farieb
Bohužiaľ, na rôznych platformách s rôznym nastavením systému je správne podanie farieb problémom. Ide o to, že prehliadač sa vždy pokúša prispôsobiť paletu farieb dokumentu systémovým nastaveniam a možnostiam monitora nezávislým miešaním a nahrádzaním farieb. Výsledkom je, že používateľ niekedy nevidí presne to, čo mu web-master chcel ukázať. Východisko z tejto situácie bolo nájdené v použití palety, ktorej všetky farby je zaručené, že budú vykresľované rovnako vo všetkých prehliadačoch na rôznych platformách. Ide o tzv zaručené paleta, tiež ju nazývali bezpečné paleta. Táto paleta obsahuje farby, ktorých farebné zložky majú 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 | ||||||
99 FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
66FF00 | 66FF33 | 33FF00 | 33CC00 | 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 | ||||||
99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
3333FF | 3300 FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
CCCCFF | 9999FF | 6666FF | 6600 FF | 330099 | 330066 | ||||||
9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
CC99FF | CC66FF | 9933FF | 9900 FF | 660099 | 663366 | ||||||
CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
FF99CC | 3399 FF | 0099 FF | CC0066 | 993366 | 660033 | ||||||
6699 FF | 3399 FF | FF0066 | CC3366 | 996666 | 663333 | ||||||
CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
FFCCCC | 999 FF | FF6666 | FF3333 | F0000 | CC0033 | ||||||
FF6633 | CC3300 | 3300 FF | F0000 | CC0000 | 990000 | ||||||
FFCC99 | FFCC66 | 6600 FF | CC6633 | 993300 | 660000 | ||||||
9 000 FF | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
V HTML je možné farbu nastaviť tromi spôsobmi:
Nastavenie farby v HTML podľa jej názvu
Niektoré farby je možné špecifikovať ich názvom, pričom ako hodnotu použite názov farby v angličtine. Najbežnejšie kľúčové slová sú čierna, biela, červená, zelená, modrá atď.
Farba textu - červená
Najpopulárnejšie farby štandardu World Wide Web Consortium (W3C) sú:
Farba | názov | Farba | názov | Farba | názov | Farba | názov |
---|---|---|---|---|---|---|---|
čierna | Sivá | Striebro | biely | ||||
žltá | Vápno | Aqua | Fuchsie | ||||
Č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 “
Okruh na červenom pozadí
Okruh na oranžovom pozadí
Titulok na limetovom pozadí
Biely text na modrom pozadí
Okruh na červenom pozadí
Okruh na oranžovom pozadí
Titulok na limetovom pozadí
Biely text na modrom pozadí
Špecifikácia farby pomocou RGB
Pri zobrazení rôznych farieb na monitore sa berie ako základ paleta RGB. Akákoľvek farba sa získa zmiešaním troch hlavných: R - červená (červená), G - zelená (zelená), B - modrá... Jas každej farby je určený jedným bajtom, a preto môže mať hodnoty od 0 do 255. Napríklad RGB (255,0,0) sa zobrazuje ako červený, pretože červená je nastavená na najvyššiu hodnotu (255) a ostatné sú nastavené na 0 Môžete tiež nastaviť farbu v percentách. Každý z parametrov označuje úroveň jasu zodpovedajúcej farby. Napríklad: rgb (127, 255, 127) a rgb (50%, 100%, 50%) nastavia rovnakú zelenú saturáciu média:
Príklad: Špecifikácia farby pomocou RGB
- Skúste to sami “
rgb (127, 255, 127)
rgb (50%, 100%, 50%)
rgb (127, 255, 127)
rgb (50%, 100%, 50%)
Hexadecimálne nastavenie farieb
Hodnoty R. G B je možné zadať aj pomocou hexadecimálnych (HEX) hodnôt farby vo forme: #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, na rozdiel od desatinnej, vychádza, ako naznačuje jej názov, z čísla 16. Šestnástková sústava používa nasledujúce znaky: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, С, D, E, F. Tu sú čísla od 10 do 15 nahradené latinskými písmenami. Čísla väčšie ako 15 v hexadecimálnom formáte predstavujú kombináciu dvoch znakov do jednej hodnoty. Napríklad najvyššie číslo 255 v desatinnom čísle je najvyššie FF v hexadecimálnom formáte. Na rozdiel od desatinnej sústavy je pred hexadecimálnym číslom umiestnený znak hash # napríklad # FF0000 je zobrazený ako červený, pretože červená je nastavená na najvyššiu hodnotu (FF) a ostatné farby sú nastavené na minimálnu hodnotu (00). Znaky za symbolom mriežky # môžete písať veľkými aj malými písmenami. Hexadecimálny systém vám umožňuje použiť skrátený tvar ako #rgb, kde každý znak je ekvivalentom dvojnásobku. Záznam # f7O by sa teda mal považovať za # ff7700.
Príklad: farebný ŠESŤAH
- 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žných farieb (názov, HEX a RGB):
anglické meno | Ruské meno | Ukážka | ŠESŤAH | 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 | |
Bondi modrá | Voda na pláži Bondi | # 0095B6 | 0 | 149 | 182 | |
Mosadz | Mosadz | # B5A642 | 181 | 166 | 66 | |
Hnedá | Hnedá | # 964B00 | 150 | 75 | 0 | |
Cerulean | Azure | # 007BA7 | 0 | 123 | 167 | |
Tmavá jarná zelená | Tmavá jarná zelená | #177245 | 23 | 114 | 69 | |
Smaragd | Smaragd | # 50C878 | 80 | 200 | 120 | |
Baklažán | Baklažán | #990066 | 153 | 0 | 102 | |
Fuchsie | Fuchsie | # FF00FF | 255 | 0 | 255 | |
Zlato | Zlato | # FFD700 | 250 | 215 | 0 | |
Sivá | Sivá | #808080 | 128 | 128 | 128 | |
zelená | zelená | # 00FF00 | 0 | 255 | 0 | |
Indigo | Indigo | # 4B0082 | 75 | 0 | 130 | |
Jade | Jade | # 00A86B | 0 | 168 | 107 | |
Vápno | Vápno | # CCFF00 | 204 | 255 | 0 | |
Malachit | Malachit | # 0BDA51 | 11 | 218 | 81 | |
Námorníctvo | námornícka modrá | #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 | Broskyňa | # 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 | |
Močiar zelený | Močiar | # ACB78E | 172 | 183 | 142 | |
Modrozelený | Modro zelená | #008080 | 0 | 128 | 128 | |
Ultramarín | 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.
Na nastavenie farieb sa používajú hexadecimálne čísla. Šestnástková sústava, na rozdiel od desatinnej, vychádza, ako naznačuje jej názov, z čísla 16. Čísla budú nasledujúce: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C, D, E, F. Čísla od 10 do 15 sa nahrádzajú latinskými písmenami. Čísla väčšie ako 15 v hexadecimálnom formáte sú vytvorené kombináciou dvoch čísel do jedného. Napríklad 255 desatinných miest je hexadecimálna hodnota FF. Aby sa predišlo nedorozumeniam v definícii číselného systému, je hashovací znak # umiestnený pred hexadecimálne číslo, napríklad # 666999. Každá z troch farieb - červená, zelená a modrá - sa môže pohybovať od 00 do FF. Farebné označenie je teda rozdelené na tri zložky #rrggbb, kde prvé dva znaky označujú červenú zložku farby, dva stredné - zelenú a posledné dve - modrú. Je dovolené používať skrátený tvar ako #rgb, kde by sa každý znak mal zdvojnásobiť. Položka # fe0 by sa teda mala 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. Tabuľka 1 sú uvedené názvy, hexadecimálny kód, hodnoty RGB, HSL a popis.
názov | Farba | Kód | RGB | Hsl | Popis |
---|---|---|---|---|---|
biely | #ffffff alebo #fff | rgb (255,255,255) | hsl (0,0%, 100%) | biely | |
striebro | # c0c0c0 | rgb (192,192,192) | hsl (0,0%, 75%) | Sivá | |
šedá | #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,0255) | hsl (240,100%, 50%) | Modrá | |
námorníctvo | #000080 | rgb (0,0,128) | hsl (240,100%, 25%) | námornícka modrá | |
modrozelený | #008080 | rgb (0,128,128) | hsl (180,100%, 25%) | Modro zelená | |
fuchsie | # ff00ff alebo # f0f | rgb (255,0255) | 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 určiť pomocou desatinných hodnôt červenej, zelenej a modrej zložky. Každá z troch farebných zložiek má hodnotu od 0 do 255. Je tiež dovolené nastaviť farbu v percentách, pričom 100% bude zodpovedať číslu 255. Najprv je zadané kľúčové slovo rgb a potom v zátvorkách sú označené farebné zložky oddelené čiarkami, 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ý riadi priehľadnosť prvku. Hodnota 0 zodpovedá úplnej priehľadnosti, 1 nepriehľadnosti a stredná hodnota, napríklad 0,5 až polopriehľadnosť.
RGBA bola pridaná do CSS3, takže overovanie kódu CSS by sa malo vykonávať pomocou tejto verzie. Je potrebné poznamenať, že štandard CSS3 je stále vo vývoji a niektoré funkcie v ňom sa môžu zmeniť. Napríklad farba RGB pridaná do vlastnosti farba pozadia je overená, ale farba pridaná do vlastnosti pozadia už nie je. Prehliadače zároveň úplne správne chápu farbu oboch vlastností.
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átu HSL je vytvorený 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 pohybovať od 0 do 359.
Ryža. 1. Farebné koliesko
Sýtosť je intenzita farby, meraná v percentách od 0% do 100%. Hodnota 0% neznamená žiadnu farbu a odtieň šedej, 100% je maximálna hodnota sýtosti.
Svetlosť určuje, ako svetlá je farba, a je udávaná v percentách od 0% do 100%. Malé hodnoty stmavnú farbu a vysoké hodnoty zosvetlia, extrémne hodnoty 0% a 100% zodpovedajú čiernej a bielej farbe.
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ý definuje transparentnosť prvku. Hodnota 0 zodpovedá úplnej priehľadnosti, 1 nepriehľadnosti a stredná hodnota, napríklad 0,5 až polopriehľadnosť.
V CSS3 boli pridané hodnoty farieb vo formátoch RGBA, HSL a HSLA, takže pri použití týchto formátov skontrolujte platnosť kódu podľa verzie.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Varovanie
Všetky metódy chytenia leva uvedené na tomto webe sú teoretické a sú založené na výpočtových metódach. Autori nezaručujú vašu bezpečnosť pri ich použití a zriekajú sa akejkoľvek zodpovednosti za výsledok. Pamätajte si, že lev je predátor a nebezpečné zviera!
Výsledok tohto príkladu je znázornený na obr. 2.
Ryža. 2. Farby na webovej stránke
Vlad Merzhevich
V HTML je farba špecifikovaná jedným z dvoch spôsobov: pomocou hexadecimálneho kódu a názvom niektorých farieb. Ako najuniverzálnejšia sa používa metóda založená na hexadecimálnom číselnom systéme.
Hexadecimálne farby
Na zadanie farieb v HTML sa používajú hexadecimálne čísla. Šestnástková sústava, na rozdiel od desatinnej, vychádza, ako naznačuje jej názov, z čísla 16. Čísla budú nasledujúce: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C, D, E, F. Čísla od 10 do 15 sa nahrádzajú latinskými písmenami. Tabuľka 6.1 ukazuje zhodu medzi desatinnými a šestnástkovými číslami.
Čísla väčšie ako 15 v hexadecimálnom systéme sú tvorené kombináciou dvoch čísel do jedného (tabuľka 6.2). Napríklad 255 desatinných miest je hexadecimálna hodnota FF.
Aby sa predišlo nedorozumeniam v definícii číselného systému, je hashovací znak # umiestnený pred hexadecimálne číslo, napríklad # aa69cc. V tomto prípade register nezáleží, takže je prípustné napísať # F0F0F0 alebo # f0f0f0.
Typická farba používaná v HTML vyzerá takto.
Tu je farba pozadia webovej stránky nastavená na # FA8E47. Hash # pred číslom znamená, že je hexadecimálny. Prvé dve číslice (FA) definujú červenú zložku farby, tretia až štvrtá číslica (8E) sú zelené a posledné dve číslice (47) modré. V dôsledku toho získate túto farbu.
FA | + | 8E | + | 47 | = | FA8E47 |
Každá z troch farieb - červená, zelená a modrá - môže nadobúdať hodnoty od 00 do FF, čo má za následok 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 - to add), v ktorom pridaním všetkých troch zložiek vzniká biela farba.
Aby bola navigácia v hexadecimálnych farbách jednoduchšia, vezmite do úvahy niektoré pravidlá.
- Ak sú hodnoty farebných zložiek rovnaké (napríklad: # D6D6D6), potom sivý odtieň. Čím je číslo väčšie, tým sú farby svetlejšie, hodnoty sa pohybujú od # 000000 (čierna) do #FFFFFF (biela).
- Jasne červená farba sa vytvorí, ak je červená zložka nastavená na maximum (FF) a ostatné súčasti sú nastavené na nulu. Farba # FF0000 je najčervenším možným odtieňom červenej. To isté platí pre zelenú (# 00FF00) a modrú (# 0000FF).
- Žltá (#FFFF00) sa získava zmiešaním červenej so zelenou. To je zreteľne viditeľné na farebnom koliesku (obr. 6.1), kde sú uvedené základné farby (červená, zelená, modrá) a doplnkové alebo doplnkové farby. Patria sem žltá, azúrová a purpurová (tiež nazývaná purpurová). Všeobecne platí, že akúkoľvek farbu je možné získať zmiešaním blízkych farieb. Azúrová (# 00FFFF) sa teda získa kombináciou modrej a zelenej.
Ryža. 6.1. Farebný kruh
Hexadecimálne farby nie je potrebné vyberať empiricky. Na tento účel je vhodný grafický editor, ktorý môže pracovať s rôznymi farebnými modelmi, napríklad Adobe Photoshop. Na obr. 6.2 ukazuje okno pre výber farby v tomto programe, výsledná hexadecimálna hodnota aktuálnej farby je vyznačená čiarou. Môžete ho skopírovať a prilepiť do kódu.
Ryža. 6.2. Okno na výber farby vo Photoshope
Webové farby
Ak nastavíte kvalitu farieb monitora na 8 bitov (256 farieb), rovnakú farbu je možné v rôznych prehliadačoch zobrazovať odlišne. Je to spôsobené spôsobom zobrazenia grafiky, kde 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, blízkych, farieb, ktoré napodobňujú zadanú. Aby sa farba v rôznych prehliadačoch nezmenila, predstavili sme paletu takzvaných webových farieb. Webové farby sú farby, pre každú z nich - červenú, zelenú a modrú - je nastavená jedna zo šiestich hodnôt - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Hexadecimálna hodnota tejto zložky 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íkladom farby webu je # 33FF66.
Hlavnou črtou farby webu je, že vyzerá rovnako vo všetkých prehliadačoch. V súčasnej dobe je relevancia 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 sadu čísel neuložili do pamäte, môžete namiesto toho použiť názvy bežne používaných farieb. Tabuľka 6.3 uvádza názvy obľúbených názvov farieb.
Názov farby | Farba | Popis | Hexadecimálna hodnota |
---|---|---|---|
čierna | čierna | #000000 | |
Modrá | Modrá | # 0000FF | |
fuchsie | Svetlo fialová | # FF00FF | |
šedá | Tmavošedý | #808080 | |
zelená | zelená | #008000 | |
vápno | Svetlo zelená | # 00FF00 | |
gaštanové | Tmavo červená | #800000 | |
námorníctvo | námornícka modrá | #000080 | |
olivový | Olivový | #808000 | |
Fialová | Tmavofialová | #800080 | |
červená | Červená | # FF0000 | |
striebro | Svetlo sivá | # C0C0C0 | |
modrozelený | Modro zelená | #008080 | |
biely | biely | #FFFFFF | |
žltá | žltá | # FFFF00 |
Nezáleží na tom, akým spôsobom určíte farbu - jej názvom alebo pomocou hexadecimálnych čísel. Tieto metódy sú svojou činnosťou rovnaké. Príklad 6.1 ukazuje, ako nastaviť farbu pozadia a textu webovej stránky.
Príklad 6.1. Farba pozadia a textu
Ukážkový text
V tomto prípade je farba pozadia nastavená pomocou atribútu bgcolor značky
, a farbu textu pomocou atribútu text. Pre zmenu je textový atribút nastavený na hexadecimálne číslo a bgcolor je nastavené na kľúčové slovo vyhradené pre teal.Podvody v Minecrafte kvety alebo Minecraft kódy formátovanie, umožnite každému hráčovi pridávať kvety a formátovať text všetkými spôsobmi priamo v Minecrafte. Farebné kódy od & 0-9-do & a-f. Pridajte ich pred svoj text. Správy hráča môžu obsahovať farebné kódy, ktoré vám umožňujú pridať farbu k vašim návrhom.
Farby a formátovacie kódy
Ampersand (&), za ktorým nasleduje hexadecimálne číslo v správach, signalizuje klientovi, aby pri zobrazení textu zmenil farby. Alternatívne môže byť text formátovaný znakom & za ktorým nasleduje písmeno. Do kníh, príkazových blokov, názvu servera, popisu servera (motd), svetových mien, plakiet a dokonca aj názvov hráčov môžete pridať rôzne farby.
Formátovanie textu v konfiguráciách alebo v hre je veľmi jednoduché pomocou nižšie uvedenej tabuľky farieb. & r sa používa na vymazanie všetkých kódov, t.j. & mAAA & rBBB sa zobrazia ako AAA BBB.
Pre vaše pohodlie uvádzame tabuľku existujúcich farebných kódov v Minecrafte:
Kód | názov | Tech. Meno | Farba symbolu | Farba tieňa symbolu | ||||||
---|---|---|---|---|---|---|---|---|---|---|
R. | G | B | Hex | R. | G | B | Hex | |||
&0 | čierna | čierna | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
&1 | námornícka modrá | tmavomodrá | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
&2 | Tmavozelený | tmavozelený | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
&3 | Tmavo modrá zelená | dark_aqua | 0 | 170 | 170 | 00AAAA | 0 | 42 | 42 | 002A2A |
&4 | Tmavo červená | tmavo červená | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
&5 | Tmavofialová | tmavofialová | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
&6 | Zlato | zlato | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
&7 | Sivá | šedá | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
&8 | Tmavošedý | tmavo-sivá | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
&9 | Modrá | Modrá | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
& a | zelená | zelená | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
& b | Modro zelená | aqua | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
& c | Červená | červená | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
& d | Svetlo fialová | light_purple | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
& e | žltá | žltá | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
& f | biely | biely | 255 | 255 | 255 | Ffffff | 63 | 63 | 63 | 3F3F3F |
Niekedy potrebujete podčiarknuť, prečiarknuť, Zlatý klinec akýkoľvek text... Na tento účel sa používa formátovanie textu. Používa sa rovnako ako farby (pred text, ktorý dávame kód napr. & lMinecraft = Minecraft.
Pre vaše pohodlie je nižšie uvedená tabuľka formátovacích kódov:
Kód | názov |
---|---|
& k | Čarovný text |
& l | Miniatúra |
& m | Prečiarknutý text |
& n | Podčiarknutý text |
& o | Kurzíva text |
& r | Neformátovaný text |