CSSda rgb orqali rang berish

Darslikning boshida, biz ranglarni o‘rganayotganimizda, sizga rangni inglizcha so‘z bilan, rgb orqali yoki # orqali berish mumkinligini aytgan edim. Bu ikki format har qanday rang soyasini olish imkonini beradi. Keling, bu formatlar qanday ishlashini batafsil ko‘rib chiqaylik.

Bu usullarni tushunish uchun, avvalo kompyuter ekranida kerakli rang qanday hosil bo‘lishini tushunishimiz kerak.

Aslida, ekranning alohida nuqtasi (piksel) kerakli barcha ranglar bilan porlashi mumkin emas, chunki bu texnik jihatdan juda murakkab bo‘lardi. Ekranning har bir nuqtasi faqat uchta rang bilan porlashi mumkin: qizil, yashil va ko‘k. Lekin bir vaqtning o‘zida va turli nisbatlarda.

Ushbu ranglarni birlashtirib, biz har qanday kerakli rangni xuddi rassomlar bo‘yoqlar bilan qilgani kabi olishimiz mumkin: bir nechta ranglarni aralashtirib, ular yangi rang hosil qilishadi.

CSSda ranglarni aralashtirish uchun xususiyat qiymati sifatida rgb kalit so‘zini ko‘rsatishingiz kerak, so‘ngra undan keyin vergul bilan ajratib, ushbu uchta asosiy rangni qaysi nisbatlarda olish kerakligini ko‘rsating. Ranglar o‘zining 0 dan 255 gacha bo‘lgan qiymatlar oralig'ida o'zgarishi mumkin. Bunda nol - rangning yo‘qligini, 255 esa sof rangni (masalan, sof qizil) anglatadi.

rgb harflari red (qizil), green (yashil), blue (ko‘k) so‘zlarining qisqartmasidir.

Keling, misollar orqali ko‘rib chiqaylik.

Misol

Keling, sof qizil va sof ko‘k ranglarni aralashtiramiz. Buning uchun birinchi qiymatni 255, ikkinchisini 0, uchinchisini esa 255 qilamiz. Natijada binafsha rang hosil bo‘ladi:

<p>
	matn
</p>

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

Misol

Keling, endi birinchi qiymatni 255 qilib, qolganlarini esa nolga tenglaymiz. Natijada sof qizil rang olamiz:

<p>
	matn
</p>

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

Misol

Shu tarzda sof yashil rang olamiz:

<p>
	matn
</p>

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

Misol

Agar yashil uchun 255 emas, balki 100 qiymatini bersak, qisman yashil rang hosil bo‘ladi:

<p>
	matn
</p>

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

Misol

Keling, uchala rangni ixtiyoriy nisbatlarda aralashtiramiz. Qanday rang chiqishiga qarang:

<p>
	matn
</p>

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

Misol

Agar barcha qiymatlarni 255 qilib bersak, sof oq rang hosil bo‘ladi:

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

Misol

Agar barcha qiymatlarni 0 qilib bersak, sof qora rang hosil bo‘ladi:

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

Amaliy vazifalar

rgb orqali rang berib, barcha abzatslarni qizil rangga keltiring.

rgb orqali rang berib, barcha h2 teglarini yashil rangga keltiring.

rgb orqali rang berib, barcha h3 teglarini ko‘k rangga keltiring.

Sof qizil va sof yashil ranglarni aralashtiring. Qanday rang hosil bo‘ladi?