sass:color

color.channel($color, $channel, $space: null) //=> number

Kompatibilität ($space)

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt den Wert von $channel im Raum $space zurück, der standardmäßig der Raum von $color ist. $channel muss ein Anführungszeichen-umgebener String sein und $space muss ein nicht umgebener String sein .

Dies gibt eine Zahl mit der Einheit deg für den hue-Kanal der Räume hsl, hwb, lch und oklch zurück. Es gibt eine Zahl mit der Einheit % für die Kanäle saturation, lightness, whiteness und blackness der Räume hsl, hwb, lab, lch, oklab und oklch zurück. Für alle anderen Kanäle gibt es eine einheitslose Zahl.

Dies gibt 0 zurück (möglicherweise mit einer entsprechenden Einheit), wenn der Kanal $channel in $color fehlt. Sie können color.is-missing() verwenden, um explizit nach fehlenden Kanälen zu suchen.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.channel(hsl(80deg 30% 50%), "hue"); // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch); // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb); // 140.25

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.channel(hsl(80deg 30% 50%), "hue")  // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch)  // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb)  // 140.25

color.complement($color, $space: null)
complement($color, $space: null) //=> color

Kompatibilität ($space)

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt das Komplementärfarbe von $color im Raum $space zurück.

Dies rotiert den Farbton von $color um 180deg im Raum $space. Das bedeutet, dass $space ein polarer Farbraum sein muss: hsl, hwb, lch oder oklch. Es gibt immer eine Farbe im selben Raum wie $color zurück.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

// HSL hue 222deg becomes 42deg.
@debug color.complement(#6b717f); // #7f796b

// Oklch hue 267.1262408996deg becomes 87.1262408996deg
@debug color.complement(#6b717f, oklch);
// rgb(118.8110604298, 112.5123650034, 98.1616586336)

// Hue 70deg becomes 250deg.
@debug color.complement(oklch(50% 0.12 70deg), oklch); // oklch(50% 0.12 250deg)

Spielplatz

Sass-Syntax

@use 'sass:color'

// HSL hue 222deg becomes 42deg.
@debug color.complement(#6b717f)  // #7f796b

// Oklch hue 267.1262408996deg becomes 87.1262408996deg
@debug color.complement(#6b717f, oklch) 
// rgb(118.8110604298, 112.5123650034, 98.1616586336)

// Hue 70deg becomes 250deg.
@debug color.complement(oklch(50% 0.12 70deg), oklch)  // oklch(50% 0.12 250deg)

color.grayscale($color)
grayscale($color) //=> color

Gibt eine graue Farbe mit derselben Helligkeit wie $color zurück.

Wenn $color sich in einem veralteten Farbraum befindet, wird die HSL-Sättigung auf 0% gesetzt. Andernfalls wird die Oklch-Chroma auf 0% gesetzt.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.grayscale(#6b717f); // #757575
@debug color.grayscale(color(srgb 0.4 0.2 0.6)); // color(srgb 0.3233585271 0.3233585411 0.3233585792)
@debug color.grayscale(oklch(50% 80% 270deg)); // oklch(50% 0% 270deg)

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.grayscale(#6b717f)  // #757575
@debug color.grayscale(color(srgb 0.4 0.2 0.6))  // color(srgb 0.3233585271 0.3233585411 0.3233585792)
@debug color.grayscale(oklch(50% 80% 270deg))  // oklch(50% 0% 270deg)

color.ie-hex-str($color)
ie-hex-str($color) //=> unquoted string

Gibt einen nicht umgebenden String zurück, der $color im #AARRGGBB-Format darstellt, wie es von der -ms-filter-Eigenschaft von Internet Explorer erwartet wird.

Wenn $color sich nicht bereits im rgb-Farbraum befindet, wird sie nach rgb konvertiert und bei Bedarf gamuts-gemappt. Der spezifische Gamut-Mapping-Algorithmus kann sich in zukünftigen Sass-Versionen ändern, wenn sich der Stand der Technik verbessert; derzeit wird local-minde verwendet.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg)); // #FF9BA287

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.ie-hex-str(#b37399)  // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6))  // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg))  // #FF9BA287

color.invert($color, $weight: 100%, $space: null)
invert($color, $weight: 100%, $space: null) //=> color

Kompatibilität ($space)

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt das Inverse oder Negativ von $color im Raum $space zurück.

$weight muss eine Zahl zwischen 0% und 100% (einschließlich) sein. Ein höheres Gewicht bedeutet, dass das Ergebnis näher am Negativ liegt, und ein niedrigeres Gewicht bedeutet, dass es näher an $color liegt. Gewicht 50% erzeugt immer ein Grau mit mittlerer Helligkeit im Raum $space.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.invert(#b37399, $space: rgb); // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3); // rgb(103.4937692017, 61.3720912206, 59.430641338)

Spielplatz

Sass-Syntax

@use 'sass:color';

@debug color.invert(#b37399, $space: rgb)  // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3)  // rgb(103.4937692017, 61.3720912206, 59.430641338)

color.is-legacy($color) //=> boolean

Kompatibilität ($space)

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt zurück, ob sich $color in einem veralteten Farbraum befindet.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.is-legacy(#b37399); // true
@debug color.is-legacy(hsl(90deg 30% 90%)); // true
@debug color.is-legacy(oklch(70% 10% 120deg)); // false

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.is-legacy(#b37399)  // true
@debug color.is-legacy(hsl(90deg 30% 90%))  // true
@debug color.is-legacy(oklch(70% 10% 120deg))  // false

color.is-missing($color, $channel) //=> boolean

Kompatibilität ($space)

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt zurück, ob $channel in $color [fehlt]. $channel muss ein Anführungszeichen-umgebener String sein.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.is-missing(#b37399, "green"); // false
@debug color.is-missing(rgb(100 none 200), "green"); // true
@debug color.is-missing(color.to-space(grey, lch), "hue"); // true

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.is-legacy(#b37399)  // true
@debug color.is-legacy(hsl(90deg 30% 90%))  // true
@debug color.is-legacy(oklch(70% 10% 120deg))  // false

color.is-powerless($color, $channel, $space: null) //=> boolean

Kompatibilität ($space)

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt zurück, ob der $channel von $color im Raum $space (standardmäßig der Raum von $color) kraftlos ist. $channel muss ein Anführungszeichen-umgebener String und $space muss ein nicht umgebener String sein .

Kanäle gelten unter den folgenden Umständen als kraftlos :

• Im hsl-Raum ist der hue kraftlos, wenn die saturation 0% beträgt.
• Im hwb-Raum ist der hue kraftlos, wenn whiteness plus blackness größer als 100% ist.
• In den Räumen lch und oklch ist der hue kraftlos, wenn die chroma 0% beträgt.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.is-powerless(hsl(180deg 0% 40%), "hue"); // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation"); // false
@debug color.is-powerless(#999, "hue", $space: hsl); // true

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.is-powerless(hsl(180deg 0% 40%), "hue")  // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation")  // false
@debug color.is-powerless(#999, "hue", $space: hsl)  // true

color.mix($color1, $color2, $weight: 50%, $method: null)
mix($color1, $color2, $weight: 50%, $method: null) //=> color

Kompatibilität ($method)

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt eine Farbe zurück, die eine Mischung aus $color1 und $color2 ist, unter Verwendung von $method, was der Name eines Farbraums ist, optional gefolgt von einer Farbton-Interpolationsmethode, wenn es sich um einen polaren Farbraum handelt (hsl, hwb, lch oder oklch).

Dies verwendet denselben Algorithmus zum Mischen von Farben wie die CSS-Funktion color-mix(). Das bedeutet auch, dass, wenn eine der Farben einen fehlenden Kanal im Interpolationsraum hat, sie den entsprechenden Kanalwert der anderen Farbe annimmt. Dies gibt immer eine Farbe im Raum von $color1 zurück.

$weight muss eine Zahl zwischen 0% und 100% (einschließlich) sein. Ein größeres Gewicht zeigt an, dass mehr von $color1 verwendet werden soll, und ein kleineres Gewicht zeigt an, dass mehr von $color2 verwendet werden soll.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb); // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch); // rgb(87.864037264, 140.601918773, 154.2876826946)
@debug color.mix(
  color(rec2020 1 0.7 0.1),
  color(rec2020 0.8 none 0.3),
  $weight: 75%,
  $method: rec2020
); // color(rec2020 0.95 0.7 0.15)
@debug color.mix(
  oklch(80% 20% 0deg),
  oklch(50% 10% 120deg),
  $method: oklch longer hue
); // oklch(65% 0.06 240deg)

Spielplatz

Sass-Syntax

@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb)  // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch)  // rgb(87.864037264, 140.601918773, 154.2876826946)
@debug color.mix(color(rec2020 1 0.7 0.1), color(rec2020 0.8 none 0.3), $weight: 75%, $method: rec2020)  // color(rec2020 0.95 0.7 0.15)





@debug color.mix(oklch(80% 20% 0deg), oklch(50% 10% 120deg), $method: oklch longer hue)  // oklch(65% 0.06 240deg)

color.same($color1, $color2) //=> boolean

Kompatibilität

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt zurück, ob $color1 und $color2 visuell als dieselbe Farbe gerendert werden. Im Gegensatz zu == betrachtet dies Farben als gleichwertig, auch wenn sie sich in verschiedenen Farbräumen befinden, solange sie denselben Farbwert im xyz-Farbraum darstellen. Dies behandelt fehlende Kanäle als gleichwertig mit Null.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.same(#036, #036); // true
@debug color.same(#036, #037); // false
@debug color.same(#036, color.to-space(#036, oklch)); // true
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%)); // true

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.same(#036, #036)  // true
@debug color.same(#036, #037)  // false
@debug color.same(#036, color.to-space(#036, oklch))  // true
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%))  // true

color.space($color) //=> unquoted string

Kompatibilität

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt den Namen des Raums von $color als nicht umgebener String zurück.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.space(#036); // rgb
@debug color.space(hsl(120deg 40% 50%)); // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3)); // xyz

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.space(#036)  // rgb
@debug color.space(hsl(120deg 40% 50%))  // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3))  // xyz

color.to-gamut($color, $space: null, $method: null) //=> color

Kompatibilität

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Gibt eine visuell ähnliche Farbe zu $color im Gamut von $space zurück, der standardmäßig der Raum von $color ist. Wenn $color bereits im Gamut für $space liegt, wird sie unverändert zurückgegeben. Dies gibt immer eine Farbe im ursprünglichen Raum von $color zurück. $space muss ein nicht umgebener String sein .

$method gibt an, wie Sass eine "ähnliche" Farbe wählen soll.

• local-minde: Dies ist die derzeit von der CSS Colors 4-Spezifikation empfohlene Methode. Sie durchsucht binär den Oklch-Chroma-Raum der Farbe, bis sie eine Farbe findet, deren an den Gamut geklemmter Wert dem reduzierten Chroma-Variante so nahe wie möglich kommt .

• clip: Dies klemmt einfach alle Kanäle innerhalb des Gamuts von $space und setzt sie auf die minimalen oder maximalen Gamut-Werte, wenn sie außerhalb des Gamuts liegen .

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.to-gamut(#036, $method: local-minde); // #036
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde);
// oklch(61.2058838235% 0.2466052584 22.0773325274deg)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip);
// oklch(62.5026609544% 0.2528579741 24.1000466758deg)

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.to-gamut(#036, $method: local-minde)  // #036
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde)
// oklch(61.2058838235% 0.2466052584 22.0773325274deg)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip)
// oklch(62.5026609544% 0.2528579741 24.1000466758deg)

color.to-space($color, $space) //=> color

Kompatibilität

Dart Sass

seit 1.79.0

LibSass

✗

Ruby Sass

✗

Konvertiert $color in den angegebenen $space, der ein nicht umgebener String sein muss .

Wenn der Gamut des ursprünglichen Raums von $color breiter ist als der Gamut von $space, kann dies eine Farbe zurückgeben, die außerhalb des Gamuts für $space liegt. Sie können sie mit color.to-gamut() in eine ähnliche Farbe innerhalb des Gamuts konvertieren.

Dies kann Farben mit fehlenden Kanälen erzeugen, entweder wenn $color einen analogen Kanal hat, der fehlt, oder wenn der Kanal im Zielraum kraftlos ist. Um sicherzustellen, dass die Konvertierung in veraltete Farbräume immer eine Farbe ergibt, die mit älteren Browsern kompatibel ist, gibt diese Funktion niemals einen neuen fehlenden Kanal zurück, wenn $space legacy ist.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.to-space(#036, display-p3); // lch(20.7457453073% 35.0389733355 273.0881809283deg)
@debug color.to-space(oklab(44% 0.09 -0.13)); // rgb(103.1328911972, 50.9728091281, 150.8382311692)
@debug color.to-space(xyz(0.8 0.1 0.1)); // color(a98-rgb 1.2177586808 -0.7828263424 0.3516847577)
@debug color.to-space(grey, lch); // lch(53.5850134522% 0 none)
@debug color.to-space(lch(none 10% 30deg), oklch); // oklch(none 0.3782382429 11.1889160032deg)

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.to-space(#036, display-p3)  // lch(20.7457453073% 35.0389733355 273.0881809283deg)
@debug color.to-space(oklab(44% 0.09 -0.13))  // rgb(103.1328911972, 50.9728091281, 150.8382311692)
@debug color.to-space(xyz(0.8 0.1 0.1))  // color(a98-rgb 1.2177586808 -0.7828263424 0.3516847577)
@debug color.to-space(grey, lch)  // lch(53.5850134522% 0 none)
@debug color.to-space(lch(none 10% 30deg), oklch)  // oklch(none 0.3782382429 11.1889160032deg)

adjust-hue($color, $degrees) //=> color

Erhöht oder verringert den HSL-Farbton von $color.

$hue muss eine Zahl zwischen -360deg und 360deg (einschließlich) sein, die zu $colors Farbton addiert wird. Sie kann einheitslos sein oder eine beliebige Winkeleinheit haben. $color muss sich in einem veralteten Farbraum befinden.

Siehe auch color.adjust(), die jede Eigenschaft einer Farbe anpassen kann.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066

Spielplatz

Sass-Syntax

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg)  // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg)  // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45)  // #1a0066

color.blackness($color)
blackness($color) //=> number

Kompatibilität

Dart Sass

seit 1.28.0

LibSass

✗

Ruby Sass

✗

Gibt die HWB-Schwarzheit von $color als Zahl zwischen 0% und 100% zurück.

$color muss sich in einem veralteten Farbraum befinden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.blackness(#e1d7d2); // 11.7647058824%
@debug color.blackness(white); // 0%
@debug color.blackness(black); // 100%

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.blackness(#e1d7d2)  // 11.7647058824%
@debug color.blackness(white)  // 0%
@debug color.blackness(black)  // 100%

color.blue($color)
blue($color) //=> number

Gibt den blauen Kanal von $color als Zahl zwischen 0 und 255 zurück.

$color muss sich in einem veralteten Farbraum befinden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.blue(#e1d7d2); // 210
@debug color.blue(white); // 255
@debug color.blue(black); // 0

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.blue(#e1d7d2)  // 210
@debug color.blue(white)  // 255
@debug color.blue(black)  // 0

darken($color, $amount) //=> color

Macht $color dunkler.

$color muss sich in einem veralteten Farbraum befinden.

$amount muss eine Zahl zwischen 0% und 100% (einschließlich) sein. Verringert die HSL-Helligkeit von $color um diesen Betrag.

⚠️ Vorsicht!

Die Funktion darken() verringert die Helligkeit um einen festen Betrag, was oft nicht die gewünschte Wirkung ist. Um eine Farbe um einen bestimmten Prozentsatz dunkler als zuvor zu machen, verwenden Sie stattdessen color.scale().

Da darken() normalerweise nicht die beste Methode ist, um eine Farbe dunkler zu machen, ist sie nicht direkt in das neue Modulsystem integriert. Wenn Sie jedoch das bestehende Verhalten beibehalten müssen, kann darken($color, $amount) als color.adjust($color, $lightness: -$amount, $space: hsl) geschrieben werden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%); // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447

Spielplatz

Sass-Syntax

@use 'sass:color'

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%)  // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%)  // #002447

• SCSS
• Sass

Spielplatz

SCSS-Syntax

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%); // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%); // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%); // black

Spielplatz

Sass-Syntax

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%)  // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%)  // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%)  // black

desaturate($color, $amount) //=> color

Macht $color weniger gesättigt.

$color muss sich in einem veralteten Farbraum befinden.

$amount muss eine Zahl zwischen 0% und 100% (einschließlich) sein. Verringert die HSL-Sättigung von $color um diesen Betrag.

⚠️ Vorsicht!

Die Funktion desaturate() verringert die Sättigung um einen festen Betrag, was oft nicht die gewünschte Wirkung ist. Um eine Farbe um einen bestimmten Prozentsatz weniger gesättigt als zuvor zu machen, verwenden Sie stattdessen color.scale().

Da desaturate() normalerweise nicht die beste Methode ist, um eine Farbe weniger gesättigt zu machen, ist sie nicht direkt in das neue Modulsystem integriert. Wenn Sie jedoch das bestehende Verhalten beibehalten müssen, kann desaturate($color, $amount) als color.adjust($color, $saturation: -$amount, $space: hsl) geschrieben werden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%); // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c

Spielplatz

Sass-Syntax

@use 'sass:color'

// #6b717f has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%)  // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%)  // #6e727c

• SCSS
• Sass

Spielplatz

SCSS-Syntax

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%); // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%); // #dadada

Spielplatz

Sass-Syntax

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%)  // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%)  // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%)  // #dadada

color.green($color)
green($color) //=> number

Gibt den grünen Kanal von $color als Zahl zwischen 0 und 255 zurück.

$color muss sich in einem veralteten Farbraum befinden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.green(#e1d7d2); // 215
@debug color.green(white); // 255
@debug color.green(black); // 0

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.green(#e1d7d2)  // 215
@debug color.green(white)  // 255
@debug color.green(black)  // 0

color.hue($color)
hue($color) //=> number

Gibt den Farbton von $color als Zahl zwischen 0deg und 360deg zurück.

$color muss sich in einem veralteten Farbraum befinden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.hue(#e1d7d2); // 20deg
@debug color.hue(#f2ece4); // 34.2857142857deg
@debug color.hue(#dadbdf); // 228deg

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.hue(#e1d7d2)  // 20deg
@debug color.hue(#f2ece4)  // 34.2857142857deg
@debug color.hue(#dadbdf)  // 228deg

lighten($color, $amount) //=> color

Macht $color heller.

$color muss sich in einem veralteten Farbraum befinden.

$amount muss eine Zahl zwischen 0% und 100% (einschließlich) sein. Erhöht die HSL-Helligkeit von $color um diesen Betrag.

⚠️ Vorsicht!

Die Funktion lighten() erhöht die Helligkeit um einen festen Betrag, was oft nicht die gewünschte Wirkung ist. Um eine Farbe um einen bestimmten Prozentsatz heller als zuvor zu machen, verwenden Sie stattdessen scale().

Da lighten() normalerweise nicht die beste Methode ist, um eine Farbe heller zu machen, ist sie nicht direkt in das neue Modulsystem integriert. Wenn Sie jedoch das bestehende Verhalten beibehalten müssen, kann lighten($color, $amount) als color.adjust($color, $lightness: $amount, $space: hsl) geschrieben werden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%); // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0

Spielplatz

Sass-Syntax

@use 'sass:color'

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%)  // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%)  // #eae3e0

• SCSS
• Sass

Spielplatz

SCSS-Syntax

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%); // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%); // white

Spielplatz

Sass-Syntax

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%)  // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%)  // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%)  // white

color.lightness($color)
lightness($color) //=> number

Gibt die HSL-Helligkeit von $color als Zahl zwischen 0% und 100% zurück.

$color muss sich in einem veralteten Farbraum befinden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.lightness(#e1d7d2); // 85.2941176471%
@debug color.lightness(#f2ece4); // 92.1568627451%
@debug color.lightness(#dadbdf); // 86.4705882353%

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.lightness(#e1d7d2)  // 85.2941176471%
@debug color.lightness(#f2ece4)  // 92.1568627451%
@debug color.lightness(#dadbdf)  // 86.4705882353%

color.red($color)
red($color) //=> number

Gibt den roten Kanal von $color als Zahl zwischen 0 und 255 zurück.

$color muss sich in einem veralteten Farbraum befinden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.red(#e1d7d2); // 225
@debug color.red(white); // 255
@debug color.red(black); // 0

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.red(#e1d7d2)  // 225
@debug color.red(white)  // 255
@debug color.red(black)  // 0

saturate($color, $amount) //=> color

Macht $color gesättigter.

$color muss sich in einem veralteten Farbraum befinden.

$amount muss eine Zahl zwischen 0% und 100% (einschließlich) sein. Erhöht die HSL-Sättigung von $color um diesen Betrag.

⚠️ Vorsicht!

Die Funktion saturate() erhöht die Sättigung um einen festen Betrag, was oft nicht die gewünschte Wirkung ist. Um eine Farbe um einen bestimmten Prozentsatz gesättigter als zuvor zu machen, verwenden Sie stattdessen scale().

Da saturate() normalerweise nicht die beste Methode ist, um eine Farbe gesättigter zu machen, ist sie nicht direkt in das neue Modulsystem integriert. Wenn Sie jedoch das bestehende Verhalten beibehalten müssen, kann saturate($color, $amount) als color.adjust($color, $saturation: $amount, $space: hsl) geschrieben werden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%); // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%); // #0a4986

Spielplatz

Sass-Syntax

@use 'sass:color'

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%)  // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%)  // #0a4986

• SCSS
• Sass

Spielplatz

SCSS-Syntax

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990

Spielplatz

Sass-Syntax

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990

color.saturation($color)
saturation($color) //=> number

Gibt die HSL-Sättigung von $color als Zahl zwischen 0% und 100% zurück.

$color muss sich in einem veralteten Farbraum befinden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.saturation(#e1d7d2); // 20%
@debug color.saturation(#f2ece4); // 30%
@debug color.saturation(#dadbdf); // 7.2463768116%

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.saturation(#e1d7d2)  // 20%
@debug color.saturation(#f2ece4)  // 30%
@debug color.saturation(#dadbdf)  // 7.2463768116%

color.whiteness($color) //=> number

Kompatibilität

Dart Sass

seit 1.28.0

LibSass

✗

Ruby Sass

✗

Gibt die HWB-Weißheit von $color als Zahl zwischen 0% und 100% zurück.

$color muss sich in einem veralteten Farbraum befinden.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:color';

@debug color.whiteness(#e1d7d2); // 82.3529411765%
@debug color.whiteness(white); // 100%
@debug color.whiteness(black); // 0%

Spielplatz

Sass-Syntax

@use 'sass:color'

@debug color.whiteness(#e1d7d2)  // 82.3529411765%
@debug color.whiteness(white)  // 100%
@debug color.whiteness(black)  // 0%