Na potrzeby tej lekcji poznacie selektor background-color, który służy do ustawiania tła elementu.

Kolory definiujemy na kilka sposobów, najczęstsze z nich to:

• rgb, rgba

/* kolor bez przezroczystości zawiera tylko 3 argumenty RGB*/ 
background-color: rgb(52, 117, 117); 

/* jeżeli chcemy dodać przezroczystość, dodajemy też 4ty argument "A", który określa stopień przezroczystości*/
background-color: rgba(52, 117, 117, 0.8); 

• #, hex

/* kolor bez przezroczystości zawiera tylko 3 lub 6 znaków notacji hexadecymalnej #RRGGBB */ 
background-color: #FFFFFF;
/*lub #RGB*/
background-color: #FFF; 

/* jeżeli chcemy dodać przezroczystość, dodajemy dodatkowe 2 znaki  #RRGGBBAA. Im mniejsza wartość znaków AA (z zakresu 0-9 i A-F) tym większa przezroczystość*/
background-color: #34757580; 

• nazwa koloru po angielsku

background-color: red;

Czasami występuje potrzeba przeliczenia koloru z RGB na HEX i odwrotnie. Jak tego dokonać?

HEX -> RGB

Liczbę w HEX #347575, musimy podzielić na 3 części odpowiedzialne za każdy kolor, czyli #RR | GG | BB

Teraz zamienimy poszczególne zapisy systemu hexadecymalnego na decymalny:

34 -> dziesiątki * 16 + jedności, czyli: 3*16+4=52

75 -> dziesiątki * 16 + jedności, czyli: 7*16+5 = 117

75 -> dziesiątki * 16 + jedności, czyli: 7*16+5 = 117

i otrzymujemy liczbę w rgb(52, 117, 117).

RGB -> HEX

Liczbę w rgb(52, 117, 117), musimy zamienić na każdy kolor w hex, czyli #RR | GG | BB

Teraz zamienimy poszczególne zapisy systemu decymalnego na hexadecymalny:

52 ->

52/16=3,25 -> bierzemy całości z wyniku i mnożymy przez 16

3*16=48

52-48=4

pierwsza para liczb to 34

117 ->

117/16=7,31 -> bierzemy całości z wyniku i mnożymy przez 16

7*16=112

117-112=5

druga i trzecia para liczb to 75

i otrzymujemy liczbę w hex #347575.