CSS: Wieso ist DarkGray heller als Gray?
Info von Stefan Trost | 13.06.2024 um 02:39
Der CSS-Standard definiert die Farbe "Gray" (grau) dunkler als "DarkGray" (dunkelgrau), während "LightGray" (hellgrau) wie erwartbar heller als diese beiden anderen Farbtöne ausfällt. Wie kann das sein? Diese Frage möchte ich in dieser Info beantworten.
Kurz gesagt: Diese Besonderheit im CSS-Standard hat wie so oft in solchen Fällen historische Gründe um Kompatibilitäten zu wahren.
Die Farben
Konkret geht es um die folgenden Farben aus den Standards HTML 3.2 sowie X11, die die Basis der CSS3-Farben bilden:
RGB/HEX | % | HTML 3.2 | X11 | CSS 3 | Name | |
#000000 | 0 | Black | Black | Black | Schwarz | |
#808080 | 50 | Gray | - | Gray | Grau | |
#A9A9A9 | 66 | - | DarkGray | DarkGray | Dunkelgrau | |
#BEBEBE | 75 | - | Gray | - | Grau | |
#D3D3D3 | 83 | - | LightGray | LightGray | Hellgrau | |
#FFFFFF | 100 | White | White | White | Weiß |
HTML 3.2 und CSS 1
Zunächst enthielt der HTML-Standard lediglich 16 verschiedene Farbnamen. Es handelte sich dabei um die mit HTML 3.2 und CSS 1 eingeführten "VGA Farben", die im wesentlichen den Grundfarben mit wenigen rudimentären Abstufungen entsprachen.
Dieser Standard enthielt an Grauwerten neben "Black" (schwarz) und "White" (weiß) lediglich das mit dem RGB-Wert #808080 definierte "Gray" (grau) und das mit #C0C0C0 definierte "Silver" (silber), jedoch keine Farbnamen für hellgrau oder dunkelgrau.
Entwicklung von CSS 3
Dies änderte sich mit CSS 3. Das World Wide Web Consortium W3C wollte mehr Farbnamen unterstützen und eine solche Liste gab es zu diesem Zeitpunkt bereits: Die im Juni 1986 releasten und bis 1989 durch weitere Farben bis fast auf den heutigen Stand ergänzten X11 Color Names. Diese Farbliste wurde für das X Window System (Unix-Software zur Erzeugung von grafischen Benutzeroberflächen) zusammengestellt und enthielt über 100 verschiedene Farbnamen. Gleichzeitig wurden diese Farbnamen auch schon von den ersten Browsern wie Mosaic oder dem Netscape Navigator unterstützt, da beide dieser Programme anfänglich als X-Anwendungen entwickelt wurden. Zusätzlich war die Liste Open Source. Also eigentlich die idealen Voraussetzungen für eine Übernahme in den CSS-Standard.
Leider gab es jedoch ein kleines Problem: Die X Colors konnten nicht einfach so eins zu eins übernommen werden, da einige der Farben anders definiert waren als im alten bereits unterstützten CSS1-Standard. Und der neue CSS-Standard musste natürlich kompatibel zum alten bleiben.
X11 definierte DarkGray als #A9A9A9 (66 %), Gray als #BEBEBE (75 %) sowie LightGray als #D3D3D3 (83 %) während der bisherige Standard weder DarkGray noch LightGray kannte, jedoch Gray auf #808080 (50 %) definierte, also dunkler als das DarkGray von X11. X11 war also in sich stimmig und definierte "dunkelgrau" dunkler als "grau" und "hellgrau" heller als "grau", dies war aber nicht zu dem bereits definierten Wert von "grau" stimmig.
Schwarz (Black) und Weiß (White) machten dagegen keine Probleme, da beide Farben in beiden Standards bereits enthalten und auf die gleiche Weise mit #000000 beziehungsweise #FFFFFF definiert waren.
Der Kompromiss
Da man möglichst viele Farben von X11 übernehmen wollte (auch weil einige Browser bereits mit diesen Farben arbeiteten), gleichzeitig aber auch dem bisherigen Standard nicht widersprechen wollte, entschied man sich für den Kompromiss DarkGray und LightGray aus X11 mit genau der X11-Definition zu übernehmen, gleichzeitig aber auch die alte Definition von Gray beizubehalten.
Als Resultat dieses Kompromisses müssen wir heute damit leben, dass wider Erwarten "grau" im CSS-Standard dunkler als "dunkelgrau" ausfällt beziehungsweise "grau" in seiner Helligkeit nicht zwischen "dunkelgrau" und "hellgrau" steht, wie man es eigentlich erwarten könnte.
Andere Grauwerte
Weitere durch den CSS-Standard definierte Grauwerte sowie zusätzliche Informationen zu diesem Thema inklusive Farbtabellen findet ihr in meinem Artikel über Grauwerte.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
CSS: Tabellenzeilen abwechselnd einfärben nur mit CSS
Tutorial | 0 Kommentare
MySQL: Zeilenumbrüche in MySQL
Tipp | 0 Kommentare
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
Hintergrund einer Website verdunkeln (Gray Out Effekt)
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.