Farby
V tejto kapitole si povieme niečo viac o farbách, ako ich vnímame v reálnom svete, ako sú reprezentované v tlači a ako ich napríklad vníma počítač a tým pádom aj webstránka. Človek rozlišuje vlastným okom vo väčšine obrovský počet rôznych farebných odtieňov. Nejdem tu príliš rozoberať farby z fyzikálneho hľadiska, ale zo základov fyziky vieme (a keď nie, tak už budeme :-D ), že každý farebný odtieň sa skladá z určitého množstva (zložiek) iných farebných odtieňov, jednoducho takmer každá farba je zložená z iných farieb. Človek pri vymýšľaní mechanických (elektronických) zariadení, ktoré nejakým spôsobom mali niečo dočinenia s farbami, či už ich mali nejako zachytiť (fotoaparát) alebo zobraziť (televízor), musel tento problém vyriešiť. Na začiatku sme mali čiernobiele aj televízory, aj fotografie. Na začiatku sa neriešilo zobrazenie/zachytenie farieb, všetko bolo čiernobiele. Dá sa povedať, že farebné odtienie sa pohybovali akokeby na priamke, kde na ľavom konci bola úplne biela farba a na pravom konci čierna farba. Farby medzi nimi boli zľava doprava odtiene čiernej, akokeby jej intenzita/množstvo, ktoré sa miešalo s bielou farbou. Ak sme dali kus čiernej, bola to svetlošedá, ak sme dali viac čiernej bolo to tmavošedé až čierne.
Slová ako kus čiernej a podobne by sme si mohli predstaviť, že máme nejaké priesvitné tmavé fólie. Ak pred lampu alebo iný svetelný zdroj položíme takúto jednu fóliu, máme svetlošedú farbu. Ak ich postavíme viacej a spojíme, máme tmavšiu farbu, lebo preniká menej svetla. Ak ich dáme úplne veľa, svetlo ani nebudeme vidieť a dostaneme čisto čiernu farbu. Nejako podobne vyriešil človek skladanie rôznych farebných odtieňov. Vybádal, že nám stačí veľmi málo základných farieb, pomocou ktorých vieme vyskladať väčšinu ostatných. Tie farby sú červená (red), zelená (green) a modrá (blue), často označované ako RGB model. Systém získania žiadanej farby je podobný, pred nejaký svetelný zdroj postavíme niekoľko fólii zelenej farby a červenej, modrú nepoužijeme a získame nejakú farbu. Ak chceme iný odtieň, dáme viacej fólii jednej farby a podobne. Do zariadení sa to premietlo tak, že svetlo prechádza cez fólie týchto troch zložiek, ktoré majú rôznu farebnú intenzitu (silu) a dokopy vytvoria žiadaný odtieň. A na čo si vlastne toto všetko hovoríme? Lebo podobne fungujú farby aj vo svete počítačov.
Povedzme si najprv, ako funguje farebná tlačiareň. Farebná atramentová tlačiareň funguje tak, že má dva typy zásobníkov atramentu. Jeden je čierny a druhý je farebný. Čo ale znamená ten farebný? Čo je vo vnútri, že vie z toho vytlačiť všetky farby? Obsahuje to kúštik z dvesto najpoužívanejších farieb a tie potom dáva na papier? Nie. Presne ako sme si popísali skorej, obsahuje tri základné farby, len tršoka iné, ako sme si popísali skorej. Tlačiarne používajú model CMYK, kde jednotlivé písmenká predsatvujú farby cyan (azúrová), purpurová (magenta), žltá (yellow) a k ako key (kľúčová farba alebo black-čierna). Pri tlači si tlačiareň sama učruje pre každú bodku na papieri, koľko musí dať z každej farby, aby dosiahla výsledný efekt. Pri väčších tlačiarniach je možné kupovať cartridge alebo tonery zvlášť pre každú z týchto farieb.
Nejako podobne fungujú aj zobrazovacie zariadenia (monitory, displeje, obrazovy, telky...), ale vo väčšine pracujú v RGB režime, takže určujeme intenzitu červenej, zelenej a modrej farby. Rozmedzie intenzít (množstva) jednotlivých farieb býva vo väčšine od 0 – 255. Kde nula znamená ani kúsok z tejto farby a 255 znamená 100 percent tejto farby. Číslo 128 znamená polovica – 50% tejto farby. A na čo si toto všetko vravíme? Lebo presne takto vieme zadať farbu akú len chceme v jazyku HTML pre naše elementy. Doteraz sme si zadávali farby len slovne, pretože to bolo na začiatok najľahšie. Ale farbu vieme priradiť aj pomocou inej hodnoty, jeden typ je pomocou RGB modelu. Ako to funguje? Ako hodnotu použijeme slovo rgb, za ktorým nasledujú okrúhle zátvorky. V nich sa nachádzajú tri číselné hodnotu v rozmedzí 0-255 oddelené čiarkou, ktoré predsatvujú postupne zložky red, green a blue. Podobne aj v grafických programoch vieme každú farbu určit pomocou hodnôt týchto troch farieb. Takisto sú farby reprezentované aj týmto (RGB) modelom. Ak máme nejakú fotku, obrázok, hocijakú grafiku v programe otvorené a chceme zistiť farbu ľubovoľného pixelu (najmenšieho bodu), dostaneme vo väčšine hodnoty týchto troch farieb. Pomocou tejto reprezentácie vieme farieb vieme jasne určiť každú farbu v počítači a vieme s nimi pracovať. Poďme si teda ukázať, ako vieme zadať farby pomocou RGB modelu v CSS:
<!DOCTYPE html>
<html>
<head>
<style>
h2{padding: 20px;}
</style>
</head>
<body>
<h2 style="color: white; background-color:rgb(0, 0, 0)">
Pozadie s farbou rgb(0, 0, 0)
</h2>
<h2 style="background-color:rgb(255, 0, 0)">
Pozadie s farbou rgb(255, 0, 0)
</h2>
<h2 style="background-color:rgb(0, 255, 0)">
Pozadie s farbou rgb(0, 255, 0)
</h2>
<h2 style="background-color:rgb(0, 0, 255)">
Pozadie s farbou rgb(0, 0, 255)
</h2>
<h2 style="background-color:rgb(255, 165, 0)">
Pozadie s farbou rgb(255, 165, 0)
</h2>
<h2 style="background-color:rgb(255, 255, 0)">
Pozadie s farbou rgb(255, 255, 0)
</h2>
<h2 style="background-color:rgb(0, 255, 255)">
Pozadie s farbou rgb(0, 255, 255)
</h2>
<h2 style="border: 1px solid black; background-color:rgb(255, 255, 255)">
Pozadie s farbou rgb(255, 255, 255)
</h2>
</body>
</html>
V tejto ukážke sme si ukázali zopár základných farieb a ich zadanie pomocou metódy rgb. Skúste sa s touto ukážkou troška pohrať a skúšajte si ľubovoľne meniť jednotlivé hodnoty v zátvorke a uvidíte, ako sa budú výsledné farby meniť. Možno ste si položili otázku, no dobre, ale skade mám vedieť správnu kombináciu týchto troch čísiel pre farbu akú chceme. Existuje veľa programov, ktoré nám na obrazovke vedia zistiť farbu každého pixelu a vypíšu nám hodnotu RGB, tým sa ale budeme zaoberať neskôr. Okrem toho, dizajnér alebo osoba, ktorá navrhuje dizajn, zadáva v ánvrhu pre programátora aj všetky druhy farieb, ktoré sú v návrhu použité aj s príslušnými kódmi, takže programátor iba skopíruje kód a nemusí sa starať o to, aká farba to je. Okrem metódy zadania názvu farby alebo RGB modely existuje ešte jeden spôsob, ako zadať farbu a ten ja asi aj najpoužívanejší a je to pomocou hodnoty v šesťnástkovej sústave (hexadecimálnej).
Asi to znie pre vás hrôzostrašne, čo za termín sme to použili. Aby sme sa zbytočne takto v prváku nezaťažovali príliš odbornými vecami, neskôr sa naučíme niečo o číslach a písmenách v počítači a niečo aj o číselných sústavách, že čo je to desiatková sústava, čo je to dvojková (binárna) a čo je to šestnástková (hexadecimálna). Vám stačí zatiaľ teraz vedieť, že je to text (reťazec znakov), ktorý má dĺžku 6 znakov a znak môže byť číslo od 0-9 alebo písmeno od A po F. To, čo predstavuje tento kód konkrétne vo svete farieb a ako to súvisí s modelom RGB si nejdeme teraz zbytočne vysvetľovať. Ide o to, aby ste vedeli, že to existuje a že najčastejšie sa farby vo svete PC prezentujú týmto kódom. Tak ako aj model RGB, aj toto číslo vám poskytne dizajnér alebo hocijaký grafický program pri práce s farbami. Zadávanie tejto hodnoty sa skladá zo znaku mriežky (#), za ktorou nasleduje kód farby:
<!DOCTYPE html>
<html>
<head>
<style>
h2{padding: 20px;}
</style>
</head>
<body>
<h2 style="color: white; background-color: #000000">
Pozadie s farbou #000000
</h2>
<h2 style="background-color: #FF0000">
Pozadie s farbou #FF0000
</h2>
<h2 style="background-color: #00FF00">
Pozadie s farbou #00FF00
</h2>
<h2 style="background-color: #0000FF">
Pozadie s farbou #0000FF
</h2>
<h2 style="background-color: #FFA500">
Pozadie s farbou #FFA500
</h2>
<h2 style="background-color: #FFFF00">
Pozadie s farbou #FFFF00
</h2>
<h2 style="background-color: #00FFFF">
Pozadie s farbou #00FFFF
</h2>
<h2 style="border: 1px solid black; background-color: #FFFFFF">
Pozadie s farbou #FFFFFF
</h2>
</body>
</html>
Aj v tejto ukážke sa môžete pohrať a skúšať si zadávať rôzne hodnoty. Každý znak tohto kódu (jeden zo šiestich znakov) môžete zameniť buď za číslo alebo príslušné písmeno z rozmedzia A-F.