Заданне колеру праз 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 блакітнага колеру.

Змешайце чысты чырвоны і чысты зялёны. Які колер атрымаецца?