HTML - HEX Farben

Hallo, angehende Web-Entwickler! Heute tauchen wir in die farbenfrohe Welt der HTML HEX Farben ein. Als Ihr freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, Sie auf dieser Reise zu begleiten. Glauben Sie mir, am Ende dieses Tutorials werden Sie das Web in einem helt neuen Licht (im wahrsten Sinne des Wortes) sehen!

HTML - HEX

HEX Farbcodes in HTML

Lassen Sie uns mit den Grundlagen beginnen. HEX Farbcodes sind eine Möglichkeit, Farben in HTML und CSS anzugeben. Sie heißen "HEX", weil sie hexadezimale Notation verwenden. Lassen Sie sich von diesem großen Wort nicht abschrecken! Es ist einfacher, als es klingt.

Ein HEX Farbcodes beginnt mit einem '#' Symbol, gefolgt von sechs Zeichen. Diese Zeichen können Zahlen (0-9) oder Buchstaben (A-F) sein. Zum Beispiel:

<p style="color: #FF0000;">Dieser Text ist rot!</p>

In diesem Beispiel ist #FF0000 der HEX-Code für rot. Lassen Sie uns das einmal auseinandernehmen:

Die ersten beiden Zeichen (FF) repräsentieren die Menge an Rot
Die mittleren beiden (00) repräsentieren die Menge an Grün
Die letzten beiden (00) repräsentieren die Menge an Blau

Jedes Paar kann von 00 (keine Farbe) bis FF (maximale Menge dieser Farbe) reichen.

Hexadezimale Farbcodes

Nun werden wir technisch (keine Sorge, ich halte es einfach). Hexadezimal ist ein basis-16-Zahlensystem. Es verwendet 16 verschiedene Symbole: die Zahlen 0-9 und die Buchstaben A-F.

Hier ist eine kurze Umwandlungstabelle:

Dezimal	Hexadezimal
0-9	0-9
10	A
11	B
12	C
13	D
14	E
15	F

Also, wenn Sie einen HEX Farbcodes sehen, schauen Sie tatsächlich auf drei Paare zweistelliger hexadezimaler Zahlen!

Beispiele für HTML Hex Farben

Schauen wir uns einige häufige Farben und ihre HEX Codes an:

Farbe	HEX Code
Rot	#FF0000
Grün	#00FF00
Blau	#0000FF
Gelb	#FFFF00
Lila	#800080
Orange	#FFA500

Nun setzen wir diese in die Praxis mit einigen HTML Beispielen um:

<h1 style="color: #FF0000;">Diese Überschrift ist rot</h1>
<p style="color: #00FF00;">Dieser Absatz ist grün</p>
<div style="background-color: #0000FF; color: #FFFFFF;">
Diese Division hat einen blauen Hintergrund und weißen Text
</div>

In diesem Beispiel:

Wir haben eine rote Überschrift mit #FF0000
Ein grüner Absatz mit #00FF00
Eine Division mit blauem Hintergrund (#0000FF) und weißem Text (#FFFFFF)

Erinnern Sie sich daran, #FFFFFF ist weiß, weil es den maximalen Wert für alle drei Farbkomponenten (Rot, Grün und Blau) hat.

Hier ist ein interessantes Fact: Es gibt 16.777.216 mögliche Farben mit HEX Codes! Das ist mehr als genug, um die Stadt rot zu malen... und jede andere Farbe!

Lassen Sie uns etwas fortgeschritteneres ausprobieren:

<style>
.gradient-text {
background: linear-gradient(to right, #FF0000, #00FF00, #0000FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

<h2 class="gradient-text">Dieser Text hat einen Farbverlauf!</h2>

In diesem Beispiel verwenden wir HEX Farben, um einen Farbverlauf auf dem Text zu erzeugen. Der Verlauf geht von Rot (#FF0000) nach Grün (#00FF00) bis Blau (#0000FF). quite cool, oder?

Nun einige nützliche Tipps:

Kurze HEX-Schreibweise: Wenn alle drei Farbpaare gleich sind, können Sie den Code verkürzen. Zum Beispiel kann #FF0000 als #F00 geschrieben werden.
Transparenz: Sie können zwei zusätzliche Zeichen an das Ende eines HEX Codes hinzufügen, um die Transparenz zu steuern. Zum Beispiel ist #FF0000CC rot mit 80% Transparenz (CC in hexadezimal ist etwa 80% von FF).

<p style="color: #F00;">Kurzes Rot</p>
<p style="color: #FF0000CC;">Rot mit 80% Transparenz</p>

Farbwähler: Die meisten modernen Browser haben einen eingebauten Farbwähler in ihren Entwicklungstools. Einfach mit der rechten Maustaste klicken, Element untersuchen und das Farbrechteck neben einem Farbwert suchen. Das ist ein Retter in der Not, wenn man nach der perfekten Farbe sucht!

Fazit

Und das war's, Leute! Sie haben gerade Ihre ersten Schritte in die lebendige Welt der HTML HEX Farben gesetzt. Erinnern Sie sich daran, Übung macht den Meister. Versuchen Sie, eine farbenfrohe Webseite mit dem zu erstellen, was Sie heute gelernt haben. Experimentieren Sie mit verschiedenen Farben, spielen Sie mit Farbverläufen und vor allem: haben Sie Spaß!

Beim Abschied hier ein kleiner Webentwickler-Witz: Warum bevorzugen Webentwickler dunklen Modus? Weil Licht Käfer anzieht!

Weiterschreiben, weiterlernen und keine Angst haben, Ihrer digitalen Kreationen einen Farbtupfer hinzuzufügen. Bis zum nächsten Mal, fröhliches Coden!

Credits: Image by storyset