CSS-Farbnamen Online

Die W3C-Spezifikation CSS Color Level 4 definiert genau 148 benannte Farben, einschließlich des speziellen transparent (entspricht rgba(0,0,0,0)) und des Alias rebeccapurple (2014 zu Ehren von Rebecca Meyer hinzugefügt, der Tochter des CSS-Autors Eric Meyer, die im Alter von 6 Jahren starb). Die anderen 146 Namen stammen aus dem X11-Farbsystem des MIT, das vom W3C in CSS2.1 (1998) standardisiert und in CSS3 bestätigt wurde. CSS definiert auch currentColor und inherit, aber das sind Vererbungsschlüsselwörter und keine eigentlichen Farbwerte, weshalb sie nicht zu den 148 gezählt werden.

Die X11-Farben stammen aus der rgb.txt-Datei des X Window System-Servers (MIT X Consortium, 1985). Sie enthielt ursprünglich eine von Paul Raveling vom Information Sciences Institute der USC erstellte Farbliste, die auf dem Resene-Colours-System aus Neuseeland basierte. Mit jeder Version des X-Servers wurde die Liste von verschiedenen Mitwirkenden erweitert und modifiziert. Als der W3C diese Namen für CSS2.1 übernahm, wurden sie sorgfältig ausgewählt, um Mehrdeutigkeiten zu beseitigen, behielten aber skurrile Namen wie blanchedalmond, papayawhip, peachpuff, lemonchiffon und cornsilk bei, die aus Namen amerikanischer Desserts und Textilmaterialien der 1980er Jahre stammen.

Benannte CSS-Farben eignen sich ideal für: schnelles Prototyping und Demo-Code, bei dem Lesbarkeit wichtiger ist als Präzision; Lerncode, bei dem beschreibende Namen die Absicht verdeutlichen (z. B. ist background: lightgray lesbarer als background: #d3d3d3); temporäre Debugging-Werte; und Fälle, in denen die genaue Farbe je nach Browser-Implementierung variieren kann. Für den Produktionseinsatz sind HEX- oder HSL-Werte vorzuziehen: sie sind explizit und lassen sich programmgesteuert leichter ändern. Frameworks wie Tailwind CSS und moderne Design-Systeme verwenden eigene Farbpaletten, nicht die Standard-CSS-Namen.

Die WCAG (Web Content Accessibility Guidelines) 2.1 des W3C definieren Mindest-Kontrastverhältnisse für lesbaren Text. Level AA (in vielen Ländern rechtliches Minimum) erfordert ein 4,5:1-Verhältnis für normalen Text und 3:1 für großen Text (18pt+ oder 14pt+ fett). Level AAA (Exzellenz) erfordert 7:1 für normalen Text. Das Verhältnis wird zwischen der relativen Leuchtdichte von Text und Hintergrund berechnet. Viele benannte CSS-Farben erfüllen diese Anforderungen nicht: yellow (#FFFF00) auf weißem Hintergrund hat ein Verhältnis von 1,07:1 (unlesbar), während black (#000000) auf Weiß 21:1 erreicht (maximal möglich). Farben wie navy, darkgreen, maroon und midnightblue haben auf weißem Hintergrund guten Kontrast.

CSS Color Level 4 (W3C-Entwurf in Arbeit) führt erweiterte Farbfunktionen ein, die weit über die 148 benannten Farben hinausgehen. oklch() und oklab() sind perzeptuell gleichmäßige Farbräume, in denen dieselbe numerische Differenz visuell gleiche Farbänderungen erzeugt (im Gegensatz zu HSL, wo dieselbe Helligkeitsdifferenz je nach Farbton sehr unterschiedliche Effekte hat). Die color-mix()-Funktion ermöglicht das Mischen zweier Farben: color-mix(in oklch, blue 30%, red) erzeugt eine perzeptuell natürliche Mischung. color-contrast() (noch im Entwurf) wählt automatisch die Farbe mit dem höchsten Kontrast aus einer Liste. display-p3 und rec2020 ermöglichen den Zugang zum breiten Farbraum moderner HDR-Displays.

Am 7. Juni 2014 starb Rebecca Alicia Meyer, die 6-jährige Tochter von Eric A. Meyer (Mitbegründer der CSS Working Group, Autor der maßgeblichen CSS-Referenzbücher und Erfinder des CSS Reset), an einem Glioblastom (Grad-IV-Hirntumor). Am Tag ihres Todes schlug die CSS-Community vor, die Farbe #663399 (ein violettes Lila, das ihre Lieblingsfarbe war) als rebeccapurple zu benennen. Der Vorschlag wurde von der CSS Working Group angenommen und am 14. Juni 2014 der CSS Color Level 4-Spezifikation hinzugefügt. Es ist die einzige CSS-Farbe, die aus emotionalen und humanitären Gründen hinzugefügt wurde, und die einzige unter den 148 mit einer dokumentierten persönlichen Geschichte, die nicht aus dem X11-System stammt.