At angive farve via rgb i CSS

I starten af lærebogen, da vi studerede farver, fortalte jeg dig, at farve kan angives enten med et engelsk ord, eller via rgb, eller via #. De sidste to formater giver mulighed for at opnå en hvilken som helst nuance af farve. Lad os finde ud af, hvordan disse formater præcist fungerer.

For at forstå disse metoder er vi først nødt til at finde ud af, hvordan den ønskede farve opnås på en computerskærm.

Faktisk kan en enkelt punkt på skærmen (pixel) ikke lyse i alle de farver, som er nødvendige, da det teknisk set ville være meget kompliceret. Hvert punkt på skærmen kan kun lyse i tre farver: rød, grøn og blå. Men samtidigt og i forskellige proportioner.

Ved at kombinere disse farver kan vi opnå enhver ønsket farve, ligesom malere gør med maling: ved at blande flere farver får de en ny, anden.

For at blande farver i CSS skal du som egenskabens værdi angive nøgleordet rgb, efterfulgt af, adskilt af kommaer, der angiver i hvilke proportioner disse tre grundfarver skal tages. Selv farverne kan variere fra 0 til 255. Nul betyder manglende farve, og 255 er ren farve (for eksempel ren rød).

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

Lad os se på nogle eksempler.

Eksempel

Lad os blande ren rød og ren blå farve. For at gøre dette sætter vi den første værdi til 255, den anden til 0, og den tredje - til 255. Vi får lilla farve:

<p>
	tekst
</p>

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

Eksempel

Lad os nu sætte den første værdi til 255, og alle andre - til nul. Som resultat får vi ren rød farve:

<p>
	tekst
</p>

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

Eksempel

Sådan får vi ren grøn farve:

<p>
	tekst
</p>

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

Eksempel

Og hvis du for grøn sætter ikke 255, men 100, får du delvist grøn:

<p>
	tekst
</p>

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

Eksempel

Lad os blande alle tre farver i vilkårlige proportioner. Se, hvad der skete:

<p>
	tekst
</p>

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

Eksempel

Hvis du sætter alle værdier til 255, får du ren hvid farve:

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

Eksempel

Hvis du sætter alle værdier til 0, får du ren sort farve:

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

Praktiske opgaver

Ved at angive farven via rgb, gør alle afsnit røde.

Ved at angive farven via rgb, gør alle h2 grønne.

Ved at angive farven via rgb, gør alle h3 blå.

Bland ren rød og ren grøn. Hvilken farve får du?