CSSда rgb орқали ранг бериш

Дарсликнинг бошланишида, биз рангларни ўрганганимизда, мен сизга рангни ёки инглизча сўз билан, ёки rgb орқали, ёки # орқали бериш мумкинлигини айтган эдим. Бу икки формат исталган соядаги рангни олишга имкон беради. Келинг, бу форматлар қандай ишлашини аник кўриб чиқайлик.

Бу усулларни тушуниш учun, аввал компютер экранида керакли ранг қандай ҳосил бўлишини тушинишимиз керак.

Аслида, экраннинг алохида нуқтаси (пиксель) зарур бўлган барча ранглар билан ёритиш ҳозирги техника учun жуда қийин. Ҳар бир экран нуқтаси фақат учта ранг билан ёритиш мумкин: қизил, яшил ва кўк ранглар. Лекин бир вақтнинг ўзида ва ҳар хил нисбатда.

Бу рангларни арлаштириб, биз хохлаган рангнимизни худди рассомлар бўёқлар билан қилгани каби оламиз: бир нечта рангларни аралаштириб, улар яна бир янги ранг оладилар.

CSSда рангларни аралаштириш учun хосилик қиймати сифатида rgb калит сўзини кўрсатиш керак, сўнгра унингдан кейин vergul билан ажратиб, бу учта асосий рангни қандай нисбатда олиш кераклигини кўрсатиш керак. Рангларнинг ўзи 0 дан 255 гача ўзгариши мумкин. Бунда ноль - рангнинг йўқлигини билдиради, 255 эса тоза рангни (масалан, тоза қизил).

rgb ҳарфларининг ўзи red, green, blue деб тушунилади.

Мисолларда кўрамиз.

Мисол

Келинг, тоза қизил ва тоза кўк рангни аралаштирамиз. Бунинг учun биринчи қийматни 255 га, иккинчисини 0 га, учинчисини эса 255 га қўямиз. Бизда сиёҳ rang ранг ҳосил бўлади:

<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);
}

Мисол

Агар яшил учun 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 ларни кўк рангга киритинг.

Тоза қизил ва тоза яшил рангларни аралаштиринг. Қандай ранг ҳосил бўлади?