Farbe in CSS

9.1 Möglichkeiten, Farbe in CSS anzugeben

Farbe spielt eine wichtige Rolle im Webdesign und in der Webentwicklung. In CSS gibt es mehrere Möglichkeiten, Farben anzugeben, die es Entwicklern ermöglichen, ansprechende und intuitive Schnittstellen zu erstellen. Unten betrachten wir verschiedene Methoden, Farben in CSS anzugeben, einschließlich Farbmodellen, Transparenz, Verläufen und Standardfunktionen für die Arbeit mit Farben.

Möglichkeiten, Farben in CSS anzugeben:

• Benannte Farben
• Hexadezimale Farben
• RGB und RGBA
• HSL und HSLA
• Verläufe
• Transparenz

9.2 Farbmodell RGB

Das Modell RGB (Red Green Blue) definiert die Farbe durch Mischen von Rot, Grün und Blau. Jeder Farbe wird ein Wert von 0 bis 255 zugewiesen.

Syntax:

    
      color: rgb(255, 0, 0); /* Rot */
      color: rgb(0, 255, 0); /* Grün */
      color: rgb(0, 0, 255); /* Blau */
    
  

Beispiel:

    
      body {
        background-color: rgb(240, 248, 255); /* Hintergrundfarbe: aliceblue */
      }
    
  

9.3 Farbmodell HEX

HEX (Hexadezimal) stellt Farbe mit hexadezimalen Werten dar. Jede der Werte (RR, GG, BB) kann von 00 bis FF variieren.

Syntax:

    
      color: #ff0000; /* Rot */
      color: #00ff00; /* Grün */
      color: #0000ff; /* Blau */
    
  

Beispiel:

    
      h1 {
        color: #4CAF50; /* Grün */
      }
    
  

9.4 Farbmodell HSL

HSL (Hue, Saturation, Lightness) stellt Farbe in Form von Farbton, Sättigung und Helligkeit dar. Der Farbton (Hue) wird in Grad gemessen (0-360), Sättigung (Saturation) und Helligkeit (Lightness) in Prozenten (0%-100%).

Syntax:

    
      color: hsl(0, 100%, 50%); /* Rot */
      color: hsl(120, 100%, 50%); /* Grün */
      color: hsl(240, 100%, 50%); /* Blau */
    
  

Beispiel:

    
      p {
        color: hsl(210, 100%, 50%); /* Blau */
      }
    
  

9.5 Transparenz: RGBA und HSLA

Um Farben Transparenz hinzuzufügen, werden die Modelle RGBA und HSLA verwendet. In diesen Modellen wird ein vierter Parameter hinzugefügt — der Alpha-Kanal (Alpha), der den Transparenzgrad von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) bestimmt.

1. RGBA (Red, Green, Blue, Alpha):

Syntax:

    
      color: rgba(255, 0, 0, 0.5); /* Halbtransparenz rot */
      color: rgba(0, 255, 0, 0.3); /* Halbtransparenz grün */
      color: rgba(0, 0, 255, 0.7); /* Halbtransparenz blau */
    
  

Beispiel:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Halbtransparenter Tomatenfarbe */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Syntax:

    
      color: hsla(0, 100%, 50%, 0.5); /* Halbtransparenz rot */
      color: hsla(120, 100%, 50%, 0.3); /* Halbtransparenz grün */
      color: hsla(240, 100%, 50%, 0.7); /* Halbtransparenz blau */
    
  

Beispiel:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Halbtransparenz blau */
      }