Дефинисање боје преко rgb у CSS-у

На самом почетку упутства, када смо учили о бојама, рекао сам вам да боја може бити задата или енглеском речју, или преко rgb, или преко #. Последња два формата омогућавају добијање боје било које нијансе. Хајде да се позабавимо како тачно функционишу ови формати.

Да бисмо разумели ове начине, прво нам је потребно да схватимо како се добија жељена боја на екрану рачунара.

У ствари, појединачна тачка екрана (пиксел) не може да светли свим бојама које су потребне, јер би то технички било веома компликовано. Свака тачка екрана може да светли само три боје: црвеном, зеленом и плавом. Али истовремено и у различитим пропорцијама.

Комбинујући ове боје можемо добити било коју нам потребну боју слично као што то раде уметници са бојама: мешајући неколико боја они добијају још једну нову.

За мешање боја у CSS-у треба вредношћу својства навести кључну реч rgb, након које се наводи преко зареза које пропорције треба узети ове три основне боје. Саме боје могу да се мењају од 0 до 255. При томе нула - је одсуство боје, а 255 - је чиста боја (на пример, чисто црвена).

Сама слова rgb се дешифрују као red, green, blue.

Погледајмо на примерима.

Пример

Хајде да помешамо чисто црвену и чисто плаву боју. За ово прву вредност постављамо на 255, другу на 0, а трећу - на 255. Добићемо љубичасту боју:

<p>
	текст
</p>

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

Пример

Хајде сада да поставимо прву вредност на 255, а све остале - на нуле. У резултату ћемо добити чисто црвену боју:

<p>
	текст
</p>

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

Пример

Овако ћемо добити чисто зелену боју:

<p>
	текст
</p>

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

Пример

А ако за зелену поставимо не 255, већ 100, добиће се делимично зелена:

<p>
	текст
</p>

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

Пример

Помешајмо све три боје у произвољним пропорцијама. Погледајте шта се добило:

<p>
	текст
</p>

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

Пример

Ако поставимо све вредности на 255, добиће се чиста бела боја:

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

Пример

Ако поставимо све вредности на 0, онда ће се добити чиста црна боја:

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

Практични задаци

Дефинишући боју преко rgb учините све пасусе црвене боје.

Дефинишући боју преко rgb учините све h2 зелене боје.

Дефинишући боју преко rgb учините све h3 плаве боје.

Помешајте чисто црвену и чисто зелену. Која боја ће се добити?