Farben mit Sass verändern

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.

Beispiel mit aufgehellten und abgedunkelten Farbwerten
Beispiel mit aufgehellten und abgedunkelten Farbwerten
$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%);;
}
Beispiel mit entsättigten und übersättigten Farbwerten
Beispiel mit entsättigten und übersättigten Farbwerten

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.

Beispiel mit veränderten Farbwerten
Beispiel mit veränderten Farbwerten

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;
}
Invertierte Farben
Invertierte Farben

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;
}
In Komplementärfarbe umgerechnete Farbe
In Komplementärfarbe umgerechnete Farbe

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;
}
In Graustufen umgerechnete Farben
In Graustufen umgerechnete Farben

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);
}
Beispiel mit semitransparenten Farben vor einer Hintergrundgrafik
Beispiel mit semitransparenten Farben vor einer Hintergrundgrafik

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;
}
Gemischte Farbwerte
Gemischte Farbwerte

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

Geschrieben von Jonas

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

Feedback & Ergänzungen – 4 Kommentare

  1. Katja Weber
    schrieb am 07.12.2017 um 15:07 Uhr:

    Vielen Dank, besonders dafür dass man die Deckkraft von Fraben ändern kann! Das werde ich bestimmt benutzen.

    Antworten
  2. Thomas
    schrieb am 30.06.2015 um 14:18 Uhr:

    Hallo,

    ich befasse mich grad mit SASS und möchte einen Verlauf einbinden, damit ich diesen Verlauf nicht ständig schreiben muß.
    Wie setze ich das in SASS um?

    Das bisherige CSS sieht so aus:

    .hintergrund_verlauf {
    background: #141414; /* Old browsers */
    background: -moz-linear-gradient(top, #141414 0%, #555450 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#141414), color-stop(100%,#555450)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #141414 0%,#555450 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #141414 0%,#555450 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #141414 0%,#555450 100%); /* IE10+ */
    background: linear-gradient(to bottom, #141414 0%,#555450 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#141414′, endColorstr=’#555450′,GradientType=0 ); /* IE6-9 */
    }

    Antworten
    • Jonas Hellwig
      schrieb am 30.06.2015 um 14:57 Uhr:

      Hallo Thomas, hier findest du hilfreiche Mixins für CSS Gradients.

      Antworten
  3. Frank
    schrieb am 31.07.2014 um 10:25 Uhr:

    Schöner Beitrag. Werde ich sicher bei meinem anstehenden, ersten sass Projekt gebrauchen können :)

    VG
    Frank

    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.

Website-Projekte mit kulturbanause

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

Übersicht Kompetenzen →

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.

Übersicht Schulungsthemen →