Generierung von Farbschattierungen mit CSS-Variablen

Benutzerdefinierte CSS-Eigenschaften (auch CSS-Variablen genannt) sind eine unterschätzte Methode beim Webdesign.

:root { 
  /* declare HEX colors */ 
  --color-highlight: #fb0000;
} 
/* then use them like: */ 
.selector { 
  color: var(--color-highlight); 
}

Bei Webdesign ist es meist ausreichend eine begrenzte Kernfarbpalette zu definieren und dann hellere oder dunklere Farbtonvarianten dieser Hauptfarben im Stylesheet zu verwenden. Das Problem ist, dass diese Farben meistens monoton sind. Daher müsste man eine große Anzahl von Schattierungsvarianten erstellen, um sie zur Hand zu haben, wenn man diese benötigt, d.h.:

:root {   
  --color-highlight: rgb(251, 0, 0);   
  --color-highlight-9: rgba(251, 0, 0, 0.9);   
  --color-highlight-8: rgba(251, 0, 0, 0.8);   
  --color-highlight-7: rgba(251, 0, 0, 0.7);   
  --color-highlight-6: rgba(251, 0, 0, 0.6);   
  --color-highlight-5: rgba(251, 0, 0, 0.5);   
  /* etc. */ 
}

Das fühlt sich nicht richtig an. Zehn Varianten für jede einzelne Farbvariante? Das könnte zu mehr als fünfzig Variablen führen. Fühlt sich nicht gerade wie eine Variable an!? Und was, wenn ein Zwischenwert gewünscht ist, welcher nicht definiert wurde, wie rgba(251, 0, 0, 0.85)?

SASS-Exkurs

Eine Abhilfe kann hier SASS (“Syntactically Awesome Style Sheets”) bieten, allerdings ist das nicht das Ziel dieses Artikels. Dennoch würde das Ergebnis in etwa so aussehen:

$color-highlight: #fb0000;  
.selector {   
  background-color: rgba($color-highlight, 0.85); 
}

Dabei ist es irrelevant, ob der rgba()-Funktion ein HEX-Wert oder eine Angabe in RGB übergeben wird, da diese vollautomatisch von SASS konvertiert wird.

CSS-Wunschdenken

Ideal wäre eine Angabe wie folgend in üblichen CSS:

:root { 
  --color-highlight: #fb0000; 
} 
.selector { 
  background-color: rgba(var(--color-highlight), 0.85); 
}

CSS bringt eine rgba-Funktion mit, welche ebenfalls in SASS verwendet werden kann, allerdings löst SASS etwaige auftretende Konflikte bei der Ausführung auf, z.B. Konvertierung von den übergebenen Parameter.

Leider funktioniert dieses Beispiel, wie oben skizziert nicht, da die CSS-rgba()-Funktion keine HEX-Werte aus Variablen unterstützt.

Die Verwendung von “opacity” funktioniert auch nicht, da diese Eigenschaft alle (Kinder)-Elemente innerhalb des selektiertem (Eltern)-Element bis zu einem gewissen Grad transparent gestaltet:

:root {   
  --color-highlight: #fb0000; 
}  
.selector {   
  background-color: var(--color-highlight);   
  opacity: 0.85; // Ohhh!!!
}

CSS-Realität

Allerdings gibt es einen kleinen Trick, wie man mit CSS genau diesen Effekt erzielen kann, wie eingangs beschrieben. Wenn die gewünschten Farbwerte als kommagetrennte Liste von RGB-Werten definiert werden, dann kann genau das Resultat erzielt werden, welches die rgba()-Funktion von CSS interpretieren kann:

:root {   
  --color-highlight: 251, 0, 0; 
}  
.selector {   
  background-color: rgba(var(--color-highlight), 0.85); 
}

Detaillierterer Artikel in englischer Sprache zu finden auf dem Blog von Jim Nielsen.