Farbe mit RGB in CSS definieren

Ganz am Anfang des Lehrbuchs, als wir Farben kennengelernt haben, habe ich Ihnen erklärt, dass man eine Farbe entweder durch ein englisches Wort, durch rgb oder durch # definieren kann. Die letzten beiden Formate ermöglichen es, jede beliebige Farbnuance zu erhalten. Lassen Sie uns herausfinden, wie genau diese Formate funktionieren.

Um diese Methoden zu verstehen, müssen wir uns zunächst damit befassen, wie die gewünschte Farbe auf dem Computerbildschirm erzeugt wird.

Tatsächlich kann ein einzelner Bildschirmpunkt (Pixel) nicht in allen benötigten Farben leuchten, da dies technisch sehr kompliziert wäre. Jeder Bildschirmpunkt kann nur in drei Farben leuchten: Rot, Grün und Blau. Dafür aber gleichzeitig und in unterschiedlichen Anteilen.

Durch die Kombination dieser Farben können wir jede benötigte Farbe erhalten, ähnlich wie Künstler es mit Farben tun: Durch das Mischen mehrerer Farben erhalten sie eine weitere, neue Farbe.

Um Farben in CSS zu mischen, muss man als Wert der Eigenschaft das Schlüsselwort rgb angeben, gefolgt von durch Kommas getrennten Werten, die definieren, in welchen Anteilen diese drei Grundfarben genommen werden sollen. Die Farbwerte selbst können von 0 bis 255 variieren. Dabei bedeutet Null - das Fehlen der Farbe, und 255 bedeutet die reine Farbe (zum Beispiel ein reines Rot).

Die Buchstaben rgb stehen für red, green, blue.

Sehen wir uns Beispiele an.

Beispiel

Lassen Sie uns reines Rot und reines Blau mischen. Dazu setzen wir den ersten Wert auf 255, den zweiten auf 0 und den dritten - auf 255. Wir erhalten die Farbe Violett:

<p>
	Text
</p>

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

Beispiel

Lassen Sie uns nun den ersten Wert auf 255 setzen und alle anderen - auf Null. Als Ergebnis erhalten wir ein reines Rot:

<p>
	Text
</p>

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

Beispiel

So erhalten wir ein reines Grün:

<p>
	Text
</p>

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

Beispiel

Und wenn wir für Grün nicht 255, sondern 100 setzen, ergibt sich ein teilweises Grün:

<p>
	Text
</p>

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

Beispiel

Mischen wir alle drei Farben in beliebigen Anteilen. Sehen Sie, was dabei herauskommt:

<p>
	Text
</p>

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

Beispiel

Wenn wir alle Werte auf 255 setzen, ergibt sich ein reines Weiß:

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

Beispiel

Wenn wir alle Werte auf 0 setzen, ergibt sich ein reines Schwarz:

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

Praktische Aufgaben

Definieren Sie die Farbe mit rgb und machen Sie alle Absätze rot.

Definieren Sie die Farbe mit rgb und machen Sie alle h2 grün.

Definieren Sie die Farbe mit rgb und machen Sie alle h3 blau.

Mischen Sie reines Rot und reines Grün. Welche Farbe ergibt sich?