CSS - Farben

Farbnamen

In CSS können Sie vordefinierte Farbnamen verwenden, um Farben festzulegen. Diese Namen sind leicht zu merken und bieten eine schnelle Möglichkeit, Farben auf Ihre Webelemente anzuwenden. Einige häufig verwendete Farbnamen sind:

• red: Ein helles Rot.
• blue: Ein klassisches Blau.
• green: Ein natürliches Grün.
• yellow: Ein sonniges Gelb.
• purple: Ein königliches Lila.
• black: Ein sattes Schwarz.
• white: Ein reines Weiß.

Hexadezimale Farben

Hexadezimale Farbwerte sind eine beliebte Methode, um Farben in CSS darzustellen. Sie bestehen aus einem Rautezeichen (#), gefolgt von sechs Zeichen, wobei jedes Zeichenpaar die Intensität der roten, grünen und blauen (RGB) Komponenten darstellt.

Das Format eines hexadezimalen Farbwerts ist #RRGGBB, wobei:

• RR die rote Komponente darstellt (00 bis FF).
• GG die grüne Komponente darstellt (00 bis FF).
• BB die blaue Komponente darstellt (00 bis FF).

#FF0000 /* rot */
#00FF00 /* grün */
#0000FF /* blau */
#000000 /* schwarz */
#FFFFFF /* weiß */

RGB-Farben

Das RGB-Farbmodell ist eine weitere Möglichkeit, Farben in CSS zu spezifizieren. Es verwendet eine Kombination aus Rot-, Grün- und Blauwerten.

Das Format eines RGB-Farbwerts ist:

rgb(rot, grün, blau)

wobei jede Komponente eine ganze Zahl zwischen 0 und 255 ist.

rgb(255, 0, 0)   /* rot */
rgb(0, 255, 0)   /* grün */
rgb(0, 0 ,255)   /* blau */
rgb(0 , 0 , 0 )    /* schwarz */
rgb(255 ,255 ,255 )/* weiß */

RGBA-Farben

RGBA ist eine Erweiterung des RGB-Modells, das einen Alpha-Kanal zur Angabe der Deckkraft enthält. Der Alpha-Wert reicht von 0 (vollständig transparent) bis 1 (vollständig deckend).

Das Format eines RGBA-Farbwerts ist:

rgba(rot, grün, blau, alpha)

wobei die ersten drei Komponenten ganze Zahlen zwischen 0 und 255 sind und der Alpha-Wert zwischen 0 und 1 liegt.

 rgba(255, 0, 0, .5) /* rot mit 50% Deckkraft */  
 rgba(0, 255, 0, .8) /* grün mit 80% Deckkraft */  
 rgba(0, 0, 255, .3) /* blau mit 30% Deckkraft */

HSL-Farben

Das HSL-Modell stellt Farben mithilfe von Farbton-, Sättigungs- und Helligkeitswerten dar. Es bietet im Vergleich zu RGB eine intuitivere Möglichkeit, Farben zu beschreiben.

Das Format eines HSL-Farbwerts ist:

hsl(Farbton, Sättigung, Helligkeit)

wobei:

• Farbton ein Winkel zwischen 0 und 360 Grad ist, der den Farbkreis darstellt.
• Sättigung ein Prozentwert zwischen 0% und 100% ist, wobei 0% Graustufen und 100% volle Farbsättigung darstellt.
• Helligkeit ein Prozentwert zwischen 0% und 100% ist, wobei 0% Schwarz, 50% die normale Farbe und 100% Weiß darstellt.

hsl(0, 100%, 50%) /* rot */
hsl(120, 100%, 50%) /* grün */
hsl(240, 100%, 50%) /* blau */
hsl(0, 0%, 0%) /* schwarz */
hsl(0, 0%, 100%) /* weiß */

HSLA-Farben

HSLA ist eine Erweiterung des HSL-Farbmodells, das einen Alpha-Kanal zur Angabe der Deckkraft enthält, ähnlich wie RGBA.

Das Format eines HSLA-Farbwerts ist:

hsla(Farbton, Sättigung, Helligkeit, Alpha)

wobei die ersten drei Komponenten dem gleichen Format wie HSL folgen und der Alpha-Wert eine Dezimalzahl zwischen 0 und 1 ist.

 hsla(0, 100%, 50%, .5) /* rot mit 50% Deckkraft */   
 hsla(120, 100%, 50%, .8) /* grün mit 80% Deckkraft */   
 hsla(240, 100%, 50%, .3) /* blau mit 30% Deckkraft */

Textfarbe

Die color-Eigenschaft in CSS legt die Farbe des Textes innerhalb eines Elements fest. Sie akzeptiert jeden gültigen Farbwert, wie Farbnamen, Hexadezimalfarben, RGB, RGBA, HSL oder HSLA.

h1 {
  color: blue;
}

p {
  color: #FF0000;
}

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

• Das <h1>-Element hat blauen Text.
• Das <p>-Element hat roten Text mit einem Hexadezimalwert.
• Das <span>-Element hat grünen Text mit einem RGB-Wert.

Hintergrundfarbe

Die background-color-Eigenschaft legt die Hintergrundfarbe eines Elements fest. Sie akzeptiert die gleichen Werte wie die color-Eigenschaft.

div {
  background-color: yellow;
}

section {
  background-color: #00FF00;
}

article {
  background-color: rgba(255, 0, 0, 0.5);
}

• Das <div>-Element hat einen gelben Hintergrund.
• Das <section>-Element hat einen grünen Hintergrund mit einem Hexadezimalwert.
• Das <article>-Element hat einen roten Hintergrund mit 50% Deckkraft unter Verwendung eines RGBA-Wertes.

Rahmenfarbe

Die border-color-Eigenschaft legt die Rahmenfarbe eines Elements fest. Sie akzeptiert die gleichen Werte wie die color- und background-color-Eigenschaften.

.box {
  border: 2px solid;
  border-color: pink; 
} 

.container { 
  border: 1px dashed; 
  border-color: #0000FF; 
} 

.card { 
  border: 3px dotted;  
  border-color: hsl(240, 100%, 50%);
}

• Die .box-Klasse hat einen durchgezogenen rosa Rahmen.
• Die .container-Klasse hat einen gestrichelten blauen Rahmen mit Hexadezimalwerten.
• Die .card-Klasse hat gepunktete blaue Rahmen mit HSL-Werten.

Deckkraft

Die Deckkraft steuert die Transparenz zwischen null und eins, wobei null volle Transparenz und eins volle Sichtbarkeit bedeutet.

img {
  opacity: 0.5;
} 

.overlay {
  opacity: 0.8;
} 

.faded-text {
  opacity: 0.3;
}

• img-Elemente sind mit fünfzig Prozent halbtransparent.
• .overlay-Klassen erscheinen zu achtzig Prozent sichtbar.
• .faded-text-Klassen sehen zu dreißig Prozent verblasst aus.

Komplementärfarbschema

Komplementärfarben liegen sich im Farbkreis gegenüber. Sie erzeugen einen hohen Kontrast und können Elemente hervorheben. Beispiele sind:

• Rot und Grün
• Blau und Orange
• Lila und Gelb

Analoges Farbschema

Analoge Farben liegen im Farbkreis nebeneinander. Sie erzeugen einen ausgewogenen Look. Beispiele sind:

• Rot, Orange und Gelb
• Grün, Blaugrün und Blau
• Lila, Blaulila und Blau

Triadisches Farbschema

Triadische Farben sind gleichmäßig im Farbkreis verteilt und bilden ein Dreieck. Sie bieten eine lebendige Kombination. Beispiele sind:

• Rot, Gelb und Blau
• Grün, Orange und Lila
• Türkis, Magenta und Gelborange

Beachten Sie bei der Erstellung von Farbkombinationen diese Tipps:

• Verwenden Sie einen Farbkreis zur Auswahl passender Farben.
• Wählen Sie eine Hauptfarbe mit anderen als Akzente für Ausgewogenheit.
• Überlegen Sie, welche Stimmung Sie mit Ihrer Auswahl vermitteln möchten.
• Testen Sie Ihre Kombinationen auf verschiedenen Geräten auf Lesbarkeit.

Nutzen Sie Online-Tools zur Erstellung von Farbpaletten oder zum Erkunden verschiedener Schemata.

Denken Sie daran, dass Vorlieben je nach persönlichem Geschmack oder Projektkontext variieren. Experimentieren Sie mit verschiedenen Schemata, um visuell ansprechende Designs zu erstellen.