HTML umoznuje pouzivat farby pre pozadie dokumentu alebo pre pismo. Farby mozete nastavit bud pre cely dokument prikazom <BODY> alebo pre vybranu cast textu pomocou prikazu <FONT>. Okrem toho ich mozete pouzit v prikazoch pre tabulky na urcenie pozadia tabuliek. Farby sa urcuju bud svojim menom (preddefinovane farby) alebo kodom, ktory definuje farbu pomocou RGB zloziek (cervena, zelena, modra).
Nasledujuce farby (je ich 140) som otestoval v prehliadacoch Netscape 4, Internet Explorer 4, Mozilla M15 a vyssie (mali by fungovat aj v ich nizsich verziach). Uvadzam ich v tabulke, ktora ukazuje danu farbu ako pozadie (prvy riadok) a text na bielom (druhy riadok) resp. ciernom (treti riadok) pozadi. Pomocou tejto tabulky si mozete rychlo predstavit kazdu farbu.
aliceblue | antiquewhite | aqua | aquamarine | azure | |||||
aliceblue | antiquewhite | aqua | aquamarine | azure | |||||
aliceblue | antiquewhite | aqua | aquamarine | azure | |||||
beige | bisque | black | blanchedalmond | blue | |||||
beige | bisque | black | blanchedalmond | blue | |||||
beige | bisque | black | blanchedalmond | blue | |||||
blueviolet | brown | burlywood | cadetblue | chartreuse | |||||
blueviolet | brown | burlywood | cadetblue | chartreuse | |||||
blueviolet | brown | burlywood | cadetblue | chartreuse | |||||
chocolate | coral | cornflowerblue | cornsilk | crimson | |||||
chocolate | coral | cornflowerblue | cornsilk | crimson | |||||
chocolate | coral | cornflowerblue | cornsilk | crimson | |||||
cyan | darkblue | darkcyan | darkgoldenrod | darkgray | |||||
cyan | darkblue | darkcyan | darkgoldenrod | darkgray | |||||
cyan | darkblue | darkcyan | darkgoldenrod | darkgray | |||||
darkgreen | darkkhaki | darkmagenta | darkolivegreen | darkorange | |||||
darkgreen | darkkhaki | darkmagenta | darkolivegreen | darkorange | |||||
darkgreen | darkkhaki | darkmagenta | darkolivegreen | darkorange | |||||
darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | |||||
darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | |||||
darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | |||||
darkslategray | darkturquoise | darkviolet | deeppink | deepskyblue | |||||
darkslategray | darkturquoise | darkviolet | deeppink | deepskyblue | |||||
darkslategray | darkturquoise | darkviolet | deeppink | deepskyblue | |||||
dimgray | dodgerblue | firebrick | floralwhite | forestgreen | |||||
dimgray | dodgerblue | firebrick | floralwhite | forestgreen | |||||
dimgray | dodgerblue | firebrick | floralwhite | forestgreen | |||||
fuchsia | gainsboro | ghostwhite | gold | goldenrod | |||||
fuchsia | gainsboro | ghostwhite | gold | goldenrod | |||||
fuchsia | gainsboro | ghostwhite | gold | goldenrod | |||||
gray | green | greenyellow | honeydew | hotpink | |||||
gray | green | greenyellow | honeydew | hotpink | |||||
gray | green | greenyellow | honeydew | hotpink | |||||
indianred | indigo | ivory | khaki | lavender | |||||
indianred | indigo | ivory | khaki | lavender | |||||
indianred | indigo | ivory | khaki | lavender | |||||
lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | |||||
lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | |||||
lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | |||||
lightcyan | lightgoldenrodyellow | lightgreen | lightgrey | lightpink | |||||
lightcyan | lightgoldenrodyellow | lightgreen | lightgrey | lightpink | |||||
lightcyan | lightgoldenrodyellow | lightgreen | lightgrey | lightpink | |||||
lightsalmon | lightseagreen | lightskyblue | lightslategray | lightsteelblue | |||||
lightsalmon | lightseagreen | lightskyblue | lightslategray | lightsteelblue | |||||
lightsalmon | lightseagreen | lightskyblue | lightslategray | lightsteelblue | |||||
lightyellow | lime | limegreen | linen | magenta | |||||
lightyellow | lime | limegreen | linen | magenta | |||||
lightyellow | lime | limegreen | linen | magenta | |||||
maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | |||||
maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | |||||
maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | |||||
mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | |||||
mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | |||||
mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | |||||
midnightblue | mintcream | mistyrose | moccasin | navajowhite | |||||
midnightblue | mintcream | mistyrose | moccasin | navajowhite | |||||
midnightblue | mintcream | mistyrose | moccasin | navajowhite | |||||
navy | oldlace | olive | olivedrab | orange | |||||
navy | oldlace | olive | olivedrab | orange | |||||
navy | oldlace | olive | olivedrab | orange | |||||
orangered | orchid | palegoldenrod | palegreen | paleturquoise | |||||
orangered | orchid | palegoldenrod | palegreen | paleturquoise | |||||
orangered | orchid | palegoldenrod | palegreen | paleturquoise | |||||
palevioletred | papayawhip | peachpuff | peru | pink | |||||
palevioletred | papayawhip | peachpuff | peru | pink | |||||
palevioletred | papayawhip | peachpuff | peru | pink | |||||
plum | powderblue | purple | red | rosybrown | |||||
plum | powderblue | purple | red | rosybrown | |||||
plum | powderblue | purple | red | rosybrown | |||||
royalblue | saddlebrown | salmon | sandybrown | seagreen | |||||
royalblue | saddlebrown | salmon | sandybrown | seagreen | |||||
royalblue | saddlebrown | salmon | sandybrown | seagreen | |||||
seashell | sienna | silver | skyblue | slateblue | |||||
seashell | sienna | silver | skyblue | slateblue | |||||
seashell | sienna | silver | skyblue | slateblue | |||||
slategray | snow | springgreen | steelblue | tan | |||||
slategray | snow | springgreen | steelblue | tan | |||||
slategray | snow | springgreen | steelblue | tan | |||||
teal | thistle | tomato | turquoise | violet | |||||
teal | thistle | tomato | turquoise | violet | |||||
teal | thistle | tomato | turquoise | violet | |||||
wheat | white | whitesmoke | yellow | yellowgreen | |||||
wheat | white | whitesmoke | yellow | yellowgreen | |||||
wheat | white | whitesmoke | yellow | yellowgreen | |||||
Ak vam tieto farby nestacia, nic nebrani tomu, aby ste si nadefinovali svoju vlastnu farbu. Treba vediet, ze kazda farba obsahuje cervenu, zelenu a modru zlozku (RGB), ktorych zmiesavanim dostanete ziadanu farbu a jej odtien.
Ako prvu vec si musite uvedomit, ake kombinacie zakladnych farieb vytvaraju pozadovane farby.
Pre zmiesavanie farieb plati:
Hodnoty pre jednotlive zlozky su z intervalu 0-255, ale vyjadruju sa pomocou hexadecimalnych cisiel (00-ff). Je to preto, ze na znazornenie cisla do 255 (28) postacia dva znaky. Farba je teda urcena tromi dvojicami hexadecimalnych cisel, co je 6 znakov, ktore mozu teoreticky vyjadrit akukolvek truecolor farbu (24 bitov). Kazda dvojica urcuje intenzitu zlozky, ako som uz spomenul, vyssie cislo znamena svetlejsiu farbu. Pred cislo, ktore vyjadruje takto definovanu farbu, sa pise znak "#".
Pre tych, ktori nevedia nic o hexadecimalnej sustave: je to sustava so zakladom
16. Cislice maju hodnoty 0,1,2,3,4,5,6,7,8,9 a teraz pozor, A,B,C,D,E a F.
Jednou cislicou sa da vyjadrit teda cislo do 16, tak, ako sa da v desiatkovej
sustave vyjadrit cislo do 10.
Desiatkove: | 1 | 7 | 10 | 11 | 15 | 16 | 32 | 255 |
---|---|---|---|---|---|---|---|---|
Hexadecimalne: | 1 | 7 | 0A | 0B | 0F | 10 | 20 | FF |
Ked si zvyknete na to, ze cisla mozu obsahovat aj pismena, zistite, ze aj tu
platia pravidla aritmetiky, aj ked iba po zlozkach. Farba #f0a0c0
je napriklad "cervensia" ako #a0a0c0
, pretoze jej cervena zlozka je
svetlejsia (#f0 > #a0). Tiez mozete odhadnut, ze #c0c0d0
ma rozhodne blizsie k sivej farbe
ako #c0d0e0
, pretoze hodnoty jej
zloziek su takmer rovnake a to, ako sme si ukazali pred chvilou, znamena bielu
(sivu/ciernu) farbu. Mimochodom, cierna a biela farba su v zasade rovnake,
rozdiel je iba v tom, ze v ciernej farbe su hodnoty vsetkych zloziek
"stiahnute na nulu".
Opacny priklad: mame farbu zadefinovanu ako
#f0a000
. (Nezabudajte na znak "#"!) Co znamena takto
definovana farba?
Po rozlozeni na zlozky dostavame:
R = f0
G = a0
B = 00
Modra zlozka je nulova, cervena a zelena zlozka dohromady vytvaraju zltu farbu a kedze je cervena zlozka silnejsia, farba bude oranzova.
Dalsie jednoduche priklady:
Pri pouzivani farieb si treba dat pozor na niekolko problemov:
Predchadzajuca tema: | Pribuzne temy: | Nasledujuca tema: |
---|---|---|
- | Sprievodca vytvaranim stranky krok za krokom Abecedny zoznam prikazov HTML |
Specialne znaky v HTML |