Farben in CSS: Deine Webseite farbenfroh gestalten

Webseiten ohne Farben wären langweilig. Standardmäßig sind Texte schwarz auf weißem Hintergrund und Links knallblau. Mit CSS kannst du jedoch deine Webseite farbenfroh gestalten. Hier erfährst du, wie du Farben in CSS definierst und welche Methoden es gibt.

Farbnamen

Der einfachste Weg, Farben in CSS zu verwenden, ist die Farbnamen:

/* Ein Absatz mit blauer Schrift */
p {
   color: blue;
}

Es gibt 140 Farbnamen, von red bis LightGoldenRodYellow. Diese Methode ist einfach, aber nicht sehr flexibel.

Hex-Codes

Hexadezimale Farbwerte bieten mehr Präzision. Sie bestehen aus sechs Zeichen, die Rot, Grün und Blau repräsentieren:

/* Ein Absatz mit blauer Schrift */
p {
   color: #0000ff;
}

Mit Hex-Codes kannst du 16.777.216 verschiedene Farben darstellen. Programme wie Photoshop oder Online-Tools wie HTML Color Codes helfen dir, die passenden Codes zu finden.

Kurzschreibweise für Hex-Codes

Bei gleichen Pärchen kannst du die Hex-Codes abkürzen:

#ffffff = #fff
#cc0000 = #c00

rgb() und rgba()

Eine weitere Methode ist die Verwendung von rgb() und rgba(). rgb() definiert Farben durch die Anteile von Rot, Grün und Blau, während rgba() auch die Deckkraft (Alpha) berücksichtigt:

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

h1 {
   color: rgba(0,0,255,1); /* Blau, vollständig deckend */
}

h2 {
   color: rgba(0,0,255,.5); /* Blau, 50% deckend */
}

Fazit

Farben kannst du in CSS auf verschiedene Arten definieren. Hex-Codes und rgba() bieten die größte Flexibilität und Genauigkeit. Mit Farbwählern aus Programmen wie Photoshop oder Online-Tools findest du schnell die richtigen Codes. Experimentiere mit den verschiedenen Methoden und bringe Farbe in dein Webdesign!