Farben

RGB-Farbmodell

Auf Bildschirmen und Beamer werden die Farben additiv aus den drei Grundfarben Rot, Grün und Blau zusammengemischt:

RGB Farbodell

In CSS können Farben mit Farbnamen oder Farbwerten Arten definiert werden.

Farben in CSS mit Farbnamen

z.B. black, white, red, darkgrey, lightblue, rebeccapurple, orange.

.navigation {
    color: darkblue;
    background-color: lightgrey;
}

> Liste aller unterstützen Farbnamen

Farben in CSS mit Farbwerten

Es gibt viele verschiedene Farbmodelle, die in CSS genutzt werden können. Die häufigsten sind Angaben auf RGB-Basis:

RGB Farbmodell mit Farbwerten

/* RGB (Red, Green, Blue): */
color: rgb(254, 233, 93);

/* RGB Hexadezimal: */
color: #fee95d;

Wenn die beiden Hexadezimal-Ziffern je Farbe übereinstimmen, können die abgekürzt werden:

color: #fff; /* = #ffffff */
color: #d20; /* = #dd2200 */
color: #000; /* = #000000 */

Beide können zusätzlich eine 4. Zahl für Transparenz enthalten:

/* RGB (Red, Green, Blue) mit 50% Transparenz: */
color: rgba(254, 233, 93, 0.5);

/* RGB Hexadezimal mit 50% Transparenz*/
color: #fee95d88;

Farbwähler im Browser und Visual Studio Code nutzen

Im Browser kannst du über Rechts-Klick > Untersuchen oder mit [F12] in die DevTools wechseln und dort die Farbe eines Elements in CSS finden und verändern:

DevTools Farbwähler

In Visual Studio Code gibt es beim Bearbeiten von CSS ein ähnliches Tool:

Farbwähler in Visual Studio Code

1. Farbwähler öffnen

2. Zwischen Farbmodellen umschalten

3. Transparenz setzen

Links

• Farbwähler: Farbwerte finden und umwandeln (Hexcolortool)
• Farbrad zum Generieren einer ganzen Farbpalette (Adobe)
• Weitere Arten von Farbwerten selber ausprobieren (Mozilla)

Aufgabe

• Wähle für deine Rechnung für dein Tabellen-Kopf im Browser eine andere Farbe und kopiere den neuen Wert dann in dein CSS. Probiere die rgb(...)- und die #xxxxxx-Variante aus.