HTML - Hexadezimalcodes

Aufbau von HEX-Farbcodes

HEX-Farbcodes verwenden ein 6-stelliges Hexadezimalformat, das aus Buchstaben (A-F) und Zahlen (0-9) besteht. Dem Code wird ein Rautezeichen (#) vorangestellt und er ist unabhängig von Groß- und Kleinschreibung. Der 6-stellige Code ist in drei Paare unterteilt, die jeweils eine Farbkomponente darstellen: Rot (R), Grün (G) und Blau (B).

#FF0000

Jedes Zahlenpaar in einem HEX-Farbcode kann von 00 bis FF reichen, wobei 00 die niedrigste Intensität und FF die höchste Intensität der jeweiligen Farbkomponente darstellt. Durch Variation der Werte der roten, grünen und blauen Komponenten können viele Farben erzeugt werden.

Wie HEX-Farbcodes funktionieren

HEX-Farbcodes funktionieren, indem sie die Intensität der roten, grünen und blauen Komponenten angeben, aus denen eine Farbe besteht. Jede Komponente wird durch einen Hexadezimalwert zwischen 00 und FF dargestellt. Die Beziehung zwischen Hexadezimalwerten und RGB-Farben ist unkompliziert.

#000000

#FFFFFF

Durch die Verwendung verschiedener Kombinationen von Hexadezimalwerten für diese Komponenten können Sie über 16 Millionen mögliche Farben darstellen. Dies ermöglicht es Webentwicklern und Designern, genaue Farben für verschiedene Elemente auf einer Webseite wie Text oder Hintergründe festzulegen.

Anwendung von HEX-Farben auf HTML-Elemente

HEX-Farbcodes können auf HTML-Elemente mit dem style-Attribut angewendet werden. Das style-Attribut ermöglicht die Angabe von Inline-CSS-Stilen für ein Element, einschließlich der Eigenschaften color und background-color.

Um die Textfarbe eines Elements mit einem HEX-Farbcode festzulegen, verwenden Sie die color-Eigenschaft innerhalb des style-Attributs:

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

Um die Hintergrundfarbe eines Elements festzulegen, verwenden Sie die background-color-Eigenschaft:

<div style="background-color: #00FF00;">Dieses div hat einen grünen Hintergrund.</div>

Sie können HEX-Farbcodes auch auf Ränder anwenden, indem Sie die border-Eigenschaft verwenden:

<p style="border: 2px solid #0000FF;">Dieser Absatz hat einen blauen Rand.</p>

Durch die Verwendung des style-Attributs mit diesen Eigenschaften können Sie HEX-Farbcodes auf verschiedene HTML-Elemente anwenden und deren Erscheinungsbild steuern.

HEX-Farbcodes in CSS

Neben Inline-Stilen können HEX-Farbcodes auch in CSS-Stylesheets definiert werden. Dies ermöglicht es, Präsentationsstile von der HTML-Struktur zu trennen und Farben mithilfe von CSS-Selektoren und Klassen anzuwenden.

Um einen HEX-Farbcode in einem CSS-Stylesheet zu definieren, verwenden Sie diese Syntax:

.roter-text {
  color: #FF0000;
}

.gruener-hintergrund {
  background-color: #00FF00;
}

.blauer-rand {
  border: 2px solid #0000FF;
}

Wir definieren drei CSS-Klassen: .roter-text, .gruener-hintergrund und .blauer-rand. Jede Klasse gibt einen anderen HEX-Farbcode für ihre jeweilige Eigenschaft an.

Um diese Klassen auf HTML-Elemente anzuwenden, verwenden Sie das class-Attribut:

<p class="roter-text">Dieser Text ist rot.</p>
<div class="gruener-hintergrund">Dieses div hat einen grünen Hintergrund.</div>
<p class="blauer-rand">Dieser Absatz hat einen blauen Rand.</p>

Durch die Definition von HEX-Farbcodes in CSS-Stylesheets und die Verwendung von Selektoren und Klassen können Sie einheitliche Farben auf Ihrer Webseite anwenden. Dieser Ansatz fördert die Wiederverwendung von Code und erleichtert die Aktualisierung visueller Stile auf Ihrer Website.

Pastellfarben

• #FFC8DD (Rosa)
• #FFAFCC (Hellrosa)
• #BDE0FE (Hellblau)
• #A2D2FF (Himmelblau)
• #CDB4DB (Lavendel)

Warme Erdtöne

• #E76F51 (Gebranntes Siena)
• #F4A261 (Sandbraun)
• #E9C46A (Dunkles Khaki)
• #2A9D8F (Dschungelgrün)
• #264653 (Anthrazit)

Leuchtend und Kräftig

• #FF4136 (Leuchtendes Rot)
• #FF851B (Orange)
• #FFDC00 (Gelb)
• #2ECC40 (Grün)

Diese Farbpaletten zeigen, wie verschiedene Farben kombiniert werden können, um visuell ansprechende Designs zu erstellen. Bei der Auswahl von Farben für eine Website sollten Sie Faktoren wie Harmonie, Kontrast und die Gesamtstimmung oder das Gefühl, das Sie vermitteln möchten, berücksichtigen.

Viele Websites und Tools helfen Designern, Farbpaletten zu erstellen und zu erkunden, wie zum Beispiel Adobe Color, Coolors und Paletton. Diese Tools ermöglichen es Ihnen, Farbschemata basierend auf verschiedenen Prinzipien wie komplementären oder analogen Farben zu generieren.

Durch die Verwendung gängiger HEX-Farbcodes und gut gestalteter Paletten können Webdesigner ansprechende Websites erstellen, die ihre beabsichtigte Botschaft klar vermitteln.

Online HEX-Farbcode-Generatoren oder Farbwähler

Diese Websites ermöglichen es Ihnen, eine Farbe visuell mithilfe eines Farbrades auszuwählen oder durch Anpassung der Regler für Farbton, Sättigung und Helligkeit. Einige beliebte Online-Farbwähler sind:

• ColorPicker.com: Ein einfacher und intuitiver Farbwähler, der die HEX-, RGB- und HSL-Werte der ausgewählten Farbe anzeigt.
• Adobe Color: Ein Tool, mit dem Sie Farbpaletten basierend auf verschiedenen Regeln wie monochromatischen oder komplementären Farben erstellen können.
• Coolors.co: Ein Generator, der Ihnen hilft, Farbpaletten für Ihre Projekte zu erstellen und zu speichern.

Diese Tools sind nützlich, wenn Sie eine bestimmte Farbe finden oder eine neue Palette erstellen möchten.

Browser-Erweiterungen und Plugins

Einige beliebte Erweiterungen sind:

• ColorZilla: Eine Erweiterung für Firefox und Chrome, mit der Sie Farben von Webseiten auswählen können.
• Eye Dropper: Eine Chrome-Erweiterung, mit der Sie Farben von Webseiten auswählen und deren HEX-, RGB- oder HSL-Werte kopieren können.
• Color Picker: Ein Firefox-Add-on, mit dem Sie Farben von jeder Webseite auswählen können.

Diese Erweiterungen machen es einfach, schnell Farben von bestehenden Websites auszuwählen.

Umwandlung zwischen verschiedenen Farbformaten

Möglicherweise müssen Sie auch zwischen verschiedenen Formaten wie HEX, RGB (Rot Grün Blau) und HSL (Farbton Sättigung Helligkeit) umwandeln.

#FF0000

Ein 6-stelliger Code, der eine Farbe darstellt, wobei jedes Ziffernpaar der Intensität von Rot, Grün und Blau entspricht (z.B. #FF0000 für Rot).

rgb(255, 0, 0)

Gibt die Intensität von Rot, Grün und Blau als einzelne Werte zwischen 0 und 255 an.

hsl(0, 100%, 50%)

Stellt Farben mit Farbton (0-360 Grad), Sättigung (0-100%) und Helligkeit (0-100%) dar.

Viele Online-Tools wie RapidTables bieten Konverter, die eine Eingabe in einem Format und eine Ausgabe in einem anderen ermöglichen. Dies kann hilfreich sein, wenn Sie mit verschiedenen Systemen arbeiten.