Заданне колеру праз rgb у CSS

У самы пачатак падручніка, калі мы вывучалі колеры, я расказаў вам, што колер можна задаваць альбо ангельскім словам, альбо праз rgb, альбо праз #. Апошнія два фарматы дазваляюць атрымаць колер любога адцення. Давайце разбярэмся, як менавіта працуюць гэтыя фарматы.

Каб зразумець гэтыя спосабы, для пачатку нам неабходна разбярэцца з тым, як атрымліваецца патрэбны колер на экране камп'ютара.

На самой справе асобная кропка экрана (піксель) не можа свяціцца ўсімі колерамі, якія патрэбны, так як гэта тэхнічна было б вельмі складана. Кожная кропка экрана можа свяціцца толькі трыма колерамі: чырвоным, зялёным і блакітным. Затое адначасова і ў розных прапорцыях.

Камбінуючы гэтыя колеры мы можам атрымаць любы патрэбны нам колер падобна таму, як гэта робяць мастакі з фарбамі: змешваючы некалькі колераў яны атрымліваюць яшчэ адзін новы.

Для змешвання колераў у CSS трэба значэннем уласцівасці паказаць ключавое слова rgb, пасля якога пералічыць праз коску задальныя ў якіх прапорцыях трэба браць гэтыя тры базавыя колеры. Самі колеры могуць змяняцца ад 0 да 255. Прычым нуль - гэта адсутнасць колеру, а 255 - гэта чысты колер (напрыклад, чыста чырвоны).

Самі літары rgb расшыфроўваюцца як red, green, blue.

Паглядзім на прыкладах.

Прыклад

Давайце змешаем чыста чырвоны і чыста блакітны колер. Для гэтага першае значэнне ставім у 255, другое ў 0, а трэцяе - ў 255. У нас атрымаецца фіялетавы колер:

html<p>
  тэкст
</p>

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

Результат:

Прыклад

Давайце цяпер усталюем першае значэнне ў 255, а ўсе астатнія - ў нулі. У выніку атрымаем чыста чырвоны колер:

html<p>
  тэкст
</p>

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

Результат:

Прыклад

Вось так атрымаем чыста зялёны колер:

html<p>
  тэкст
</p>

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

Результат:

Прыклад

А калі для зялёнага паставіць не 255, а 100, то атрымаецца часткова зялёны:

html<p>
  тэкст
</p>

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

Результат:

Прыклад

Змешаем усе тры колеры ў адвольных прапорцыях. Глядзіце, што атрымалася:

html<p>
  тэкст
</p>

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

Результат:

Прыклад

Калі паставіць усе значэнні ў 255, то атрымаецца чысты белы колер:

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

Прыклад

Калі паставіць усе значэнні ў 0, то атрымаецца чысты чорны колер:

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

Практычныя задачы