Farbangaben in CSS
Uncategorized

Farbangaben in CSS – Farben definieren und richtig einsetzen

Samuel Becker
Von
Samuel Becker

Farben ließen sich in CSS schon früh auf unterschiedliche Arten festlegen. Neben Hexadezimalwerten, rgb() oder hsl() gehörten dazu auch benannte Farben, also Farbschlüsselwörter wie red, blue oder lightseagreen. Laut MDN kann ein <named-color> überall dort verwendet werden, wo CSS einen <color>–Wert erlaubt. Die aktuelle CSS-Farbspezifikation beschreibt außerdem, dass Farben heute nicht nur im klassischen sRGB-Bereich, sondern auch in weiteren Farbräumen angegeben werden können.

Inhaltsverzeichnis

Gerade für Einsteiger sind Farbschlüsselwörter oft der einfachste Zugang. Statt sich numerische Werte zu merken, kann man direkt mit Begriffen arbeiten, die leicht verständlich sind. Gleichzeitig ist es hilfreich, die verschiedenen Schreibweisen zu kennen, weil nicht jede Methode für jeden Einsatzzweck gleich gut geeignet ist.

Warum Farben in CSS so wichtig sind

Farben beeinflussen in Webprojekten weit mehr als nur die Optik. Sie strukturieren Inhalte, erzeugen Kontraste, lenken Aufmerksamkeit und prägen den Charakter eines Layouts. Die CSS-Color-Spezifikation definiert den <color>–Wert als grundlegenden Baustein für Textfarben, Hintergründe, Rahmen und viele weitere Darstellungen im Web.

In der Praxis bedeutete das: Eine Farbe konnte etwa für Fließtext mit color, für Flächen mit background-color, für Linien mit border-color oder in Verläufen und Schatten verwendet werden. Wer Farben in CSS sauber definierte, sorgte also nicht nur für ein ansprechendes Design, sondern auch für bessere Lesbarkeit und eine klarere Benutzerführung.

Lesen:  Mozilla SeaMonkey 2.0 ist fertig

Welche Möglichkeiten es zur Farbdefinition gibt

CSS unterstützte mehrere Wege, Farben zu definieren. Zu den gebräuchlichsten gehörten:

  • Farbschlüsselwörter wie red, navy oder gold

  • Hexadezimale Schreibweisen wie #ff0000 oder #f00

  • RGB-Werte wie rgb(255 0 0)

  • HSL-Werte wie hsl(0 100% 50%)

MDN und die aktuelle CSS-Spezifikation führen diese Formen als zentrale Varianten für <color>–Werte auf. Die Spezifikation zeigt außerdem, dass sich dieselbe Farbe auf mehreren Wegen gleichwertig ausdrücken lässt, etwa lime, rgb(0 255 0) oder color(srgb 0 1 0).

Für viele Projekte waren Farbschlüsselwörter besonders nützlich, wenn schnelle Prototypen, einfache Stylesheets oder gut lesbare Demo-Beispiele benötigt wurden.

Farbschlüsselwörter: Einfach, lesbar und direkt verständlich

Benannte Farben gehören zu den bekanntesten CSS-Farbformaten. MDN beschreibt <named-color> als Namen einer Farbe, zum Beispiel red, blue, black oder lightseagreen. Diese Schreibweise ist deshalb beliebt, weil sie sofort verständlich wirkt und ohne Umrechnung lesbar bleibt.

Ein einfaches Beispiel:

h1 {
color: darkblue;
}.button {
background-color: orange;
}

Der Vorteil liegt auf der Hand: Schon beim Lesen des Codes ist grob erkennbar, welche Farbe gemeint ist. Bei exakten Corporate-Design-Vorgaben reichen Farbnamen allerdings oft nicht aus, weil dort meist ganz bestimmte Nuancen vorgeschrieben sind. In solchen Fällen werden häufiger Hex-, RGB- oder HSL-Werte verwendet.

Die Grundfarben und die erweiterten CSS-Farbnamen

Die CSS-Spezifikation nennt 16 klassische Grundfarben aus der alten VGA-/HTML-Tradition: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white und yellow. Später kamen standardisierte erweiterte Farbnamen aus dem X11-/SVG-Umfeld hinzu; in CSS Color Level 4 wurde außerdem rebeccapurple ergänzt.

Lesen:  Gütesiegel für Onlineshops: Orientierung, Vertrauen und ihre Grenzen

Einige Farbnamen sind Synonyme. MDN nennt zum Beispiel cyan als Synonym von aqua, magenta als Synonym von fuchsia sowie grey als Schreibvariante von gray.

Besondere Schlüsselwörter: transparent und currentColor

Neben den eigentlichen Farbnamen gibt es noch besondere Schlüsselwörter. MDN führt transparent und currentColor im Zusammenhang mit benannten Farben ausdrücklich mit auf. transparent steht für eine vollständig transparente Farbe und wird technisch als Abkürzung für rgb(0 0 0 / 0%) beschrieben. currentColor verweist dagegen auf die aktuell gesetzte Vordergrundfarbe eines Elements.

Das ist in der Praxis sehr nützlich:

.card {
color: darkslategray;
border: 2px solid currentColor;
}

Hier übernimmt der Rahmen automatisch dieselbe Farbe wie der Text.

Wann Farbschlüsselwörter sinnvoll sind

Farbschlüsselwörter eigneten sich besonders gut für:

  • schnelle Entwürfe und Lernbeispiele

  • gut lesbaren CSS-Code

  • kleine Websites ohne strenge Farbdefinitionen

  • einfache Hervorhebungen im Interface

Weniger geeignet waren sie, wenn exakte Markenfarben, Transparenzstufen oder fein abgestimmte Farbverläufe nötig waren. Dann boten numerische Formate deutlich mehr Kontrolle.

CSS und Farbangaben

Alle CSS-Farbschlüsselwörter

Nachfolgend die standardisierten CSS-Farbnamen beziehungsweise Farbschlüsselwörter laut MDN, ergänzt um die besonderen Schlüsselwörter transparent und currentColor:

aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, grey, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, rebeccapurple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, thistle, tomato, transparent, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen, currentColor.

Fazit

Farben ließen sich in CSS auf viele Arten definieren, doch Farbschlüsselwörter blieben bis heute eine der zugänglichsten Varianten. Sie waren leicht lesbar, schnell einsetzbar und für viele Standardsituationen völlig ausreichend.

Lesen:  Mozilla SeaMonkey 2.0 ist fertig

Gleichzeitig zeigte die CSS-Entwicklung, dass moderne Webgestaltung heute deutlich weitergeht und neben benannten Farben auch präzisere und flexiblere Farbmodelle umfasst. Wer CSS sauber schreiben wollte, sollte daher beides kennen: die einfachen Farbnamen für schnelle und verständliche Lösungen sowie die exakteren numerischen Formate für professionelle Detailarbeit.

Samuel Becker
Letzte Artikel von Samuel Becker (Alle anzeigen)

Weitere Interessante Artikel