Valters Celmiņš
© 2006 - 2011
Apmācība mājas lapu izveidē izmantojot xHTML 1.0 un CSS 2.1 valodas

Krāsas

Vispirms vajadzētu saprast to, kā veidojas krāsa. Lai izveidotu kādu krāsu, būtībā visu laiku tiek jauktas trīs pamatkrāsas -  sarkanā ,  zaļā  un  zilā  krāsa. Šķiet, katrs no Jums kaut reizi mūžā ir spēlējies ar ūdenskrāsām un mēģinājis tās jaukt kopā, cerot, ka izveidosies kāda jauna krāsa. Šeit vienīgā atšķirība ir tā, ka tiek jauktas nevis ūdens vai guaša krāsas, bet gan gaismas krāsas, tādēļ arī atšķiras pamatkrāsas.

HEX krāsu formāts

Krāsu nosaka sešu ciparu-burtu kombinācija ar # simbolu priekšā. Katri divi simboli nosaka vienas pamatkrāsas intensitāti: pirmie divi simboli nosaka sarkanās krāsas intensitāti, otrie divi - zaļās, bet trešie divi - zilās.

p  {color: #xxxxxx;}

Katri divi simboli no vienas krāsas ir skaitliska vērtība, kas nosaka konkrētās krāsas intensitāti. Lai būtu vienkāršāk saprast, izskaidrošu vienkāršāk!

Iedomājaties, ka vienas krāsas XX vērtība ir skaitlis (katram skaitlim ir tā, ka pirmais tā simbols nosaka lielāku vienību, otrais - mazāku, piemēram, skaitlim 69: 6 nosaka desmitus (60), bet 9 nosaka vienus (9), tādēļ arī pirmais skaitļa simbols atstāj lielāku iespaidu uz skaitļa vērtību). Jo šis skaitlis kļūst lielāks, jo krāsa top spilgtāka, bet jo mazāks - tumšāka. Tā varam mainīt krāsas "daudzumu" katrai no trīs pamatkrāsām, kombinējot un iegūstot dažādas citas krāsas. Piemēram, dzelteno krāsu var iegūt, sajaucot sarkano un zaļo! Tad krāsas skaitliskā vērtība būs sekojoša: pirmie četri X lielumi būs vislielākie, pēdējie divi - vismazākie.

Lieta, kas parasti mazliet sajauc galvu, ir tajā, ka viena X vērtība ir no 0 līdz 15. Ja mums pierastajā skaitīšanas sistēmā no diviem cipariem var izveidot maksimāli 100 dažādus skaitļus (0-99), tad HEX skaitīšanas sistēmā var izveidot 256 dažādus "skaitļus" (0-255).
Lai izveidotu šādu skaitīšanas sistēmu pierakstā, aiz vērtības "9" nākošā vērtība ir "A", tālāk "B" un tā tālāk līdz vērtībai "F". "00" (nulles) ir mazākā vērtība - šāda vērtība pasaka to, ka attiecīgā gaisma netiks izstarota. "FF" ir maksimālā vērtība - gaisma tiek spīdināta tik intensīvi, cik vien tas ir iespējams.

Ja vienas krāsa ietvaros esošie simboli ir vienādi, tad var lietot saīsināto pierakstu, piemēram, sarkanās krāsas vietās varat rakstīt nevis #990000 bet gan #900.

Pievienoju arī nelielu krāsu paleti, lai Jums būtu kaut nedaudz vieglāk saprast, kā reāli tad veidojas krāsas.

#000000, #000 #444444, #444 #888888, #888 #BBBBBB, #BBB #FFFFFF, #FFF
#330000, #300 #660000, #600 #990000, #900 #BB0000, #B00 #FF0000, #F00
#003300, #030 #006600, #060 #009900, #090 #00BB00, #0B0 #00FF00, #0F0
#000033, #003 #000066, #006 #000099, #009 #0000BB, #00B #0000FF, #00F
#33300, #330 #666600, #660 #999900, #990 #BBBB00, #BB0 #FFFF00, #FF0
#003333, #033 #006666, #066 #009999, #099 #00BBBB, #0BB #00FFFF, #0FF
#330033, #303 #660066, #606 #990099, #909 #BB00BB, #B0B #FF00FF, #F0F


RGB krāsu formāts

Tas tikai pierakstā nedaudz atšķiras no HEX krāsu formāta: vēl jo projām tiek saglabāta ideja, ka krāsu nosaka trīs pamatkrāsu kombinācijas, tikai šoreiz tās nav uzdotas ar HEX vērtībām, bet gan ar normālu (decimālo) skaitļu palīdzību.

p  {color: rgb(xxx, xxx, xxx);}

Šīs vērtības ir savstarpēji saistītas binārās matemātikas līmenī (lai arī kas tas nebūtu), un principā ir viens un tas pats, tikai savādāk uzrakstīts! Piemēram, krāsa #BBC100 RGB paletē būtu izsakāma šādi: rgb(187,193,0). Pašu aprēķinu nemācīšu, bet parādīšu, kur var atrast šīs vērtības:

Krāsu nosaukumi

Protams, visām krāsām nosaukumus nav iespējams izdomāt pat ja aprobežojamies ar to, ka dators spēj attēlot "tikai" 16'777'216 krāsas, tomēr dažām krāsām ir doti savi nosaukumi. Visi nosaukumi ir angļu valodā, un principā, jebkura angliski nosaucamā krāsa der, lai norādītu krāsu CSS valodā:

p    {color: red;}
body {background-color: balck;}

Neliela tabula ieskatam, kādi krāsu nosaukumi ir pieejami (tie ne tuvu nav visi):

black gray white
darkred red magenta
blue skyblue cyan
green lightgreen lime
sienna orange yellow