Å sette farge via rgb i CSS

I begynnelsen av læreboka, da vi studerte farger, fortalte jeg deg at farger kan angis enten med et engelsk ord, via rgb, eller via #. De to siste formatene gir mulighet til å få en hvilken som helst fargetone. La oss finne ut hvordan disse formatene fungerer.

For å forstå disse metodene, må vi først forstå hvordan den ønskede fargen produseres på dataskjermen.

Faktisk kan ikke et enkelt punkt på skjermen (piksel) lyse i alle farger som er nødvendige, ettersom dette teknisk sett ville vært veldig vanskelig. Hvert punkt på skjermen kan kun lyse i tre farger: rød, grønn og blå. Men samtidig og i forskjellige proporsjoner.

Ved å kombinere disse fargene kan vi få enhver nødvendig farge, på samme måte som kunstnere gjør med maling: ved å blande flere farger får de en ny.

For å blande farger i CSS, må du angi nøkkelordet rgb som verdi for egenskapen, etterfulgt av komma-separerte verdier som angir i hvilke proporsjoner disse tre grunnfargene skal tas. Selve fargene kan variere fra 0 til 255. Dessuten er null - fravær av farge, og 255 er ren farge (for eksempel, ren rød).

Bokstavene rgb står for red, green, blue.

La oss se på eksempler.

Eksempel

La oss blande ren rød og ren blå farge. For å gjøre dette setter vi den første verdien til 255, den andre til 0, og den tredje - til 255. Vi får en lilla farge:

<p>
	tekst
</p>

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

Eksempel

La oss nå sette den første verdien til 255, og alle andre - til null. Som resultat får vi ren rød farge:

<p>
	tekst
</p>

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

Eksempel

Slik får vi ren grønn farge:

<p>
	tekst
</p>

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

Eksempel

Og hvis du setter grønt til ikke 255, men 100, får du delvis grønn:

<p>
	tekst
</p>

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

Eksempel

La oss blande alle tre fargene i vilkårlige proporsjoner. Se hva som skjedde:

<p>
	tekst
</p>

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

Eksempel

Hvis du setter alle verdier til 255, får du ren hvit farge:

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

Eksempel

Hvis du setter alle verdier til 0, får du ren svart farge:

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

Praktiske oppgaver

Ved å angi farge via rgb, gjør alle avsnitt røde.

Ved å angi farge via rgb, gjør alle h2 grønne.

Ved å angi farge via rgb, gjør alle h3 blå.

Bland ren rød og ren grønn. Hvilken farge får du?