CSS-də rəngin rgb vasitəsilə təyin edilməsi

Dərsliyin əvvəlində, rəngləri öyrənəndə sizə izah etmişdim ki, rəngi ya ingilis sözü ilə, ya rgb vasitəsilə, ya da # ilə təyin etmək olar. Son iki format istənilən çalarlı rəng əldə etməyə imkan verir. Gəlin bu formatların necə işlədiyini anlayaq.

Bu üsulları başa düşmək üçün əvvəlcə kompüter ekranında istədiyimiz rəngin necə əldə edildiyini anlamalıyıq.

Əslində, ekranın ayrı-ayrı nöqtəsi (piksel) lazım olan bütün rənglərlə parlaya bilməz, çünki bu texniki cəhətdən çox çətin olardı. Hər bir ekran nöqtəsi yalnız üç rənglə parlaya bilər: qırmızı, yaşıl və mavi. Lakin eyni zamanda və müxtəlif nisbətlərdə.

Bu rəngləri birləşdirərək, istədiyimiz hər hansı bir rəngi əldə edə bilərik, eynən rəssamların boya ilə etdiyi kimi: bir neçə rəngi qarışdıraraq başqa yeni bir rəng əldə edirlər.

CSS-də rəngləri qarışdırmaq üçün xassənin qiyməti kimi rgb açar sözünü göstərmək, ondan sonra vergüllə ayrılmış şəkildə bu üç əsas rəngin hansı nisbətlərdə götürülməli olduğunu təyin edən rəqəmləri yazmaq lazımdır. Rənglərin özləri 0-dan 255-ə qədər dəyişə bilər. Üstəlik, sıfır - rəngin olmaması, 255 isə təmiz rəngdir (məsələn, təmiz qırmızı).

rgb hərflərinin özü red, green, blue kimi açılır.

Nümunələrə baxaq.

Nümunə

Gəlin təmiz qırmızı və təmiz mavi rəngi qarışdıraq. Bunun üçün birinci qiyməti 255, ikincini 0, üçüncünü isə 255 edək. Bizə bənövşəyi rəng alınacaq:

<p>
	mətn
</p>

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

Nümunə

Gəlin indi birinci qiyməti 255, qalanların hamısını isə sıfıra quraq. Nəticədə təmiz qırmızı rəng alacağıq:

<p>
	mətn
</p>

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

Nümunə

Beləcə təmiz yaşıl rəng alarıq:

<p>
	mətn
</p>

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

Nümunə

Yaşıl üçün 255 yox, 100 qoysaq, qismən yaşıl rəng alınar:

<p>
	mətn
</p>

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

Nümunə

Gəlin hər üç rəngi ixtiyari nisbətlərdə qarışdıraq. Baxın, nə çıxdı:

<p>
	mətn
</p>

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

Nümunə

Əgər bütün qiymətləri 255 etsək, təmiz ağ rəng alınar:

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

Nümunə

Əgər bütün qiymətləri 0 etsək, təmiz qara rəng alınar:

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

Praktiki tapşırıqlar

rgb vasitəsilə rəng təyin edərək, bütün abzasları qırmızı rəngə salın.

rgb vasitəsilə rəng təyin edərək, bütün h2 başlıqlarını yaşıl rəngə salın.

rgb vasitəsilə rəng təyin edərək, bütün h3 başlıqlarını mavi rəngə salın.

Təmiz qırmızı və təmiz yaşılı qarışdırın. Hansı rəng alınar?