Exista trei feluri distincte de a defini o culoare. Cea mai simpla metoda este aceea de a numi culorile (in engleza). De exemplu: black, white, red, green, si blue. Am alaturat mai jos numele de culori care sunt suportate in HTML.
Color | Hexa | Color | Hex | Color | Hex | Color | Hex |
---|---|---|---|---|---|---|---|
aqua | #00FFFF | green | #008000 | navy | #000080 | silver | #C0C0C0 |
black | #000000 | gray | #808080 | olive | #808000 | teal | #008080 |
blue | #0000FF | lime | #00FF00 | purple | #800080 | white | #FFFFFF |
fuchsia | #FF00FF | maroon | #800000 | red | #FF0000 | yellow | #FFFF00 |
Cu ceva vreme in urma, Internet explorer era singurul browser care avea suport pentru sistemul de culor RGB. In ziua de astazi, toate browserele cunoscute, ofera suport pentru acest sitem de culori. Pe de alta parte, sistemul RGB, se foloseste foarte mult in CSS
RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culoripoate lua orice valoare intre 0 (nu exista culoare) si 255 (in totalitate acea culoare). Am alaturat mai jos forma de scriere a culorilor in RGB. Daca folosesti un browser care nu este Internet Explorer nu vei avea nici un rezultat.
bgcolor="rgb(255,255,255)" | White |
bgcolor="rgb(255,0,0)" | Red |
bgcolor="rgb(0,255,0)" | Green |
bgcolor="rgb(0,0,255)" | Blue |
Sistemul hexazecimal este destul de dificil la prima vedere. Cu toate astea te asigur ca odata cu trecerea timpului, si cu putina practica, il vei intelege pe deplin. Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este de incredere si este compatibil nu numai in aplicatiile web dar si aplicatii locale precum gimp, photoshop, corel, etc.
Sistemul coduri de culori hexazecimale este o reprezentare de 6 caractere de culoare. Primele doua caractere (RR) reprezinta culoarea rosu (Red), urmatoarele doua (GG) culoarea verde (Green), iar ultimele doua (BB) culoarea albastra (Blue).
htmlbgcolor="#RRGGBB"
Tabelul urmator arata cum literele sunt integrate in sistemul hexazecimal, marind astfel posibilitatile de combinare pentru obtinerea codurilor de culori in HTML.
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
In acest fel posibilitatile cresc iar sistemul poate avea 16 valori.
Un exemplu de cod hexazecimal ar fi:
htmlbgcolor="#FFFFFF"
Litera "F" este valoarea maxima pe care o poate avea sistemul. La intalnirea acestui cod un browser va afisa culoarea alba. In cazul in care vrei sa afli valoarea numerica a acestei culori avem formula urmatoare:
html(15 * 16) + (15) = 255
Formula este foarte simpla. Se ia prima valoare a lui "F" sau 15 si se inmulteste cu 16 si se adauga celei de-a doua valoare 15. Rezultatul este 255, valoarea maxima pe care o poate avea o culoare primara.
htmlbgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5
Sistemul hexazecimal este cel mai utilizal pentru crearea paginilor. Acesta este compatibil cu majoritatea browser-elor, in acest fel interfata pagini web nu va fi distorsionata. Pentru a adauga o nota de siguranta iti recomand sa folosesti culorile imperechiate (sau true colors) precum: "#0011EE", "#44HHFF", sau "#117788. Conform statisticilor acestea nu vor fi schimbate indiferent de browser.
Am alaturat mai jos un tabel cu codurile corespunzatoare acestor culori sigure.
Pentru a simplifica tabelul de mai jos am afisat culorile sigure folosind coduri scurte. Tine minte in acest sub-capitol vorbim de culori imperechiate, asa ca de exemplu culoarea reprezentata ca fiind 369 este de fapt 33 66 99 iar FFC va fi FF FF CC.
*000 | 300 | 600 | 900 | C00 | *F00 |
*003 | 303 | 603 | 903 | C03 | *F03 |
006 | 306 | 606 | 906 | C06 | F06 |
009 | 309 | 609 | 909 | C09 | F09 |
00C | 30C | 60C | 90C | C0C | F0C |
*00F | 30F | 60F | 90F | C0F | *F0F |
030 | 330 | 630 | 930 | C30 | F30 |
033 | 333 | 633 | 933 | C33 | F33 |
036 | 336 | 636 | 936 | C36 | F36 |
039 | 339 | 639 | 939 | C39 | F39 |
03C | 33C | 63C | 93C | C3C | F3C |
03F | 33F | 63F | 93F | C3F | F3F |
060 | 360 | 660 | 960 | C60 | F60 |
063 | 363 | 663 | 963 | C63 | F63 |
066 | 366 | 666 | 966 | C66 | F66 |
069 | 369 | 669 | 969 | C69 | F69 |
06C | 36C | 66C | 96C | C6C | F6C |
06F | 36F | 66F | 96F | C6F | F6F |
090 | 390 | 690 | 990 | C90 | F90 |
093 | 393 | 693 | 993 | C93 | F93 |
096 | 396 | 696 | 996 | C96 | F96 |
099 | 399 | 699 | 999 | C99 | F99 |
09C | 39C | 69C | 99C | C9C | F9C |
09F | 39F | 69F | 99F | C9F | F9F |
0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
0CC | 3CC | 6CC | 9CC | CCC | FCC |
0CF | 3CF | 6CF | 9CF | CCF | FCF |
*0F0 | 3F0 | *6F0 | 9F0 | CF0 | *FF0 |
0F3 | *3F3 | *6F3 | 9F3 | CF3 | *FF3 |
*0F6 | *3F6 | 6F6 | 9F6 | *CF6 | *FF6 |
0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
*0FC | *3FC | 6FC | 9FC | CFC | FFC |
*0FF | *3FF | *6FF | 9FF | CFF | *FFF |
Cu toate ca aceste culori sigure (true colors) de mai sus, sunt cele recomadate pentru a fi folosite de catre webmasteri, a fost demonstrat ca doar 22 dintre cele 216 culori sunt cu adevarat sigure si nu vor fi in absolut modificate in reprezentare de catre nici un monitor. In tabelul de mai sus culorile cu adevarat sigure au fost reprezentate cu un asterix ( * ) in fata.
Am alaturat totusi un tabel cu acestea:
*000 | *F00 |
*003 | *F03 |
*00F | *F0F |
*FF0 | *FF3 |
*CF6 | *FF6 |
*0F0 | *6F0 |
*3F3 | *6F3 |
*0F6 | *3F6 |
*0FC | *3FC |
*0FF | *3FF |
*6FF | *FFF |