Farben mit Sass verändern

Von Jonas

In diesem Beitrag lernt ihr die Farb-Funktionen von Sass kennen.

Aktualisiert am 8. März 2023 Lesezeit ca. 5 Min. 4 Kommentare

Eine Website basiert normalerweise auf einem durchdachten Farbschema und einigen Farbabstufungen innerhalb der jeweiligen Farbe. Sass bietet umfangreiche Möglichkeiten, Farben zu manipulieren. Wenn der Sass-Code entsprechend vorbereitet wurde, ist es sogar möglich ein Design mit nur einer Variable komplett umzufärben – inkl. Helligkeitsabstufungen, Komplementärfarben etc.

Die Helligkeit von Farben verändern – lighten() / darken()

Mit den Sass-Funktionen lighten und darken ist es möglich Farben aufzuhellen oder abzudunkeln. In Kombination mit Variablen ist das ein sehr mächtiges und häufig eingesetztes Feature.

Beispiel – Helligkeit manipulieren

Das folgende Beispiel mit zwei <div>-Elementen nutzt zwei Variablen um die Grundfarben rot und grün festzulegen. Mit Hilfe von lighten(FARBE, AUFHELLUNG-IN-PROZENT); bzw. darken(FARBE, ABDUNKLUNG-IN-PROZENT); werden die Farbwerte der Rahmen verändert.

$color1:red;
$color2:green;

div:nth-of-type(1) {
  background:$color1;
  border-top-color: lighten($color1, 30%);
  border-right-color: darken($color1, 15%);
  border-bottom-color: darken($color1, 30%);
  border-left-color: lighten($color1, 15%);
  border-width: 10px;
  border-style: solid;
}

div:nth-of-type(2) {
  background:$color2;
  border-top-color: lighten($color2, 30%);
  border-right-color: darken($color2, 15%);
  border-bottom-color: darken($color2, 30%);
  border-left-color: lighten($color2, 15%);
  border-width: 10px;
  border-style: solid;
}

kompiliert zu:

div:nth-of-type(1) {
  background: red;
  border-top-color: #ff9999;
  border-right-color: #b30000;
  border-bottom-color: #660000;
  border-left-color: #ff4d4d;
  border-width: 10px;
  border-style: solid;
}

div:nth-of-type(2) {
  background: green;
  border-top-color: #1aff1a;
  border-right-color: #003400;
  border-bottom-color: black;
  border-left-color: #00cc00;
  border-width: 10px;
  border-style: solid;
}

Die Sättigung verändern – saturate() / desaturate()

Es ist auch möglich die Sättigung einer Farbe zu verändern. Der Wert wird ebenfalls als Prozentwert angegeben:

$color:steelblue;

div:nth-of-type(1) {
  background:desaturate($color, 50%);;
}

div:nth-of-type(2) {
  background:$color;
}

div:nth-of-type(3) {
  background:saturate($color, 50%);;
}

Den Farbton verändern – adjust-hue()

Selbst der Farbton kann mit Hilfe von Sass verändert werden. Die gewünschte Abweichung innerhalb des Farbraums wird ebenfalls in Prozent angegeben:

$color:aqua;

div:nth-of-type(1) {
  background:adjust-hue($color, 80%);
}

div:nth-of-type(2) {
  background:$color;
}

div:nth-of-type(3) {
  background:adjust-hue($color, -80%);
}

Ein hilfreiches Tool zur Visualisierung von Sass Color Functions findet ihr übrigens hier.

Farben invertieren – invert()

Sass hilft euch auch dabei Farben zu invertieren. Die Funktion hört auf die Bezeichnung invert. Im folgenden Beispiel invertieren wir die Farben des zweiten <div>.

$color1:red;
$color2:lime;

div:nth-of-type(1) {
  background:$color1;
  border:10px solid $color2;
}

div:nth-of-type(2) {
  background:invert($color1);
  border:10px solid invert($color2);
}

Der kompilierte Code verwendet sogar ebenfalls CSS-Farbnamen, sofern die Farben einen solchen besitzen:

div:nth-of-type(1) {
  background: red;
  border: 10px solid lime;
}

div:nth-of-type(2) {
  background: cyan;
  border: 10px solid magenta;
}

Komplementärfarben erzeugen – complement()

Auch Komplementärfarben können mit Sass erzeugt werden. Diese Funktion ist sehr hilfreich um Farbschemata anzulegen.

$color:tomato;

div:nth-of-type(1) {
  background:$color;
}

div:nth-of-type(2) {
  background:complement($color);
}

kompiliert zu:

div:nth-of-type(1) {
  background: tomato;
}

div:nth-of-type(2) {
  background: #47e3ff;
}

Farben in Graustufen umrechnen – grayscale()

Farben können mit der Funktion grayscale in Graustufen umgerechnet werden. Der Grauwert resultiert dabei aus der Helligkeit der Ausgangsfarbe. Achtet darauf, dass grayscale mit a geschrieben werden muss. Im folgenden Beispiel stellen wir die zweite Box in Graustufen dar:

$color1:lime;
$color2:green;

div:nth-of-type(1) {
  background:$color1;
  border:10px solid $color2;
}

div:nth-of-type(2) {
  background:grayscale($color1);
  border:10px solid grayscale($color2);
}

kompiliert zu:

div:nth-of-type(1) {
  background: lime;
  border: 10px solid green;
}

div:nth-of-type(2) {
  background: gray;
  border: 10px solid #404040;
}

Deckkraft und Farbmodus verändern

Es ist auch möglich die Deckkraft von Farben zu verändern – selbst wenn innerhalb der Variablen die Farbe in einem Farbmodus angegeben wurde, der keine Transparenzen zulässt (z. B. als Hexadezimalzahl). Das folgende Beispiel nutzt das RGBA-Farbmodell (Rot, Grün, Blau, Alpha-Transparenz) zum Bestimmung der Transparenz. Ein Wert von .6 entspricht 60%.

$color:#ff0000;

div:nth-of-type(1) {
  background:$color;
}

div:nth-of-type(2) {
  background:rgba($color, .6);
}  

div:nth-of-type(3) {
  background:rgba($color, .3);
}   

kompiliert zu:

div:nth-of-type(1) {
  background: red;
}

div:nth-of-type(2) {
  background: rgba(255, 0, 0, 0.6);
}

div:nth-of-type(3) {
  background: rgba(255, 0, 0, 0.3);
}

Das identische Ergebnis könntet ihr auch mit der Funktion transparentize erreichen. Im Gegensatz zu einer Transparenzangabe in rgba wirkt sich transparentize allerdings relativ aus. Die Farbe wird um den angegebenen Wert transparenter. Anstelle von transparentize könnt ihr auch fade-out schreiben – das Ergebnis ist identisch.

$color:red;

div:nth-of-type(1) {
  background:rgba($color, .6);
}

div:nth-of-type(2) {
  background:transparentize($color, .6);
}

div:nth-of-type(3) {
  background:fade-out($color, .6);
}

kompiliert zu:

div:nth-of-type(1) {
  background: rgba(255, 0, 0, 0.6);
}

div:nth-of-type(2) {
  background: rgba(255, 0, 0, 0.4);
}

div:nth-of-type(3) {
  background: rgba(255, 0, 0, 0.4);
}

Wenn ihr eine Farbe opaker (weniger transparent) gestalten möchtet, könnt ihr die Funktion opacify verwenden. Sie verhält sich exakt gegensätzlich zu transparentize/fade-out. Alternativ zu opacify könnt ihr auch fade-in schreiben:

$color:rgba(255,0,0,.2);

div:nth-of-type(1) {
  background:rgba($color, 1);
}

div:nth-of-type(2) {
  background:opacify($color, .2);
}

div:nth-of-type(3) {
  background:fade-in($color, .2);
}

kompiliert zu:

div:nth-of-type(1) {
  background: red;
}

div:nth-of-type(2) {
  background: rgba(255, 0, 0, 0.4);
}

div:nth-of-type(3) {
  background: rgba(255, 0, 0, 0.4);
}

Fallback-Lösungen für ältere Browser

Alle modernen Browser können Farben im rgba-Farbmodus darstellen. Da rgba es uns erlaubt Transparenzen anzugeben, verwenden wir heute auch meist diesen Farbmodus in unseren Stylesheets. Für ältere Browser sollte allerdings eine Alternative angeboten werden. Andernfalls wird das Element transparent dargestellt.

Das folgende Beispiel nutzt eine Variable mit Hexadezimalwert als Grundlage. Anschließend wird die Variable einmal direkt, und einmal umgewandelt in RGB und mit 95% Deckkraft eingesetzt. Browser die kein RGBA verstehen ignorieren die zweite Zeile und stellen die Farbe ohne Transparenz dar.

$color: #00ff00;

.selector {
  background-color: $color; 
  background-color: rgba($color, .95); 
}

Dieser SCSS-Code kompiliert zu nachfolgendem CSS-Code:

.selector {
  background-color: lime;
  background-color: rgba(0, 255, 0, 0.95);
}

Farben mischen – mix()

Ihr könnt auch zwei Farbwerte mischen. Dazu werden beide Farben nacheinander innerhalb der Funktion mix() notiert. Wenn kein Mischungsverhältnis angegeben wird, ist das Verhältnis 50%. Wenn die Farben in ungleichen Teilen gemischt werden sollen, schreibt mit Komma getrennt den Prozentsatz für die erste Farbe mit in die Funktion:

$color1:gray;
$color2:aqua;

div:nth-of-type(1) {
  background:mix($color1, $color2);
}

div:nth-of-type(2) {
  background:mix($color1, $color2, 75%);
}  

div:nth-of-type(3) {
  background:mix($color1, $color2, 90%);
}

Der kompilierte CSS-Code sieht so aus:

div:nth-of-type(1) {
  background: #40bfbf;
}

div:nth-of-type(2) {
  background: #609f9f;
}

div:nth-of-type(3) {
  background: #738c8c;
}

Dieser Beitrag ist ein Auszug aus unserem eBook zum Thema Sass.

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing