kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Frank

    Verfasst am 31. Juli 2014 um 10:25 Uhr.

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

    VG
    Frank

  2. Thomas

    Verfasst am 30. Juni 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 */
    }

  3. Katja Weber

    Verfasst am 7. Dezember 2017 um 15:07 Uhr.

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.