Schriftfarbe

Farben in CSS werden in verschiedenen Farbbereichen angegeben. Ein Farbbereich beschreibt, wie Farben gemischt oder dargestellt werden. Die bekanntesten Bereiche sind:

  • Farbnamen – einfache, vorgegebene Farben wie red oder blue oder transparent

  • Hexadezimalwerte (#RRGGBB) – Mischung aus Rot, Grün und Blau

  • RGB / RGBA – Mischung aus Rot, Grün und Blau, mit optionalem Alphakanal für Transparenz

  • HSL / HSLA – Mischung aus Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness), ebenfalls mit optionalem Alphakanal

Die Schriftfarbe kann mittels der Eigenschaft color verändert werden.

p {
  color: red;
}

p {
  color: #ff0000;
}

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

Farbnamen

Es gibt über 140 verschiedene Farben, die über ihren Namen in CSS verwendet werden können. Beispiele: red, white, black, yellow, aqua, gold.

Weitere Beispiele auf der Seite Farbcodes.

p {
  color: green;
}

CSS definiert das Aussehen von HTML-Elementen.

Hex-Werte

Farben können als Hexadezimalzahl angegeben werden. Eine Hexadezimalzahl beginnt mit einem # und besteht aus drei Pärchen: Rot, Grün, Blau. Zur Darstellung werden die Zahlen 0–9 und die Buchstaben A–F verwendet.

p {
  color: #ff0000;
}

h1 {
  color: #0ade23;
}

CSS

CSS definiert das Aussehen von HTML-Elementen.

Hex mit Alphakanal (Transparenz)

Hex-Werte können einen vierten Wert enthalten, den Alphakanal:

#RRGGBBAA

  • AA = Transparenz, 00 = komplett durchsichtig, FF = komplett deckend

p {
  color: #ff000080; /* Rot mit 50% Transparenz */
}

h1 {
  color: #00000033; /* Schwarz mit ca. 20% Transparenz */
}

CSS

CSS definiert das Aussehen von HTML-Elementen.

RGB

RGB-Farben werden aus Rot, Grün, Blau gemischt. Jeder Wert liegt zwischen 0–255.

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

h1 {
  color: rgb(0, 191, 255);
}

CSS

CSS definiert das Aussehen von HTML-Elementen.

RGBA – RGB mit Alphakanal

p {
  color: rgba(255, 0, 0, 0.5); /* Rot mit 50% Transparenz */
}

h1 {
  color: rgba(0, 0, 0, 0.2); /* Schwarz mit 20% Transparenz */

  • A liegt zwischen 0 (durchsichtig) und 1 (deckend)

CSS

CSS definiert das Aussehen von HTML-Elementen.

HSL – Farbton, Sättigung, Helligkeit

HSL ist eine alternative Möglichkeit, Farben zu definieren:

hsl(H, S%, L%)

  • H (Hue) = Farbton auf dem Farbkreis (0–360°)

  • S (Saturation) = Sättigung in Prozent (0% = grau, 100% = volle Farbe)

  • L (Lightness) = Helligkeit in Prozent (0% = schwarz, 50% = normal, 100% = weiß)

hsl Farben

Beispiele:

p {
  color: hsl(0, 100%, 50%); /* Rot */
}

h1 {
  color: hsl(200, 100%, 50%); /* Blau */
}

CSS

CSS definiert das Aussehen von HTML-Elementen.

HSLA – HSL mit Alphakanal

p {
  color: hsla(0, 100%, 50%, 0.5); /* Rot mit 50% Transparenz */
}

h1 {
  color: hsla(200, 100%, 50%, 0.2); /* Blau mit 20% Transparenz */
}

  • A liegt zwischen 0 (durchsichtig) und 1 (deckend)

CSS

CSS definiert das Aussehen von HTML-Elementen.