HTML - Farben

Willkommen, angehende Web-Entwickler! Heute tauchen wir ein in die farbenfrohe Welt der HTML-Farben. Als Ihr freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, Sie auf dieser bunten Reise zu führen. Am Ende dieses Tutorials werden Sie das Web mit dem Selbstvertrauen eines digitalen Picassos bemalen!

HTML - Colors

Methoden zur Farbencodierung in HTML

Bevor wir unsere Webseiten mit Farben fluten, lassen Sie uns verstehen, wie wir Farben in HTML darstellen können. Es gibt mehrere Möglichkeiten, Farben anzugeben, und jede hat ihren eigenen Charme. Sehen wir uns diese einmal an:

Farbennamen
Hexadezimalwerte
RGB-Werte
RGBA-Werte
HSL-Werte
HSLA-Werte

Hier ist eine praktische Tabelle, die diese Methoden zusammenfasst:

Methode	Beispiel	Beschreibung
Farbennamen	`red`	Vordefinierte Farbennamen
Hexadezimal	`#FF0000`	6-stellige Kodierung, die RGB-Werte darstellt
RGB	`rgb(255, 0, 0)`	Rot, Grün, Blaue Werte (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	RGB mit Alpha-Wert (Transparenz)
HSL	`hsl(0, 100%, 50%)`	Farbton, Sättigung, Helligkeit
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL mit Alpha-Wert

Machen Sie sich keine Sorgen, wenn das jetzt wie ein Alphabet-Soup aussieht. Wir werden es Schritt für Schritt auseinandernehmen!

Textfarbe festlegen

Lassen Sie uns mit etwas Einfachem beginnen: die Farbe unseres Textes ändern. Wir verwenden die Eigenschaft color in CSS, um dies zu erreichen. Hier ist ein Beispiel:

<p style="color: blue;">Dieser Text ist blau!</p>

In diesem Beispiel verwenden wir eine Inline-Style, um die Farbe festzulegen. Das Attribut style ermöglicht es uns, CSS direkt zu einem HTML-Element hinzuzufügen. Der Teil color: blue;weist den Browser an, diesen Text in blau darzustellen.

Was aber, wenn wir eine bestimmte Blautönung verwenden möchten? Dann kommen unsere anderen Farbencodierungsmethoden ins Spiel:

<p style="color: #0000FF;">Dies ist auch blau, verwendet eine Hexadezimalangabe!</p>
<p style="color: rgb(0, 0, 255);">Und dies ist blau, verwendet RGB-Werte!</p>

Beide werden die gleiche Blautönung wie unser erstes Beispiel erzeugen. Die Hexadezimalangabe #0000FF und der RGB-Wert rgb(0, 0, 255) repräsentieren beide pure Blau.

Hintergrundfarbe festlegen

Jetzt geben wir unserer Seite etwas Pep mit Hintergrundfarben. Wir verwenden die Eigenschaft background-color dafür:

<div style="background-color: yellow; padding: 10px;">
Dieser Div hat einen gelben Hintergrund!
</div>

In diesem Beispiel setzen wir die Hintergrundfarbe eines div-Elements auf gelb. Das padding: 10px; gibt unserem Text etwas Platz zum Atmen.

Erinnern Sie sich an RGBA, das ich earlier erwähnt habe? Hier kann es wirklich nützlich sein:

<div style="background-color: rgba(255, 255, 0, 0.5); padding: 10px;">
Dieser Div hat einen halbtransparenten gelben Hintergrund!
</div>

Die 0.5 am Ende von rgba(255, 255, 0, 0.5) setzt die Transparenz auf 50%, was uns einen schönen halbtransparenten Effekt gibt.

Randfarbe festlegen

Lassen Sie uns unser Werk mit farbigen Rändern einrahmen:

<div style="border: 2px solid green; padding: 10px;">
Dieser Div hat einen grünen Rand!
</div>

Hier verwenden wir die Eigenschaft border, um einen 2-Pixel-breiten, festen grünen Rand um unser div zu erstellen.

Wir können auch schick werden und unterschiedliche Farben für jede Seite des Randes verwenden:

<div style="border-top: 2px solid red;
border-right: 2px solid green;
border-bottom: 2px solid blue;
border-left: 2px solid yellow;
padding: 10px;">
Dieser Div hat eine andere Farbe für jeden Rand!
</div>

HTML-Farben - Farbennamen

HTML bringt eine Reihe vordefinierter Farbennamen mit, die Sie verwenden können. Diese sind großartig für Prototypen oder wenn Sie schnell eine Farbe ohne spezifische Schattierungen benötigen.

<p style="color: tomato;">Dieser Text ist tomatenfarben!</p>
<p style="color: skyblue;">Dieser Text ist himmelblau!</p>
<p style="color: mediumseagreen;">Dieser Text ist mittleres Meeresgrün!</p>

W3C-Standard 16 Farben

Das W3C (World Wide Web Consortium) hat 16 Standardfarben definiert, die von allen Browsern unterstützt werden. Diese sind:

Schwarz
Silber
Grau
Weiß
Kastanienbraun
Rot
Violett
Fuchsia
Grün
Zitronengrün
Oliven
Gelb
Marineblau
Blau
Türkis
Aqua

Hier ist eine schnelle Demonstration:

<table>
<tr>
<td style="background-color: black; color: white;">Schwarz</td>
<td style="background-color: silver;">Silber</td>
<td style="background-color: gray;">Grau</td>
<td style="background-color: white;">Weiß</td>
</tr>
<tr>
<td style="background-color: maroon; color: white;">Kastanienbraun</td>
<td style="background-color: red;">Rot</td>
<td style="background-color: purple; color: white;">Violett</td>
<td style="background-color: fuchsia;">Fuchsia</td>
</tr>
<tr>
<td style="background-color: green; color: white;">Grün</td>
<td style="background-color: lime;">Zitronengrün</td>
<td style="background-color: olive;">Oliven</td>
<td style="background-color: yellow;">Gelb</td>
</tr>
<tr>
<td style="background-color: navy; color: white;">Marineblau</td>
<td style="background-color: blue; color: white;">Blau</td>
<td style="background-color: teal; color: white;">Türkis</td>
<td style="background-color: aqua;">Aqua</td>
</tr>
</table>

Und da haben Sie es, Leute! Sie sind jetzt mit dem Wissen ausgestattet, um Ihrer Webseite einen Farbtupfer hinzuzufügen. Erinnern Sie sich daran, dass mit großer Farbe große Verantwortung kommt - verwenden Sie Ihre neuen Fähigkeiten weise, um visuell ansprechende und zugängliche Websites zu erstellen.

Als wir uns verabschieden, hier ist ein kleiner Web-Entwickler-Witz für Sie: Warum bevorzugen Web-Entwickler dunklen Modus? Weil Licht Käfer anzieht!

Experimentieren Sie weiter mit Farben und haben Sie keine Angst, kreativ zu sein. Frohes Coden und möge Ihre Webseiten immer farbenfroh sein!

Credits: Image by storyset