Ange färg via rgb i CSS

I början av läroboken, när vi studerade färger, berättade jag för er att färg kan anges antingen med ett engelskt ord, eller via rgb, eller via #. De två senare formaten möjliggör att få en färg i valfri nyans. Låt oss ta reda på hur exakt dessa format fungerar.

För att förstå dessa metoder måste vi först ta reda på hur den önskade färgen produceras på en dators skärm.

Faktum är att en enskild punkt på skärmen (pixel) kan inte lysa med alla färger som behövs, eftersom det tekniskt sett skulle vara mycket komplicerat. Varje punkt på skärmen kan bara lysa med tre färger: röd, grön och blå. Men samtidigt och i olika proportioner.

Genom att kombinera dessa färger kan vi få vilken önskad färg som helst, ungefär som konstnärer gör med färger: genom att blanda flera färger får de fram en ny.

För att blanda färger i CSS behöver du som värde för egenskapen ange nyckelordet rgb, efter vilket du listar, separerat med kommatecken, i vilka proportioner dessa tre basfärger ska tas. Själva färgerna kan variera från 0 till 255. Dessutom är noll - avsaknad av färg, och 255 är ren färg (till exempel ren röd).

Bokstäverna rgb står för red, green, blue.

Låt oss titta på exempel.

Exempel

Låt oss blanda ren röd och ren blå färg. För att göra detta sätter vi det första värdet till 255, det andra till 0, och det tredje - till 255. Vi kommer att få en lila färg:

<p>
	text
</p>

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

Exempel

Låt oss nu sätta det första värdet till 255, och alla andra - till noll. Som resultat får vi ren röd färg:

<p>
	text
</p>

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

Exempel

Så här får vi ren grön färg:

<p>
	text
</p>

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

Exempel

Och om du för grönt sätter inte 255, utan 100, blir det delvis grönt:

<p>
	text
</p>

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

Exempel

Låt oss blanda alla tre färgerna i godtyckliga proportioner. Se vad som blev:

<p>
	text
</p>

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

Exempel

Om du sätter alla värden till 255, får du ren vit färg:

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

Exempel

Om du sätter alla värden till 0, så får du ren svart färg:

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

Praktiska uppgifter

Genom att ange färg via rgb, gör alla stycken röda.

Genom att ange färg via rgb, gör alla h2 gröna.

Genom att ange färg via rgb, gör alla h3 blåa.

Blanda ren röd och ren grön. Vilken färg får du?