RGB-Farbmodell in JavaScript

Das Farbattribut von CSS stellt die Farbe des Elements dar, die auf verschiedene Weise definiert werden kann, wie beispielsweise RGB, HSL, LCH, HWB, Farbschlüsselwort usw. Lesen Sie mehr darüber verschiedene Arten der Farbdarstellung bedeuten hier: https://en.wikipedia.org/wiki/Color_theory.

RGB ist ein beliebtes Farbmodell, das von allen Browsern unterstützt wird. RGB steht für Rot, Blau und Grün, auch bekannt als Primärfarben. Verschiedene Anteile dieser Primärfarben ergeben viel mehr Farbnuancen.

Das kubische Modell RGB stellt die rote Farbe auf der X-Achse, die grüne Farbe auf der Y-Achse und die blaue Farbe auf der Z-Achse dar. Wenn sich alle drei Koordinaten bei 0 treffen, repräsentiert dies die Farbe Schwarz und 255 repräsentiert die Farbe Weiß.

RGB-Farben können auf zwei Arten definiert werden, auf die funktionale Weise und auf die hexadezimale Weise.

Die funktionale Notation akzeptiert die Farbformate Arithmetik, Prozentsatz, Digital 8 Bit pro Kanal, Digital 12 Bit pro Kanal, Digital 16 Bit pro Kanal und Digital 24 Bit pro Kanal. Die hexadezimale Schreibweise kann auf zwei Arten definiert werden, entweder mit 6 Ziffern oder 3 Ziffern.

Syntax von rgb() Farbe in JavaScript

rgb($red, $green, $blue);
rgba($red, $green, $blue, $alpha);
#RRGGBB[AA]
#RGB[A]

Parameter von rgb() Farbe in JavaScript

• $red: Es ist ein obligatorischer Parameter, der die Intensität des Rotstichs in der endgültigen Farbe definiert. Sein Bereich ist 0-255 in funktionaler und 0-9, A-F in hexadezimaler Schreibweise.
• $green: Es ist ein obligatorischer Parameter, der die Intensität des Grünstichs in der endgültigen Farbe definiert. Sein Bereich ist 0-255 in funktionaler und 0-9, A-F in hexadezimaler Schreibweise.
• $blue: Es ist ein obligatorischer Parameter, der die Intensität des Blaustichs in der endgültigen Farbe definiert. Sein Bereich ist 0-255 in funktionaler und 0-9, A-F in hexadezimaler Schreibweise.
• $alpha: Dies ist ein optionaler Parameter, der die Transparenz der Farbe definiert. Es nimmt den Wert in Prozent, den Gleitkommawert an.

Beispielcode:

<div id="demo">
  <h1>Hello world!</h1>
  <p>Welcome to RGB tutorial</p>
</div> 

div {
    color: rgb(12, 45, 255, 0.7);
    padding: 20px;
}

<script>
const tag = document.getElementById("demo");
tag.style.color = "rgb(255, 45, 255, 0.7)";
</script>

Ausgabe: