Summary  
This chapter explains how to use the CSS color property to style text by specifying colors as named values, hexadecimal codes, RGB numbers, and RGBA values with transparency.  

General domain of usage  
Web page styling and design

Watch this video to see how to style text and apply colors using different CSS properties and formats. You'll learn how to use color names, hex codes, rgb, and rgba values to customize the appearance of your text, and understand the impact of transparency with the alpha channel. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

Zuvor haben wir Farben auf sehr intuitive und unkomplizierte Weise auf Text angewendet. Lassen Sie uns jedoch die Details der Farbanwendung genauer betrachten.

## Farbe
Die Textfarbe kann einem Textelement mit der CSS-Eigenschaft `color` zugewiesen werden, die verschiedene Wertformate akzeptiert.

Die am häufigsten verwendeten Farbwerte sind RGB, Hex und Farbnamen. Betrachten wir das folgende Beispiel, in dem wir den Text blau einfärben.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cCBjbGFzcz0iY29sb3ItbmFtZSI+SSBmb3Jnb3Qgd2hlcmUgSSBsZWZ0IG15IGtleXMgYWdhaW4uPC9wPgogICAgPHAgY2xhc3M9ImNvbG9yLWhleCI+VGhlIGNvZmZlZSB3YXMgdG9vIGhvdCB0byBkcmluayByaWdodCBhd2F5LjwvcD4KICAgIDxwIGNsYXNzPSJjb2xvci1yZ2IiPlNoZSB0b29rIGEgZGVlcCBicmVhdGggYW5kIGxvb2tlZCBvdXQgdGhlIHdpbmRvdy48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwovKiBVc2luZyBhIG5hbWVkIGNvbG9yICovCi5jb2xvci1uYW1lIHsKICBjb2xvcjogYmx1ZTsKfQoKLyogVXNpbmcgdGhlIHNhbWUgY29sb3IgaW4gaGV4IGZvcm1hdCAqLwouY29sb3ItaGV4IHsKICBjb2xvcjogIzAwMDBmZjsKfQoKLyogVXNpbmcgdGhlIHNhbWUgY29sb3IgaW4gUkdCIGZvcm1hdCAqLwouY29sb3ItcmdiIHsKICBjb2xvcjogcmdiKDAsIDAsIDI1NSk7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogbW9ub3NwYWNlOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGdyYXk7CiAgcGFkZGluZzogMTBweDsKfQoKcCB7CiAgZm9udC1zaXplOiAxNHB4Owp9

## Formate zur Farbangabe
Eine detaillierte Betrachtung der einzelnen Formate.



### Farbname
Reservierte Farbnamen können verwendet werden. Die Liste der reservierten Farben ist unter <a href="https://htmlcolorcodes.com/color-names/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://htmlcolorcodes.com</a> zu finden.

CSS stellt vordefinierte Farbnamen wie `blue`, `red`, `green`, `purple` und andere bereit. Diese sind leicht lesbar, bieten jedoch nur eine begrenzte Auswahl.

### Hex-Format
**Hex** stellt Farben als sechsstelligen Code dar, der aus drei Paaren von zweistelligen Werten nach einem `#`-Symbol besteht. Jedes Paar steht für die Intensität von **Rot**, **Grün** und **Blau** (in dieser Reihenfolge).


Hex-Format-Werte reichen von `00` (keine Intensität) bis `FF` (maximale Intensität).

### RGB-Format
**RGB** stellt Farben als eine Reihe von drei Zahlen dar, die der Intensität von **Rot**, **Grün** und **Blau** entsprechen (in dieser Reihenfolge).

RGB-Format-Werte reichen von `0` (keine Intensität) bis `255` (maximale Intensität).

Sowohl **hex**- als auch **rgb**-Werte werden im Webdesign häufig verwendet. Die Wahl zwischen ihnen hängt von den persönlichen Vorlieben und den Anforderungen des Projekts ab.

Hinweis

### Transparenz mit RGBA
**Transparenz** bei rgb-Farben kann durch die Verwendung der `rgba`-Notation (rot, grün, blau, **alpha**) erreicht werden, wobei **alpha** den Grad der Deckkraft oder Transparenz der Farbe angibt.

Der **alpha**-Wert kann von `0` (vollständig transparent) bis `1` (vollständig deckend) reichen. Zum Beispiel steht der RGBA-Wert `rgba(0, 255, 0, 0.5)` für eine grüne Farbe mit 50% Deckkraft.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cCBjbGFzcz0icmdiYS1vcGFxdWUiPk9wYXF1ZSAoYSA9IDEpPC9wPgogICAgPHAgY2xhc3M9InJnYmEtc2VtaSI+U2VtaS1UcmFuc3BhcmVudCAoYSA9IDAuNSk8L3A+CiAgICA8cCBjbGFzcz0icmdiYS10cmFuc3BhcmVudCI+QWxtb3N0IEludmlzaWJsZSAoYSA9IDAuMSk8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwovKiBGdWxseSBvcGFxdWUgKi8KLnJnYmEtb3BhcXVlIHsKICBjb2xvcjogcmdiYSgyNTUsIDAsIDAsIDEpOyAvKiBSZWQsIGZ1bGx5IG9wYXF1ZSAqLwp9CgovKiBTZW1pLXRyYW5zcGFyZW50ICovCi5yZ2JhLXNlbWkgewogIGNvbG9yOiByZ2JhKDI1NSwgMCwgMCwgMC41KTsgLyogUmVkLCA1MCUgdHJhbnNwYXJlbnQgKi8KfQoKLyogQWxtb3N0IGludmlzaWJsZSAqLwoucmdiYS10cmFuc3BhcmVudCB7CiAgY29sb3I6IHJnYmEoMjU1LCAwLCAwLCAwLjEpOyAvKiBSZWQsIHZlcnkgZmFpbnQgKi8KfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiBmYW50YXN5OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIG1hcmdpbjogMDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCnAgewogIGZvbnQtc2l6ZTogMThweDsKICBmb250LXdlaWdodDogNjAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7CiAgcGFkZGluZzogNXB4IDE1cHg7CiAgYm94LXNoYWRvdzogMnB4IDJweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiAxMHB4Owp9CgpwOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0=

Was ist der Hauptunterschied zwischen der Hex- und der RGB-Farbnotation?

Beherrschen Sie die Grundlagen von CSS, der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie die Fähigkeiten, um optisch ansprechende und gut strukturierte Webseiten zu erstellen.

Verstehen, wie CSS mit HTML verbunden wird und wie Stile durch Selektoren angewendet werden. Farben, Textgestaltung und Hover-Effekte zur Steuerung der visuellen Darstellung anwenden.

Verbesserung der Typografie durch Zeilenhöhe, Abstände, Schriftarteigenschaften und benutzerdefinierte Schriftarten. Steuerung von Schriftfamilien, -gewicht, -stil und -größe für eine bessere Lesbarkeit.

Steuerung der Layoutstruktur mit Margin-, Padding-, Border- und Width-Eigenschaften. Verständnis des Box-Sizing-Verhaltens und der Anzeigearten von Elementen wie Block, Inline und Inline-Block.

Steuerung von horizontalen und vertikalen Layouts mit Flexbox-Eigenschaften. Anpassung von Richtung, Ausrichtung und Abstand zur Strukturierung von UI-Komponenten.

Layouts mit Hintergrundfarben, Bildern, Pseudoelementen und Schatten aufwerten. Visuelle Komponenten für Tiefe und Kontrast gestalten.

Text- und Farbgestaltung

Farbe

Formate zur Farbangabe

Farbname

Hex-Format

RGB-Format

Transparenz mit RGBA