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

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.

PreviousSchriftartenNextEinheiten

Last updated

Was this helpful?