Задавање на боја преку 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);
}

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