Kleur instellen via rgb in CSS

Helemaal aan het begin van de tutorial, toen we kleuren bestudeerden, vertelde ik je dat je een kleur kunt instellen ofwel met een Engels woord, of via rgb, of via #. De laatste twee formaten maken het mogelijk om een kleur van elke tint te krijgen. Laten we uitzoeken hoe deze formaten precies werken.

Om deze methoden te begrijpen, moeten we eerst begrijpen hoe de gewenste kleur wordt verkregen op het computerscherm.

In feite kan een afzonderlijk punt op het scherm (pixel) niet schijnen in alle kleuren die nodig zijn, omdat dit technisch erg moeilijk zou zijn. Elk punt op het scherm kan slechts schijnen in drie kleuren: rood, groen en blauw. Maar wel gelijktijdig en in verschillende verhoudingen.

Door deze kleuren te combineren kunnen we elke benodigde kleur krijgen, vergelijkbaar met hoe kunstenaars het doen met verf: door meerdere kleuren te mengen krijgen ze weer een nieuwe.

Om kleuren te mengen in CSS moet je als waarde van de eigenschap het sleutelwoord rgb opgeven, waarna je, gescheiden door komma's, opgeeft in welke verhoudingen deze drie basiskleuren moeten worden genomen. De kleuren zelf kunnen variëren van 0 tot 255. Hierbij is nul - de afwezigheid van kleur, en 255 is de pure kleur (bijvoorbeeld, puur rood).

De letters rgb zelf staan voor red, green, blue.

Laten we naar voorbeelden kijken.

Voorbeeld

Laten we puur rood en puur blauw mengen. Hiervoor zetten we de eerste waarde op 255, de tweede op 0, en de derde - op 255. We krijgen dan een paarse kleur:

<p>
	tekst
</p>

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

Voorbeeld

Laten we nu de eerste waarde instellen op 255, en alle andere - op nul. Als resultaat krijgen we een pure rode kleur:

<p>
	tekst
</p>

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

Voorbeeld

Zo krijgen we een pure groene kleur:

<p>
	tekst
</p>

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

Voorbeeld

En als je voor groen niet 255 zet, maar 100, dan krijg je een deels groene kleur:

<p>
	tekst
</p>

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

Voorbeeld

Laten we alle drie de kleuren mengen in willekeurige verhoudingen. Kijk wat er is gebeurd:

<p>
	tekst
</p>

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

Voorbeeld

Als je alle waarden op 255 zet, dan krijg je een pure witte kleur:

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

Voorbeeld

Als je alle waarden op 0 zet, dan krijg je een pure zwarte kleur:

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

Praktische opdrachten

Stel, door kleur in te stellen via rgb, alle alinea's in op rode kleur.

Stel, door kleur in te stellen via rgb, alle h2 in op groene kleur.

Stel, door kleur in te stellen via rgb, alle h3 in op blauwe kleur.

Meng puur rood en puur groen. Welke kleur krijg je?