Vorschlag aus www-style@w3.org

System

color:
[saturation || lightness || transparency] hue
saturation:
extra-dull | dull | semi-dull | semi-bright | bright | extra-bright | duller | brighter
lightness:
extra-dark | dark | semi-dark | semi-light | light | extra-light | lighter | darker
transparency:
opaque | semi-opaque | semi-transparent | transparent
hue:
prime | general | special
prime:
red | green | blue | white | cyan | magenta | yellow | black
general:
navy | lime | teal | aqua | maroon | purple | fuchsia | olive | gray | silver
special:
pink | brown | tan | orange | yellow-green | green-cyan | cyan-blue | blue-magenta | magenta-red | possible others

Abwärtskompatibilität

Dieser Übersicht zeigt im jeweiligen Browser, dass der Vorschlag von Benjamin D. Gray auf www-style leider keine Abwärtskompatibilität bietet. Opera färbt zwar das zweite und vierte Beispiel genauso wie das erste, dieses Verhalten ist allerdings falsch, da sämtliche Deklarationen in denen unbekannte Werte vorkommen, ignoriert werden müssten. orange funktioniert im Übrigen nur in Browsern, die bereits unaufgefordert X11-Farbnamen unterstützen, das sind aber – zumindest auf dem Desktop – nahezu alle.

color: orange;
background-color: gray;

color: orange dull dark opaque;
background-color: gray brighter light semi-transparent;

color: dull dark opaque orange;
background-color: brighter light semi-transparent gray;

color: orange, dull dark opaque orange;
background-color: gray, brighter light semi-transparent gray;

color: dull dark opaque orange, orange;
background-color: brighter light semi-transparent gray, gray;

Die Lösung liegt darin, die Eigenschaften doppelt zu deklarieren.

color: orange;
background-color: gray;

color: orange;
color: orange dull dark opaque;
background-color: gray;
background-color: gray brighter light semi-transparent;

color: orange;
color: dull dark opaque orange;
background-color: gray;
background-color: brighter light semi-transparent gray;

color: orange;
color: orange, dull dark opaque orange;
background-color: gray;
background-color: gray, brighter light semi-transparent gray;

color: orange;
color: dull dark opaque orange, orange;
background-color: gray;
background-color: brighter light semi-transparent gray, gray;

Siehe auch meine Zusammenfassung von CNS, einer möglichen Alternative, sowie die Listen der X11 und Crayola Farbnamen.

Christoph Päper, christoph@paeper.de

URI: home.tu-clausthal.de/~ktcwcp/Webdesign/Farbsysteme/Ben.