Farb-Systeme mit CSS-Variablen gestalten

Benutzeroberflächen in verschiedenen farbigen Varianten müssen in vielen Projekten umgesetzt werden. Mal soll ein Farbleitsystem zur Unterstützung der Navigation integriert werden, dann wieder muss das Projekt den Dark Mode unterstützen oder für Kunden individuell anpassbar sein – Stichwort »Theming«. Mit Hilfe von CSS-Variablen lässt sich ein solches Farb-System mit geringem Aufwand in eine Website integrieren.

CSS-Variablen definieren

Durch die Erstellung von CSS-Variablen innerhalb des :root-Selectors legen wir die globalen Eigenschaften des Designs (auch Design Tokens genannt) fest. Die so definierten Farben dienen als Standard-Farben des Layouts, die wir an späterer Stelle für die farblichen Varianten überschreiben.

Wir verwenden im Beispiel das HSLA-Modell, um die Farben zu definieren. HSLA steht für Hue, Saturation, Lightness, Alpha (Farbton, Sättigung, Helligkeit, Alpha-Transparenz). Im Gegensatz zu RGB oder Hexadezimalfarben, ist es so später einfacher mit verschiedenen Abstufungen einer Farbe zu arbeiten, da nur die Werte für Helligkeit und Transparenz verändert werden müssen.

Die CSS-Variablen beginnen immer mit zwei Bindestrichen (--name-der-variable), es folgt der vergebene Wert:

:root {
  /* Rot */
  --highlight-color-h: 0; 
  --highlight-color-s: 100%;
}

CSS-Variablen anwenden

Nachdem wir die Variablen definiert haben, können wir sie im CSS-Code verwenden. Hierzu schreiben wir an den Stellen, an denen wir die Variablen einfügen wollen, var() und den Namen der Variable innerhalb der Klammern. Da wir im :root nur den Farbton (Hue) --highlight-color-h und die Sättigung (Saturation) --highlight-color-s angegeben haben, müssen wir jetzt noch, Helligkeit (Lightness) und Transparenz (Alpha) angeben. Mit diesen Werten können wir verschiedene Abstufungen der »Highlight-Color« erzeugen, ohne dass sich der Farbton ändert.

.teaser {   
  border: 1em solid hsla(var(--highlight-color-h), var(--highlight-color-s), 75%, 100%);   
  background: hsla(var(--highlight-color-h), var(--highlight-color-s), 80%, 100%);
}

.teaser__heading {   
  color: hsla(var(--highlight-color-h), var(--highlight-color-s), 26%, 100%);
}

.teaser__link {
  color: hsla(var(--highlight-color-h), var(--highlight-color-s), 26%, 100%);
}
Screenshot des Teasers mit verschiedenen Farbabstufungen von Rot für Hintergrund, Kontur und Textfarbe

CSS-Variablen überschreiben

Um nun ein System mit verschiedenen Farben zu erzeugen, müssen wir die --highlight-color-h  und eventuell --highlight-color-s überschreiben, sobald bestimmte Bedingungen erfüllt sind. Im Beispiel passen wir die Farbe immer dann an, wenn die Klasse .thema-1, .thema-2 bzw. .thema-3 vorhanden ist.

.thema-1 {
  /* Gelb */
  --highlight-color-h: 50;
}

.thema-2 {
  /* Grün */
  --highlight-color-h: 125; 
  --highlight-color-s: 70%;
}

.thema-3 {
  /* Blau */
  --highlight-color-h: 200; 
}
Verschieden eingefärbte Boxen mit Hilfe der CSS-Variablen

SVG-Background mit CSS-Variablen umfärben

SVG-Backgrounds, z.B. Icons lassen sich mit einem kleinen Trick auch mit CSS-Variablen umfärben. Hierzu verwenden wir die CSS-Eigenschaft mask-image und unsere »Highlight-Color« als Hintergrundfarbe eines ::before-Pseudoelements.

In den oben gezeigten Beispielen ist das Pfeil-Icon mit dieser Technik realisiert.

.teaser__link::after {
  content: '';
  background-color: hsla(var(--highlight-color-h), var(--highlight-color-s), 26%, 100%);
  mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d=" … " /></svg>');
  mask-size: contain;
  
  … 
}

Beispiel anschauen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-variables feature across the major browsers from caniuse.com

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Raimund Büchner

Benutzerbild

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

Feedback & Ergänzungen – 3 Kommentare

  1. Sabine
    schrieb am 17.12.2020 um 11:08 Uhr:

    Danke Jonas für deine Antwort

    Antworten
  2. Sabine
    schrieb am 10.12.2020 um 13:24 Uhr:

    Danke für diesen guten Artikel.

    Sollte man diese Technik wirklich schon einsetzen? Der Browsersupport ist ja noch nicht besonders gut. Oder kann man auf Opera mini verzichten?

    https://caniuse.com/?search=CSS%20variables

    Antworten
    • Jonas Hellwig
      schrieb am 11.12.2020 um 08:07 Uhr:

      Die Technik gilt als praxistauglich. Auch große Brands mit eher konservativem Browserverhalten in der Zielgruppe setzen CSS-Variablen ein.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Design + Code

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung