HTML-Farbcodes – Alles über HEX, RGB, RGBA, HSL und HSLA

Weitere Informationen zum Ändern der Text-, Hintergrund- oder Rahmenfarbe finden Sie im Kapitel Anleitungsartikel. Die Artikel in diesem Kapitel beantworten häufig gestellte Fragen und enthalten C#-Beispiele, die die notwendigen Informationen über die Verwendung der Aspose.HTML for .NET-Bibliothek zur Lösung bestimmter Aufgaben liefern.

HTML-Farben

HTML-Farben sind die Farben, die zur Darstellung von Webseiten verwendet werden. Sie sind eng mit den Methoden zur Beschreibung und Definition dieser Farben durch ihre jeweiligen Farbcodes verbunden. HTML-Farben können zum Beispiel mit den üblichen englischen Farbnamen oder mit HEX-Werten, RGB-Tripletts, HSL-, RGBA- und HSLA-Werten angegeben werden.

Farben spielen eine wesentliche Rolle bei der Gestaltung des wahrgenommenen Wertes von Webinhalten und der Emotionen, die eine Person beim Betrachten empfindet. In HTML und XHTML können Farben für Text, Hintergrund, Rahmenränder, Tabellen und einzelne Tabellenzellen verwendet werden.

HTML-Farbnamen

HTML Color Names sind eine alltägliche Sache für diejenigen, die in der Webentwicklung arbeiten. Die W3C-Spezifikation der Farbnamen unterscheidet zwischen Grundfarben und erweiterten Farben. HTML4 hat 140 Farbnamen, darunter 16 Grundfarben – Aqua, Schwarz, Blau, Fuchsia, Grau, Grün, Lime, Maroon, Navy, Olive, Purple, Rot, Silber, Teal, Weiß und Gelb. In HTML5 können Sie insgesamt 147 HTML-Farbnamen verwenden, darunter 17 Grundfarben. Der zusätzliche Farbname in HTML5 ist Orange.

Die Abbildung zeigt 16 Grundfarben mit HEX- und RGB-Codes:

HTML-Farbcodes

HTML-Farbcodes sind ein Mittel zur Darstellung eines Farbformats, das ein Computer lesen und anzeigen kann. Farbcodes werden in HTML und CSS verwendet, um Farbschemata für das Webdesign zu erstellen. Sie werden hauptsächlich von Webdesignern, Front-End-Entwicklern, Programmierern und digitalen Illustratoren verwendet.

RGB-Farben

RGB (Red, Green, Blue) ist ein additives Farbmodell, das beschreibt, wie jede Farbe mit Hilfe der drei Grundfarben kodiert wird. Es ist die Grundlage für die Farbdarstellung durch Licht auf Fernsehbildschirmen, Computern, Bildscannern, Videoprojektoren, Digitalkameras und mobilen Geräten.

Die Werte R, G und B sind die Intensität (im Bereich von 0 bis 255) der roten, grünen bzw. blauen Komponenten der bestimmten Farbe. Das heißt, eine hellblaue Farbe kann als (0,0,255), Rot als (255,0,0), Hellgrün – (0,255,0), Schwarz – (0,0,0) und Weiß – (255,255,255) definiert werden. RGB ist ein beliebtes Farbcodemodell in der Fotografie, im Fernsehen und in der Computergrafik. Da es für jede Farbe 256 verschiedene Mengenoptionen gibt. Es kann also insgesamt 256^3 = 16.777.216 verschiedene RGB-Farben geben. Wenn man diese drei Farben mischt, erhält man einen RGB-Farbcode, der zum Beispiel wie folgt dargestellt wird: RGB(125,50,210).

Eine der typischsten Arten, Farben zu vermitteln, sind visuelle Systeme wie Diagramme oder grafische Modelle, bei denen jede Farbe ihren eigenen individuellen Koordinatensatz hat. Das RGB-Farbsystem kann zum Beispiel als Würfel mit 256 diskreten Punkten auf jeder Seite dargestellt werden:

In der Vergangenheit wurde das RGB-Modell als primäres Modell für die Webentwicklung gewählt, da es in direktem Zusammenhang mit der Funktionsweise von Bildschirmen steht, die rote, grüne und blaue Pixel zur Darstellung von Farben verwenden.

HEX-Farben

HEX-Codes sind die am häufigsten verwendeten Farbcodes. HEX-Codes sind drei Byte große Hexadezimalzahlen (sechs Variablen). Die sechsstellige Farbnummer ist in drei Gruppen von zwei Ziffern unterteilt, die den Anteil von Rot, Grün und Blau in der additiven Farbe angeben. Jedes zweistellige Hexadezimalpaar kann einen Wert von 00 bis FF haben. Dies ergibt über 16 Millionen mögliche Farben.

Der Code wird wie folgt ausgedrückt: #RRGGBB, wobei jeder der zweistelligen Werte einen Bereich für jede der drei Farben (Red, Green, Blue) darstellt, mit dem Sie den endgültigen Wert für jede Farbe auswählen. So wird z. B. #00FF00 als Grün angezeigt, weil die grüne Komponente auf ihren Maximalwert (FF) und die anderen auf 00 eingestellt sind.

RGBA-Farben

**RGBA-Farbwerte (Red, Green, Blue, Alpha) sind eine Erweiterung der RGB-Farbwerte um einen Alphakanal, der die Deckkraft der Farbe bestimmt. Ein Alpha-Parameter ist eine Zahl zwischen 0,0, was “völlig transparent” bedeutet, und 1,0, was “völlig undurchsichtig” bedeutet. So wird z. B. rgba(255, 0, 0) als reines Rot dargestellt, rgba(255, 0, 0, 0,5) wird als Rot mit 50 % Deckkraft dargestellt.

Die Abbildung zeigt RGBA-Werte des Farbnamens “Gelb-Grün” mit unterschiedlicher Transparenz:

Für einen RGBA-Wert gibt es im Gegensatz zu RGB-Werten keine hexadezimale Notation.

HSL-Farben

Viele Menschen halten den RGB-Farbcode für unintuitiv und hardwareorientiert. Das HSL(Hue, Saturation, Lightness)-Farbmodell wurde in den 1970er Jahren von Computergrafik-Forschern entwickelt, um der menschlichen Wahrnehmung von farbgebenden Attributen näher zu kommen. Im HSL-Modell sind die Farben jedes Farbtons in einer radialen Scheibe um eine zentrale Achse neutraler Farben angeordnet, die von Schwarz am unteren Ende bis Weiß am oberen Ende reicht. Die HSL-Darstellung ordnet die Farben neu an, um sie intuitiver zu machen als die RGB-Darstellung. Sie wird häufig für Computergrafikanwendungen wie Farbwähler und Bildanalyse verwendet.

Die Abbildung zeigt eine grafische 3D-Interpretation des HSL-Modells (a); das Bild stammt aus commons.wikimedia.org/wiki/. Abbildung (b) zeigt eine grafische 2D-Interpretation des HSL-Modells für einen Helligkeitswert von 50 %.

HSL ist eine Darstellung des RGB-Farbmodells in zylindrischen Koordinaten. Der Farbton definiert die Grundfarbe. Der Farbton ist im Grunde jede Farbe auf dem Farbkreis; er ist ein Grad auf dem Farbkreis von 0 bis 360. 0 ist also rot, 120 ist grün, 240 ist blau. Die Sättigung ist die Intensität oder Reinheit einer Farbe. Sie bestimmt, wie lebendig die Farbe sein wird. Null Prozent ist grau, und 100 Prozent ist eine voll gesättigte Farbe. Helligkeit ist der Anteil der Helligkeit oder des Lichts in einer Farbe. Die Helligkeit bestimmt, wie viel Schwarz- oder Weißanteil die Farbe hat. Zum Beispiel haben 50 Prozent keinen Farbstich, null Prozent ist komplett schwarz und 100 Prozent ist komplett weiß.

HSL-Farbbeispiele

Die folgende Tabelle stellt einen Farbton dar. Rot wurde aus dem Kreis der Farben ausgewählt. Farbton=0. Die X-Achse der Tabelle stellt die Sättigung dar (100%, 75%, 50%, 25%, 0%). Die Y-Achse stellt die Helligkeit dar. 50% ist “normal”.

HSLA-Farben

HSLA(Hue, Saturation, Lightness, Alpha) Farbwerte sind eine Erweiterung der HSL-Farbwerte um einen Alpha-Kanal, der die Deckkraft der Farbe bestimmt. Der HSLA-Farbwert wird mit Hue, Saturation, Lightness und Alpha angegeben, wobei der Alpha-Parameter die Deckkraft angibt. Der Alpha-Parameter ist eine Zahl zwischen 0,0, was “völlig transparent” bedeutet, und 1,0, was “völlig undurchsichtig” bedeutet. Zum Beispiel wird hsla(0, 100%, 50%, 1) als reines Rot dargestellt, hsla(0, 100%, 50%, 0.5) als Rot mit 50% Deckkraft:

Warum unterstützt HTML keine anderen Farbformate?

HTML und CSS sind für die Darstellung von Webinhalten auf Bildschirmen konzipiert. Bildschirme verwenden das RGB-Farbmodell (Red, Green, Blue), das der Farbwiedergabe von Monitoren entspricht. RGB und seine Derivate (RGBA, HEX, HSL, HSLA) sind für die bildschirmbasierte Farbdarstellung intuitiv.

HTML und CSS unterstützen andere Farbformate wie CMYK, HSV, HWB, Lab, Oklab, LCH, Oklch und XYZ aus mehreren Gründen nicht. Sehen wir uns einige von ihnen an:

1. Das CMYK-Farbmodell wird hauptsächlich für den Druck verwendet und zeigt, wie sich Druckfarben auf Papier mischen. Es ist nicht für digitale Bildschirme geeignet, die Licht zur Darstellung von Farben verwenden.
2. Die Farbformate HSV, HWB, Lab, Oklab, LCH, Oklch und XYZ sind in den Bereichen Grafikdesign, Bildverarbeitung und Farbwissenschaft gebräuchlicher. Sie werden für Aufgaben verwendet, die eine präzise Farbmanipulation erfordern, sind aber für die Webentwicklung weniger relevant.
3. Die Unterstützung mehrerer Farbmodelle erfordert, dass die Browser für die Anzeige zwischen diesen Modellen und RGB konvertieren, was zu zusätzlichem Overhead und potenziellen Leistungsproblemen führt.
4. Die Beibehaltung einfacher Farbmodelle und ihre Beschränkung auf wenige verständliche Optionen (RGB, HEX, HSL) verringert die Komplexität für Entwickler. Dadurch wird sichergestellt, dass die meisten Anwendungsfälle ohne die Notwendigkeit, verschiedene Farbmodelle zu verstehen oder zwischen ihnen zu konvertieren, behandelt werden können.

Obwohl herkömmliches CSS keine erweiterten Farbmodelle unterstützt, werden mit CSS Color Module Level 4 und höher komplexe Farbräume wie lab(), lch() und oklab() eingeführt. Diese Neuerungen werden noch nicht von allen Browsern unterstützt, deuten aber darauf hin, dass mit dem wachsenden Bedarf an präziserer Farbsteuerung die Unterstützung für weitere Farbräume zunimmt.

Schlussfolgerung

HTML-Farben können durch einen Namen, RGB-, RGBA-, HEX-, HSL- oder HSLA-Werte definiert und auf den Hintergrund oder Text in HTML-Dokumenten angewendet werden.

Die nachstehende Abbildung zeigt, wie eine blaugrüne Farbe durch einen Namen, RGB-, RGBA-, HEX-, HSL- und HSLA-Werte definiert werden kann:

HTML und CSS sind für die Darstellung von Webinhalten auf Bildschirmen konzipiert. Bildschirme verwenden das RGB-Farbmodell (Red, Green, Blue), das direkt der Farbdarstellung auf Monitoren entspricht. RGB und seine Derivate (RGBA, HEX, HSL, HSLA) sind für die bildschirmbasierte Farbdarstellung intuitiv. Die sich weiterentwickelnden CSS-Spezifikationen könnten jedoch in Zukunft schrittweise zur Unterstützung weiterer Farbräume und komplexerer Farbverarbeitung führen.

Siehe auch

• Entdecken Sie die Welt der HTML-Farbnamen! Erfahren Sie mehr über die Verwendung von HTML-Farbnamen im Webdesign und wann Sie eine Alternative wählen sollten.
• Der Artikel Wie ändert man die Textfarbe in HTML? zeigt, wie man die Aspose.HTML for .NET-Bibliothek verwendet, um die Textfarbe in einem HTML-Dokument zu steuern.
• Im Artikel Hintergrundfarbe in HTML ändern? finden Sie C#-Beispiele, die zeigen, wie Sie die Hintergrundfarbe sowohl für das gesamte HTML-Dokument als auch für einzelne Elemente festlegen oder ändern können.
• Der Artikel Wie ändert man die Rahmenfarbe in HTML? beschreibt verschiedene Möglichkeiten, die Rahmenfarbe in HTML-Dateien unter Verwendung der Aspose.HTML for .NET for .NET-Bibliothek zu setzen oder zu ändern.

Aspose.HTML bietet einen kostenlosen Online- Farbrad-Auswahl, mit dem Sie eine Reihe von Farben im HEX-Farbcode erstellen können. Sie können diese kostenlose Online-Anwendung nutzen, um Farbharmonien zu finden, indem Sie die Regeln der Farbkombinationen anwenden, aber es ist auch wichtig, mit Farben zu experimentieren. Color Wheel Picker bietet eine hervorragende Möglichkeit, mit Farben zu experimentieren und selbständig spannende Farbkombinationen zu erstellen. Die Anwendung läuft auf Computern, Tablets und mobilen Geräten. Erstellen Sie also Ihre einzigartige Palette für jedes Projekt!