Farby v HTML Vixova prirucka webelopera

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).

Preddefinovane farby

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.

Definovanie vlastnych farieb

Ako prvu vec si musite uvedomit, ake kombinacie zakladnych farieb vytvaraju pozadovane farby.

Pre zmiesavanie farieb plati:

  1. ak su vsetky zlozky rovnake, vysledna farba je cierna/siva/biela (podla intenzity)
  2. ak su vsetky zlozky nulove, vysledna farba je cierna
  3. ak su vsetky zlozky maximalne, vysledna farba je ziarivo biela
  4. ak je cervena (zelena/modra) zlozka nenulova a ostatne zlozky su nulove, vysledna farba je cervena (zelena/modra)
  5. cervena a zelena zlozka davaju zltu farbu
  6. cervena a modra zlozka davaju fialovu farbu
  7. zelena a modra zlozka davaju tyrkysovu farbu
  8. cim vyssie su hodnoty zloziek zakladnych farieb, tym je zakladna zlozka svetlejsia

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.

Priklady hexadecimalnych cisel:
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:

#f00000
syto cervena
#a00000
menej syta cervena
#600000
tmava cervena
#00f000
syto zelena
#d0d000
zlta
#a0a0a0
seda
#c0c0c0
biela (#ffffff je ziarivo biela, ako z reklamy na zubnu pastu...)
#000000
cierna
#d000d0
fialova (magenta)
#00d0d0
tyrkysova (cyan)

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