Farben

Farbmodelle

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

In CSS können Farben mit Farbnamen oder mit verschiedenen Farbmodellen definiert werden.

Farbnamen

> Liste aller unterstützen Farbnamen

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

RGB-Farbwerte

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 */

Transparenz: 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;

Andere Farbmodelle

• hsl(Farbton, Sättigung, Helligkeit): Beschreibt Farben auf einer intuitiveren Weise: Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness).

• hwb(Farbton, Weißanteil, Schwarzanteil): Kombiniert Farbton mit Anteilen von Weiß und Schwarz.

• lab(Helligkeit, a, b): Ein Farbraum, der die menschliche Farbwahrnehmung nachbildet. Er besteht aus Helligkeit und den Achsen a (Grün-Rot) und b (Blau-Gelb).

• lch(Helligkeit, Sättigung, Farbton): Auch ein geräteunabhängiger Farbraum, der auf CIELAB basiert, aber Helligkeit, Sättigung (Chroma) und Farbton verwendet.

Farbwähler im Browser und in Visual Studio Code

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. Auch Transparenz ist möglich. Unterhalb des Farbwertes kann du das Farbmodell wecheln (HEX, RGB, etc.):

DevTools Farbwähler

In Visual Studio Code gibt es beim Bearbeiten von CSS ein ähnliches Tool. Auch hier kannst du das Farbmodell ändern durch Klick auf den Farbwert oben:

Farbwähler in Visual Studio Code

1. Farbwähler öffnen

2. Zwischen Farbmodellen umschalten

3. Transparenz setzen

Links

• Farbkreis (Figma)

• Color Wheel (Canva)

• Farbwähler & umwandeln (Mediaevent)