WENIGER - Farbkanalfunktionen

In diesem Kapitel werden wir die Bedeutung von Farbkanalfunktionen in WENIGER verstehen. WENIGER unterstützt nur wenige integrierte Funktionen, die den Wert eines Kanals festlegen. Der Kanal stellt den Wert abhängig von der Farbdefinition ein. Die HSL-Farben haben einen Farbton-, Sättigungs- und Helligkeitskanal und die RGB-Farbe einen Rot-, Grün- und Blaukanal. In der folgenden Tabelle sind alle Farbkanalfunktionen aufgeführt -

Sr.Nr. Bedienungsanleitung Beispiel
1

hue

Im HSL-Farbraum wird der Farbtonkanal aus dem Farbobjekt extrahiert.

background: hue(hsl(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 75;
2

saturation

Im HSL-Farbraum wird der Sättigungskanal aus dem Farbobjekt extrahiert.

background: saturation(hsl(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 90%;
3

lightness

Im HSL-Farbraum wird der Helligkeitskanal aus dem Farbobjekt extrahiert.

background: lightness(hsl(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 30%;
4

hsvhue

Im HSV-Farbraum wird der Farbtonkanal aus dem Farbobjekt extrahiert.

background: hsvhue(hsv(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 75;
5

hsvsaturation

Im HSL-Farbraum wird der Sättigungskanal aus dem Farbobjekt extrahiert.

background: hsvsaturation(hsv(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 90%;
6

hsvvalue

Im HSL-Farbraum wird der Wertekanal aus dem Farbobjekt extrahiert.

background: hsvvalue(hsv(75, 90%, 30%));

Es wird im CSS wie unten gezeigt kompiliert -

background: 30%;
7

red

Der rote Kanal wird aus dem Farbobjekt extrahiert.

background: red(rgb(5, 15, 25));

Es wird im CSS wie unten gezeigt kompiliert -

background: 5;
8

green

Der grüne Kanal wird aus dem Farbobjekt extrahiert.

background: green(rgb(5, 15, 25));

Es wird im CSS wie unten gezeigt kompiliert -

background: 15;
9

blue

Der blaue Kanal wird aus dem Farbobjekt extrahiert.

background: blue(rgb(5, 15, 25));

Es wird im CSS wie unten gezeigt kompiliert -

background: 25;
10

alpha

Der Alphakanal wird aus dem Farbobjekt extrahiert.

background: alpha(rgba(5, 15, 25, 1.5));

Es wird im CSS wie unten gezeigt kompiliert -

background: 2;
11

luma

Der Luma-Wert wird aus einem Farbobjekt berechnet.

background: luma(rgb(50, 250, 150));

Es wird im CSS wie unten gezeigt kompiliert -

background: 71.2513323%;
12

luminance

Der Luma-Wert wird ohne Gammakorrektur berechnet.

background: luminance(rgb(50, 250, 150));

Es wird im CSS wie unten gezeigt kompiliert -

background: 78.53333333%;