Задаване на цвят чрез 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 в син цвят.

Смесете чист червен и чист зелен. Какъв цвят се получава?