Farby v HTML

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:

ak su vsetky zlozky rovnake, vysledna farba je cierna/siva/biela (podla intenzity)
ak su vsetky zlozky nulove, vysledna farba je cierna
ak su vsetky zlozky maximalne, vysledna farba je ziarivo biela
ak je cervena (zelena/modra) zlozka nenulova a ostatne zlozky su nulove, vysledna farba je cervena (zelena/modra)
cervena a zelena zlozka davaju zltu farbu
cervena a modra zlozka davaju fialovu farbu
zelena a modra zlozka davaju tyrkysovu farbu
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 (2⁸) 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:

nastavte farbu textu a pozadia tak, aby bol text bez problemov citatelny
pamatajte, ze niektore farby nemusia vyzerat rovnako vo vsetkych prehliadacoch a/alebo na vsetkych platformach (Unix, Windows) a/alebo na vsetkych monitoroch
nesnazte sa pouzivat farebny text za kazdu cenu, ak to zabranuje jednoduchej orientacii v obsahu stranky. Typickym prikladom citovanym aj v jednej velmi dobrej knizke, ktoru som si nedavno listoval v knihkupectve, je modre pozadie s cervenym pismom ( alebo naopak). Skuste si taku kombinaciu - a "pridete o oci". Ak mate novsi prehliadac, vidite tieto kombinacie priamo v texte (pouzil som na to kaskadove styly, o ktorych sa v tejto dokumentacii zatial nedocitate).

Predchadzajuca tema:	Pribuzne temy:	Nasledujuca tema:
-	Sprievodca vytvaranim stranky krok za krokom Abecedny zoznam prikazov HTML	Specialne znaky v HTML