Përcaktimi i ngjyrës përmes rgb në CSS

Në fillim të librit shkollor, kur po studionim ngjyrat, ju thashë se ngjyra mund të përcaktohet ose me fjalë angleze, ose përmes rgb, ose përmes #. Dy formatet e fundit lejojnë marrjen e çdo nuance ngjyre. Le të shqyrtojmë se si punojnë saktësisht këto formate.

Për të kuptuar këto mënyra, së pari na duhet të kuptojmë se si merret ngjyra e dëshiruar në ekranin e kompjuterit.

Në fakt, një pikë e veçantë e ekranit (piksel) nuk mund të shkëlqejë me të gjitha ngjyrat që nevojiten, pasi kjo teknikisht do të ishte shumë e vështirë. Çdo pikë e ekranit mund të shkëlqejë vetëm me tre ngjyra: të kuqe, jeshile dhe blu. Por njëkohësisht dhe në përmasa të ndryshme.

Duke kombinuar këto ngjyra ne mund të marrim çdo ngjyrë që na nevojhet ngjashëm me mënyrën se si e bëjnë piktorët me bojërat: duke përzier disa ngjyra ata marrin një tjetër të re.

Për përzierjen e ngjyrave në CSS duhet të përcaktoni në vlerën e vetisë fjalën kyçe rgb, pas së cilës përmenden, të ndara me presje, vlerat që përcaktojnë në çfarë përmasash duhet të merren këto tre ngjyra bazë. Vetë ngjyrat mund të ndryshojnë nga 0 në 255. Ku zero - është mungesa e ngjyrës, dhe 255 është ngjyra e pastër (për shembull, e kuqe e pastër).

Vetë shkronjat rgb deshifrohen si red, green, blue.

Le të shohim me shembuj.

Shembull

Le të përzijmë ngjyrën e kuqe të pastër dhe blu të pastër. Për këtë, vlerën e parë e vendosim në 255, të dytën në 0, dhe të tretën - në 255. Do të marrim ngjyrë vjollcë:

<p>
	tekst
</p>

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

Shembull

Tani le të vendosim vlerën e parë në 255, dhe të gjitha të tjerat - në zero. Si rezultat do të marrim ngjyrë të kuqe të pastër:

<p>
	tekst
</p>

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

Shembull

Kështu marrim ngjyrë jeshile të pastër:

<p>
	tekst
</p>

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

Shembull

Dhe nëse për jeshilen vendosim jo 255, por 100, atëherë do të dalë ngjyrë jeshile e pjesshme:

<p>
	tekst
</p>

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

Shembull

Le të përzijmë të tre ngjyrat në përmasa arbitrare. Shikoni, çfarë doli:

<p>
	tekst
</p>

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

Shembull

Nëse të gjitha vlerat i vendosim në 255, atëherë do të marrim ngjyrë të bardhë të pastër:

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

Shembull

Nëse të gjitha vlerat i vendosim në 0, atëherë do të marrim ngjyrë të zezë të pastër:

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

Detyra praktike

Duke përcaktuar ngjyrën përmes rgb bëni të gjitha paragrafët me ngjyrë të kuqe.

Duke përcaktuar ngjyrën përmes rgb bëni të gjitha h2 me ngjyrë jeshile.

Duke përcaktuar ngjyrën përmes rgb bëni të gjitha h3 me ngjyrë blu.

Përzieni të kuqen e pastër dhe jeshilen e pastër. Çfarë ngjyre do të merret?