CSS – Farben und Hintergründe

1. Farben in CSS

Mit CSS können Textfarben, Hintergrundfarben und Rahmenfarben festgelegt werden.

Dafür gibt es verschiedene Schreibweisen, beispielsweise Farbnamen, HEX, RGB und HSL.

Beispiel

h1 {
    color: blue;
}

body {
    background-color: white;
}

2. Farben mit Farbnamen

CSS unterstützt zahlreiche vordefinierte Farbnamen.

Beispiel

p {
    color: red;
}

h2 {
    color: blue;
}

div {
    background-color: green;
}

Farbdarstellung

Häufig verwendete Farbnamen sind red, blue, green, black, white, gray, yellow und orange.

3. HEX-Farben

HEX-Farben werden durch ein Rautezeichen und hexadezimale Ziffern beschrieben.

Die Schreibweise #RRGGBB enthält jeweils zwei Stellen für Rot, Grün und Blau.

Beispiele

h1 {
    color: #1959a6;
}

p {
    color: #333333;
}

body {
    background-color: #ffffff;
}

4. RGB-Farben

RGB steht für Red, Green und Blue. Die drei Farbkanäle werden durch Zahlenwerte von 0 bis 255 beschrieben.

Beispiel

h1 {
    color: rgb(25, 89, 166);
}

p {
    color: rgb(220, 38, 38);
}

5. RGBA – Farben mit Transparenz

Mit einem zusätzlichen Alpha-Wert kann die Transparenz einer Farbe eingestellt werden.

Der Alpha-Wert liegt zwischen 0 und 1. Dabei bedeutet 0 vollständig transparent und 1 vollständig deckend.

Beispiel

.box {
    background-color: rgba(25, 89, 166, 0.5);
}

Ergebnis

6. HSL-Farben

HSL steht für Hue, Saturation und Lightness.

• Hue – Farbton von 0 bis 360 Grad
• Saturation – Farbsättigung in Prozent
• Lightness – Helligkeit in Prozent

Beispiel

.box {
    background-color: hsl(150, 65%, 35%);
}

7. HEX, RGB und HSL im Vergleich

Alle vier Beispiele beschreiben dieselbe blaue Farbe.

8. Hintergrundfarbe mit background-color

Die Eigenschaft background-color legt die Hintergrundfarbe eines Elements fest.

CSS-Code

.hinweis {
    background-color: #eff6ff;
    padding: 20px;
}

9. Hintergrundbilder mit background-image

Mit background-image kann ein Bild als Hintergrund eines Elements verwendet werden.

CSS-Code

.banner {
    background-image: url("bilder/hintergrund.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Der angegebene Bildpfad muss zu einer vorhandenen Bilddatei führen. Relative Pfade in CSS-Dateien beziehen sich auf den Speicherort der CSS-Datei.

Beispiel eines Hintergrundmusters

10. background-size

Mit background-size wird die Größe eines Hintergrundbildes bestimmt.

Beispiel

.banner {
    background-size: cover;
    background-position: center;
}

11. background-repeat

Die Eigenschaft background-repeat bestimmt, ob ein Hintergrundbild wiederholt wird.

12. Lineare Farbverläufe

Mit linear-gradient() können fließende Übergänge zwischen mehreren Farben erzeugt werden.

CSS-Code

.banner {
    background: linear-gradient(
        to right,
        #1959a6,
        #60a5fa
    );
}

Ergebnis

13. Radiale Farbverläufe

Mit radial-gradient() wird ein Farbverlauf erzeugt, der sich von einem Mittelpunkt nach außen ausbreitet.

CSS-Code

.kreis {
    background: radial-gradient(
        circle,
        #bfdbfe,
        #1959a6
    );
}

Ergebnis

14. opacity – Transparenz eines Elements

Die Eigenschaft opacity bestimmt die Deckkraft des gesamten Elements einschließlich seines Inhalts.

CSS-Code

.box {
    opacity: 0.5;
}

Ergebnis

15. Rahmenfarben und Schatten

CSS ermöglicht außerdem farbige Rahmen und Schatten.

Rahmen

.box {
    border: 4px solid #1959a6;
    border-radius: 12px;
}

Schatten

.karte {
    box-shadow: 0 8px 25px
        rgba(0, 0, 0, 0.15);
}

16. Lesbarkeit und Farbkontrast

Bei der Gestaltung von Webseiten muss auf ausreichenden Kontrast zwischen Text und Hintergrund geachtet werden.

Guter Kontrast

Schlechter Kontrast

17. Praktische Übungen

h1 {
    color: red;
}

body {
    background-color: #f1f5f9;
}

rgb(0, 0, 255)

.box {
    background: linear-gradient(
        to right,
        red,
        blue
    );
}

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

background-size: cover;

18. Zusammenfassung

In CSS können Farben mit Farbnamen, HEX, RGB und HSL definiert werden. Transparenz kann über Alpha-Werte oder opacity eingestellt werden.

Hintergrundfarben werden mit background-color festgelegt. Hintergrundbilder verwenden background-image. Mit linear-gradient() und radial-gradient() können Farbverläufe erstellt werden.

Eine gute Farbgestaltung berücksichtigt auch Lesbarkeit und Barrierefreiheit.