Zadavanje boje preko rgb u CSS-u

Na samom početku udžbenika, kada smo učili boje, rekao sam vam da se boja može zadati ili engleskom rečju, ili preko rgb, ili preko #. Poslednja dva formata omogućavaju dobijanje boje bilo koje nijanse. Hajde da shvatimo kako tačno ovi formati funkcionišu.

Da bismo razumeli ove načine, za početak nam je neophodno shvatiti kako se dobija željena boja na ekranu računara.

Zapravo, pojedinačna tačka ekrana (piksel) ne može da sija svim bojama koje su potrebne, jer bi to tehnički bilo veoma komplikovano. Svaka tačka ekrana može da sija samo tri boje: crvenom, zelenom i plavom. Ali istovremeno i u različitim proporcijama.

Kombinujući ove boje možemo dobiti bilo koju boju koja nam je potrebna slično tome kako to rade slikari sa bojama: mešajući nekoliko boja oni dobijaju još jednu novu.

Za mešanje boja u CSS-u treba vrednošću svojstva navesti ključnu reč rgb, nakon koje se nabrajanjem zarezima zadaje u kojim proporcijama treba uzeti ove tri osnovne boje. Same boje mogu da se menjaju od 0 do 255. Pritisite nula - to je odsustvo boje, a 255 - to je čista boja (na primer, čisto crvena).

Sama slova rgb se dešifruju kao red, green, blue.

Pogledajmo na primerima.

Primer

Hajde da pomešamo čisto crvenu i čisto plavu boju. Za ovo prvu vrednost postavljamo na 255, drugu na 0, a treću - na 255. Dobićemo ljubičastu boju:

<p>
	tekst
</p>

p {
	color: rgb(255, 0, 255);
}

Primer

Hajde sada da postavimo prvu vrednost na 255, a sve ostale - na nule. Kao rezultat ćemo dobiti čisto crvenu boju:

<p>
	tekst
</p>

p {
	color: rgb(255, 0, 0);
}

Primer

Ovako dobijamo čisto zelenu boju:

<p>
	tekst
</p>

p {
	color: rgb(0, 255, 0);
}

Primer

A ako za zelenu postavimo ne 255, već 100, dobićemo delimično zelenu boju:

<p>
	tekst
</p>

p {
	color: rgb(0, 100, 0);
}

Primer

Pomešaćemo sve tri boje u proizvoljnim proporcijama. Pogledajte šta je ispalo:

<p>
	tekst
</p>

p {
	color: rgb(200, 100, 125);
}

Primer

Ako postavimo sve vrednosti na 255, dobićemo čistu belu boju:

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

Primer

Ako postavimo sve vrednosti na 0, onda ćemo dobiti čistu crnu boju:

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

Praktični zadaci

Zadavanjem boje preko rgb učinite sve pasuse crvene boje.

Zadavanjem boje preko rgb učinite sve h2 zelene boje.

Zadavanjem boje preko rgb učinite sve h3 plave boje.

Pomešajte čistu crvenu i čistu zelenu boju. Kakva boja će ispasti?