Wenn es darum geht, deine Seite individuell zu gestalten, wird die Schriftfarbe oft übersehen. In den meisten Fällen belassen Webseiten-Besitzer/innen die Standard-Schriftfarbe wie Schwarz oder das, was ihr Theme für die Textfarbe des Textkörpers und der Überschriften festgelegt hat.
Es ist jedoch aus mehreren Gründen sinnvoll, die HTML-Schriftfarbe auf deiner Webseite zu ändern. Das Ändern der HTML-Schriftfarbe mag abschreckend wirken, ist aber ganz einfach. Es gibt mehrere Möglichkeiten, die Schriftfarbe auf deiner Webseite zu ändern.
In diesem Beitrag zeigen wir dir verschiedene Möglichkeiten, wie du die Farbe der Schrift auf deiner Webseite ändern kannst, und erklären, warum du das überhaupt tun solltest.
Schau dir unsere Videoanleitung zum Ändern der HTML-Schriftfarbe an
Warum sollte man die Farbe der HTML Fonts ändern?
Du solltest die Schriftfarbe ändern, weil du damit die Lesbarkeit und Zugänglichkeit deiner Webseite verbessern kannst. Wenn deine Webseite zum Beispiel ein dunkleres Farbschema verwendet, wäre es schwierig, den Text auf deiner Webseite zu lesen, wenn du die Schriftfarbe schwarz lässt.
Ein weiterer Grund, warum du die Schriftfarbe ändern solltest, ist, wenn du eine dunklere Farbe aus deiner Markenfarbpalette verwendest. Dies ist eine weitere Möglichkeit, deine Marke zu stärken. Sie sorgt für Markenkonsistenz und stellt sicher, dass der Text auf allen deinen Marketingkanälen gleich aussieht.
Nachdem das geklärt ist, schauen wir uns an, wie du die HTML-Schriftfarbe definieren und ändern kannst.
Wege zur Definition der Farbe
Es gibt verschiedene Möglichkeiten, Farben im Webdesign zu definieren, darunter Namen, RGB-Werte, Hex-Codes und HSL-Werte. Schauen wir uns an, wie sie funktionieren.
Farbname
Farbnamen sind der einfachste Weg, um eine Farbe in deinen CSS-Styles zu definieren. Der Farbname bezieht sich auf den spezifischen Namen für die HTML-Farbe. Derzeit werden 140 Farbnamen unterstützt, und du kannst jede dieser Farben in deinen Styles verwenden. Du kannst zum Beispiel „blue“ verwenden, um die Farbe für ein einzelnes Element auf blau zu setzen.
Der Nachteil dieses Ansatzes ist jedoch, dass nicht alle Farbnamen unterstützt werden. Das heißt, wenn du eine Farbe verwendest, die nicht auf der Liste der unterstützten Farben steht, kannst du sie nicht über ihren Farbnamen in deinem Entwurf verwenden.
RGB- und RGBA-Werte
Als Nächstes kommen wir zu den RGB- und RGBA-Werten. RGB steht für Rot, Grün und Blau. Er definiert die Farbe durch das Mischen der Rot-, Grün- und Blauwerte, ähnlich wie du eine Farbe auf einer echten Palette mischen würdest.
Der RGB-Wert sieht wie folgt aus: RGB(153,0,255). Die erste Zahl steht für die rote Farbe, die zweite für die grüne Farbe und die dritte für Blau.
Der Wert jeder Farbeingabe kann zwischen 0 und 255 liegen, wobei 0 bedeutet, dass die Farbe überhaupt nicht vorhanden ist und 255, dass die jeweilige Farbe ihre maximale Intensität erreicht hat.
Der RGBA-Wert fügt der Mischung einen weiteren Wert hinzu, nämlich den Alphawert, der die Deckkraft darstellt. Er reicht von 0 (nicht transparent) bis 1 (vollständig transparent).
HEX Wert
Die Hex-Farbcodes funktionieren ähnlich wie die RGB-Codes. Sie bestehen aus Zahlen von 0 bis 9 und Buchstaben von A bis F. Der Hex-Code sieht so aus: #800080. Die ersten beiden Buchstaben geben die Intensität der roten Farbe an, die mittleren beiden Zahlen die Intensität der grünen Farbe und die letzten beiden die Intensität der blauen Farbe.
HSL- und HSLA-Werte
Eine weitere Möglichkeit, Farben in HTML zu definieren, ist die Verwendung von HSL-Werten. HSL steht für Farbton, Sättigung und Helligkeit.
Der Farbton verwendet Gradzahlen von 0 bis 360. Auf einem Standard-Farbkreis liegt Rot bei 0/360, Grün bei 120 und Blau bei 240.
Bei der Sättigung wird in Prozent angegeben, wie gesättigt die Farbe ist. 0 steht für Schwarz und Weiß und 100 für die volle Farbe.
Bei der Helligkeit werden ähnliche Prozentwerte wie bei der Sättigung verwendet. In diesem Fall steht 0% für Schwarz und 100% für Weiß.
Die lila Farbe, die wir in diesem Artikel verwendet haben, würde in HSL zum Beispiel so aussehen: hsl(276, 100%, 50%).
HSL unterstützt wie RGB auch die Deckkraft. In diesem Fall würdest du den HSL-Wert verwenden, wobei A für Alpha steht und mit einer Zahl von 0 bis 1 definiert wird. Wenn wir die Deckkraft des Beispiels Lila verringern wollten, würden wir folgenden Code verwenden: hsl(276, 100%, 50%, .85).
Da du nun weißt, wie du Farben definieren kannst, schauen wir uns nun verschiedene Möglichkeiten an, wie du die Farbe der HTML-Schrift ändern kannst.
Die alten: <font> Tags
Bevor HTML5 eingeführt und als Programmierstandard festgelegt wurde, konntest du die Schriftfarbe mithilfe von Font-Tags ändern. Genauer gesagt, hast du den font-Tag mit dem color-Attribut verwendet, um die Textfarbe festzulegen. Die Farbe wurde entweder mit ihrem Namen oder mit ihrem Hex-Code angegeben.
Hier ist ein Beispiel dafür, wie dieser Code mit Hex-Farbcode aussieht:
<font color="#800080">This text is purple.</font>Und so kannst du die Textfarbe mithilfe des Farbnamens auf Lila setzen.
<font color="purple">This text is purple.</font> Der <font>-Tag ist jedoch in HTML5 veraltet und wird nicht mehr verwendet. Die Änderung der Schriftfarbe ist eine Design-Entscheidung, und Design ist nicht der Hauptzweck von HTML. Daher ist es sinnvoll, dass die <font>-Tags in HTML5 nicht mehr unterstützt werden.
Wenn der <font>-Tag also nicht mehr unterstützt wird, wie ändert man dann die HTML-Schriftfarbe? Die Antwort lautet: mit Cascading Style Sheets oder CSS.
Das Neue: CSS-Stile
Um die Farbe der HTML-Schrift mit CSS zu ändern, verwendest du die CSS Property color in Kombination mit dem entsprechenden Selektor. Mit CSS kannst du Farbnamen, RGB-, Hex- und HSL-Werte verwenden, um die Farbe zu bestimmen. Es gibt drei Möglichkeiten, die Schriftfarbe mit CSS zu ändern.
Inline CSS
Inline-CSS wird direkt in deine HTML-Datei eingefügt. Du verwendest ein HTML-Tag wie <p> und gestaltest es dann mit der CSS Property color wie folgt:
<p style="color: purple">This is a purple paragraph.</p>Wenn du einen Hex-Wert verwenden willst, sieht dein Code wie folgt aus:
<p style="color:#800080">This is a purple paragraph.</p>Wenn du den RGB-Wert verwenden willst, schreibst du ihn wie folgt:
<p style="color:RGB(153,0,255)">This is a purple paragraph.</p>Wenn du die HSL-Werte verwendest, würdest du folgenden Code benutzen:
<p style="color:hsl(276, 100%, 50%)">This is a purple paragraph.</p>Die Beispiele oben zeigen dir, wie du die Farbe eines Absatzes auf deiner Webseite ändern kannst. Aber du bist nicht nur auf Absätze beschränkt. Du kannst auch die Schriftfarbe von Überschriften und Links ändern.
Wenn du zum Beispiel das <p>-Tag oben durch das <h2>-Tag ersetzt, ändert sich die Farbe des Überschriftstextes, und wenn du es durch das <a>-Tag ersetzt, ändert sich die Farbe des Links. Du kannst auch das <span>-Element verwenden, um eine beliebige Menge an Text einzufärben.
Wenn du die Hintergrundfarbe des gesamten Absatzes oder einer Überschrift ändern willst, ist das ganz ähnlich wie bei der Schriftfarbe. Du musst stattdessen das Attribut background-color verwenden und entweder den Farbnamen, Hexadezimal-, RGB- oder HSL-Werte verwenden, um die Farbe festzulegen. Hier ist ein Beispiel:
<p style="background-color: purple">Eingebettetes CSS
Eingebettetes CSS befindet sich innerhalb der <style>-Tags und wird zwischen den Head-Tags deines HTML-Dokuments eingefügt.
Der Code sieht wie folgt aus, wenn du den Farbnamen verwenden willst:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: purple;
}
</style>
</head>Der oben programmierte Code ändert die Farbe jedes Absatzes auf der Seite in Lila. Ähnlich wie bei der Inline-CSS-Methode kannst du verschiedene Selektoren verwenden, um die Schriftfarbe deiner Überschriften und Links zu ändern.
Wenn du den Hex-Code verwenden möchtest, sieht der Code folgendermaßen aus:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: #800080;
}
</style>
</head>Das folgende Beispiel verwendet die RBGA-Werte, damit du ein Beispiel für die Einstellung der Deckkraft sehen kannst:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: RGB(153,0,255,0.75),
}
</style>
</head>Der HSL-Code würde dann so aussehen:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>Externes CSS
Schließlich kannst du auch externes CSS verwenden, um die Schriftfarbe auf deiner Webseite zu ändern. Externes CSS ist CSS, das in einer separaten Stylesheet-Datei gespeichert ist, die normalerweise style.css oder stylesheet.css heißt.
Dieses Stylesheet ist für alle Stile auf deiner Seite verantwortlich und legt die Schriftfarben und -größen, Ränder, Abstände, Schriftfamilien, Hintergrundfarben und vieles mehr fest. Kurz gesagt, das Stylesheet ist dafür verantwortlich, wie deine Seite optisch aussieht.
Um die Schriftfarbe mit externem CSS zu ändern, verwendest du Selektoren, um die gewünschten Teile des HTML-Satzes zu gestalten. Mit diesem Code kannst du zum Beispiel den gesamten Text auf deiner Seite ändern:
body {color: purple;}Denke daran, dass du RGB-, Hex- und HSL-Werte und nicht nur die Farbnamen verwenden kannst, um die Schriftfarbe zu ändern. Wenn du das Stylesheet bearbeiten willst, solltest du dies in einem Code Editor tun.
Inline, eingebettet oder extern?
Jetzt weißt du also, wie du mit CSS die Schriftfarbe ändern kannst. Aber welche Methode solltest du verwenden?
Wenn du den Inline-CSS-Code verwendest, fügst du ihn direkt in deine HTML-Datei ein. Im Allgemeinen ist diese Methode für schnelle Korrekturen geeignet. Wenn du die Farbe eines bestimmten Absatzes oder einer Überschrift auf einer einzelnen Seite ändern willst, ist diese Methode die schnellste und am wenigsten komplizierte Methode, um dies zu tun.
Allerdings können Inline-Stile die Größe deiner HTML-Datei erhöhen. Je größer deine HTML-Datei ist, desto länger dauert es, bis deine Webseite geladen ist. Darüber hinaus kann Inline-CSS dein HTML unübersichtlich machen. Deshalb wird von der Inline-Methode, bei der CSS zur Änderung der HTML-Schriftfarbe verwendet wird, generell abgeraten.
Eingebettetes CSS wird zwischen den <head>-Tags und innerhalb der <style>-Tags platziert. Wie Inline-CSS eignet es sich für schnelle Korrekturen und zum Überschreiben von Stilen, die in einem externen Stylesheet angegeben sind.
Ein bemerkenswerter Unterschied zwischen Inline- und eingebetteten Stilen ist, dass die eingebetteten Stile für jede Seite gelten, auf der die Head-Tags geladen werden, während die Inline-Stile nur für die spezifische Seite gelten, auf der sie sich befinden, typischerweise für das Element, auf das sie auf dieser Seite abzielen.
Die letzte Methode, externes CSS, verwendet ein eigenes Stylesheet, um deine visuellen Stile zu definieren. Im Allgemeinen ist es am besten, ein externes Stylesheet zu verwenden, um alle Stile an einem einzigen Ort zu speichern, von dem aus sie leicht zu bearbeiten sind. Außerdem werden so Präsentation und Design voneinander getrennt, sodass der Code leicht zu verwalten und zu pflegen ist.
Denk daran, dass Inline- und eingebettete Stile die Stile des externen Stylesheets außer Kraft setzen können.
Font-Tags oder CSS-Stile: Pro und Kontra
Die beiden wichtigsten Methoden, um die HTML-Schriftfarben zu ändern, sind die Verwendung des Font-Tags oder der CSS-Stile. Beide Methoden haben ihre Vor- und Nachteile.
HTML Font Tags Vor- und Nachteile
Das HTML-Schrift-Tag ist einfach zu benutzen, das ist ein Pluspunkt für ihn. CSS ist in der Regel komplizierter und länger zu erlernen als die Eingabe von <font color="purple">. Wenn du eine ältere Webseite hast, die nicht mit HTML5 arbeitet, ist das font-Tag eine praktikable Methode, um die Schriftfarbe zu ändern.
Auch wenn das Font-Tag einfach zu verwenden ist, solltest du es nicht benutzen, wenn deine Webseite HTML verwendet. Wie bereits erwähnt, wurde das font-Tag in HTML5 veraltet. Die Verwendung von veraltetem Code sollte vermieden werden, da die Browser ihn jederzeit nicht mehr unterstützen können. Das kann dazu führen, dass deine Webseite nicht mehr richtig funktioniert oder, schlimmer noch, von deinen Besuchern gar nicht mehr angezeigt wird.
Vor- und Nachteile von CSS
CSS hat, genau wie der Font-Tag, seine Vor- und Nachteile. Der größte Vorteil von CSS ist, dass es die richtige Methode ist, um die Schriftfarbe zu ändern und alle anderen Stile für deine Webseite festzulegen.
Wie bereits erwähnt, trennt es die Darstellung vom Design, was die Verwaltung und Pflege deines Codes erleichtert.
Die Kehrseite der Medaille ist, dass CSS und HTML5 im Vergleich zur alten Art, Code zu schreiben, Zeit brauchen, um richtig zu lernen und zu schreiben.
Bedenke, dass du mit CSS verschiedene Möglichkeiten hast, die Schriftfarbe zu ändern, und jede dieser Methoden hat, wie bereits erwähnt, ihre eigenen Vor- und Nachteile.
Tipps zum Ändern der HTML Font-Farbe
Da du nun weißt, wie du die Farbe der HTML-Schrift ändern kannst, findest du hier ein paar Tipps, die dir helfen werden.
Verwende einen Farbwähler
Anstatt Farben wahllos auszuwählen, solltest du Farbwähler verwenden, um die richtigen Farben auszuwählen. Der Vorteil eines Farbwählers ist, dass er dir den Farbnamen und die richtigen Hex-, RGB- und HSL-Werte liefert, die du in deinem Code verwenden musst.
Überprüfe den Kontrast
Dunkler Text mit dunklem Hintergrund und heller Text mit hellem Hintergrund passen nicht gut zusammen. Sie machen den Text auf deiner Seite schwer lesbar. Du kannst jedoch mit einem Kontrastprüfprogramm sicherstellen, dass die Farben deiner Seite zugänglich und der Text gut lesbar ist.
Finde die Farbe mit der Inspektionsmethode
Wenn du auf einer Webseite eine Farbe siehst, die dir gefällt, kannst du den Code überprüfen, um den Hex-, RGB- oder HSL-Wert der Farbe zu erhalten. In Chrome musst du nur mit dem Cursor auf den Teil der Webseite zeigen, den du untersuchen möchtest, und dann mit der rechten Maustaste auf „Untersuchen“ klicken. Dadurch öffnet sich das Code-Inspektionsfenster, in dem du den HTML-Code einer Webseite und die entsprechenden Stile sehen kannst.
Zusammenfassung
Die Änderung der HTML-Schriftfarbe kann dazu beitragen, die Lesbarkeit und Zugänglichkeit deiner Webseite zu verbessern. Außerdem kannst du so den Stil deiner Webseite einheitlich gestalten.
In diesem Leitfaden hast du vier verschiedene Möglichkeiten kennengelernt, wie du die HTML-Schriftfarbe ändern kannst: mit Farbnamen, Hex-Codes, RGB- und HSL-Werten.
Außerdem haben wir uns damit beschäftigt, wie du die Schriftfarbe mit Inline-, eingebettetem und externem CSS ändern kannst und wie du das Font-Tag verwendest sowie die Vor- und Nachteile der einzelnen Methoden. Inzwischen solltest du wissen, welche Methode du zum Ändern der HTML-Schriftfarbe verwenden solltest. Jetzt musst du diese Tipps nur noch auf deiner Seite umsetzen.
Was denkst du über das Ändern der Schriftfarbe mit CSS und dem Font-Tag? Lass es uns in den Kommentaren wissen!
Salman Ravoof ist ein autodidaktischer Webentwickler, Autor, Kreativer und ein großer Bewunderer von Free and Open Source Software (FOSS). Neben Technik begeistert er sich für Wissenschaft, Philosophie, Fotografie, Kunst, Katzen und Essen. Erfahre mehr über ihn auf seiner Website und trete mit Salman auf X in Kontakt.
Schreibe einen Kommentar