Sass颜色函数介绍

RGB 颜色函数

rgb(red, green, $blue)

该函数用于根据红、绿、蓝三个值创建一个颜色。其中，$red、$green、$blue这三个参数分别代表红色、绿色、蓝色通道的值，取值范围均在 0 到 255 之间。例如：

$myColor: rgb(150, 200, 50);

在上述代码中，rgb(150, 200, 50)创建了一个由 150（红色）、200（绿色）和 50（蓝色）混合而成的颜色，并将其赋值给变量$myColor。

rgba(red, green, blue, alpha)

rgba()函数在rgb()函数的基础上增加了透明度（alpha）参数。$red、$green、$blue参数含义与rgb()函数一致，$alpha用于设置颜色的透明度，取值范围是 0（完全透明）到 1（完全不透明）之间的小数。例如：

$transparentColor: rgba(255, 0, 0, 0.5);

这里rgba(255, 0, 0, 0.5)创建了一个红色且透明度为 0.5 的颜色，赋值给$transparentColor变量。

red($color)

此函数用于从指定的颜色中提取红色通道的值。$color参数为要提取红色值的颜色。例如：

$originalColor: rgb(100, 150, 200);

$redValue: red($originalColor); // $redValue的值为100

上述代码从$originalColor颜色中提取出红色值 100，并将其赋给$redValue变量。

green($color)

green()函数的作用是从指定颜色中获取绿色通道的值。$color参数是目标颜色。例如：

$originalColor: rgb(100, 150, 200);

$greenValue: green($originalColor); // $greenValue的值为150

这里从$originalColor中提取出绿色值 150 并赋值给$greenValue。

blue($color)

blue()函数用于从给定颜色中提取蓝色通道的值。$color参数为目标颜色。例如：

$originalColor: rgb(100, 150, 200);

$blueValue: blue($originalColor); // $blueValue的值为200

代码从$originalColor颜色中提取出蓝色值 200，并赋给$blueValue变量。

mix(color1, color2, ($weight))

mix()函数用于混合两种颜色，生成一个新的颜色。$color1和$color2是要混合的两种颜色，$weight参数是可选的，表示第一种颜色$color1在混合结果中所占的比例，取值范围是 0（表示最终颜色完全为$color2）到 1（表示最终颜色完全为$color1）之间，默认值为 0.5（两种颜色各占一半）。例如：

$color1: rgb(255, 0, 0);

$color2: rgb(0, 255, 0);

$mixedColor1: mix($color1, $color2); // 两种颜色各占50%混合

$mixedColor2: mix($color1, $color2, 0.2); // $color1占20%，$color2占80%混合

上述代码中，$mixedColor1是红色和绿色各占 50% 混合后的颜色，$mixedColor2是红色占 20%、绿色占 80% 混合后的颜色。

HSL 颜色函数

hsl(hue, saturation, $lightness)

通过色相（hue）、饱和度（saturation）和亮度（lightness）的值创建一个颜色。$hue参数表示色相，取值范围通常是 0 到 360 度（表示色轮上的位置，0 度为红色，120 度为绿色，240 度为蓝色等）；$saturation表示饱和度，取值范围是 0%（灰色）到 100%（完全饱和的颜色）；$lightness表示亮度，取值范围是 0%（黑色）到 100%（白色）。例如：

$hslColor: hsl(180, 50%, 60%);

hsl(180, 50%, 60%)创建了一个色相为 180 度（青色）、饱和度为 50%、亮度为 60% 的颜色，并赋值给$hslColor变量。

hsla(hue, saturation, lightness, alpha)

hsla()函数是在hsl()函数的基础上增加了透明度（alpha）参数。$hue、$saturation、$lightness参数含义与hsl()函数一致，$alpha用于设置颜色的透明度，取值范围是 0（完全透明）到 1（完全不透明）之间的小数。例如：

$hslaColor: hsla(180, 50%, 60%, 0.7);

这里hsla(180, 50%, 60%, 0.7)创建了一个色相为 180 度、饱和度为 50%、亮度为 60% 且透明度为 0.7 的颜色，赋值给$hslaColor变量。

hue($color)

hue()函数用于从指定颜色中获取色相值。$color参数为目标颜色。例如：

$originalHSLColor: hsl(120, 40%, 70%);

$hueValue: hue($originalHSLColor); // $hueValue的值为120度

上述代码从$originalHSLColor颜色中提取出色相值 120 度，并赋给$hueValue变量。

saturation($color)

该函数用于获取指定颜色的饱和度值。$color参数为目标颜色。例如：

$originalHSLColor: hsl(120, 40%, 70%);

$saturationValue: saturation($originalHSLColor); // $saturationValue的值为40%

这里从$originalHSLColor中提取出饱和度值 40% 并赋值给$saturationValue变量。

lightness($color)

lightness()函数用于从给定颜色中获取亮度值。$color参数为目标颜色。例如：

$originalHSLColor: hsl(120, 40%, 70%);

$lightnessValue: lightness($originalHSLColor); // $lightnessValue的值为70%

代码从$originalHSLColor颜色中提取出亮度值 70%，并赋给$lightnessValue变量。

adjust-hue(color, degrees)

通过改变指定颜色的色相值，创建一个新的颜色。$color参数为要调整色相的颜色，$degrees参数表示色相调整的度数，可以为正数（顺时针旋转色相）或负数（逆时针旋转色相）。例如：

$originalColor: hsl(120, 40%, 70%);

$newColor: adjust-hue($originalColor, 30); // 色相顺时针旋转30度

上述代码将$originalColor的色相顺时针旋转 30 度，生成新颜色$newColor。

lighten(color, amount)

通过增加颜色的亮度值，使颜色变亮从而创建一个新的颜色。$color参数为目标颜色，$amount参数表示亮度增加的量，取值范围通常是 0% 到 100% 之间。例如：

$originalColor: hsl(120, 40%, 50%);

$lighterColor: lighten($originalColor, 20%); // 亮度增加20%

这里将$originalColor的亮度增加 20%，得到变亮后的新颜色$lighterColor。

darken(color, amount)

与lighten()函数相反，darken()函数通过减少颜色的亮度值，使颜色变暗来创建一个新的颜色。$color参数为目标颜色，$amount参数表示亮度减少的量，取值范围通常是 0% 到 100% 之间。例如：

$originalColor: hsl(120, 40%, 70%);

$darkerColor: darken($originalColor, 15%); // 亮度减少15%

上述代码将$originalColor的亮度减少 15%，生成变暗后的新颜色$darkerColor。

saturate(color, amount)

通过增加颜色的饱和度值，使颜色更加鲜艳从而创建一个新的颜色。$color参数为目标颜色，$amount参数表示饱和度增加的量，取值范围通常是 0% 到 100% 之间。例如：

$originalColor: hsl(120, 30%, 60%);

$moreSaturatedColor: saturate($originalColor, 25%); // 饱和度增加25%

这里将$originalColor的饱和度增加 25%，得到更鲜艳的新颜色$moreSaturatedColor。

desaturate(color, amount)

与saturate()函数相反，desaturate()函数通过减少颜色的饱和度值，使颜色变得不那么鲜艳来创建一个新的颜色。$color参数为目标颜色，$amount参数表示饱和度减少的量，取值范围通常是 0% 到 100% 之间。例如：

$originalColor: hsl(120, 50%, 60%);

$lessSaturatedColor: desaturate($originalColor, 30%); // 饱和度减少30%

上述代码将$originalColor的饱和度减少 30%，生成饱和度降低后的新颜色$lessSaturatedColor。

grayscale($color)

grayscale()函数用于将指定颜色转换为灰度颜色，即完全去除颜色的饱和度，使其变为灰色。$color参数为目标颜色。该函数相当于desaturate($color, 100%)。例如：

$originalColor: hsl(120, 40%, 70%);

$grayColor: grayscale($originalColor); // 转换为灰度颜色

这里将$originalColor转换为灰度颜色$grayColor。

complement($color)

complement()函数返回指定颜色的互补色。互补色是色轮上相对的颜色，它们的色相值相差 180 度。$color参数为目标颜色。该函数相当于adjust-hue($color, 180deg)。例如：

$originalColor: hsl(120, 40%, 70%);

$complementaryColor: complement($originalColor); // 返回互补色

上述代码返回$originalColor的互补色$complementaryColor。

invert($color)

invert()函数用于反转指定颜色的 RGB 值，即红、绿、蓝通道的值会被取反，而透明度保持不变。$color参数为目标颜色。例如：

$originalColor: rgb(100, 150, 200);

$invertedColor: invert($originalColor); // 反转颜色

这里将$originalColor的 RGB 值反转，得到新颜色$invertedColor。

透明度相关函数

alpha(color) / opacity(color)

这两个函数作用相同，都是用于获取指定颜色的透明度值。$color参数为目标颜色，返回值是 0（完全透明）到 1（完全不透明）之间的小数。例如：

$transparentColor: rgba(255, 0, 0, 0.6);

$alphaValue1: alpha($transparentColor); // $alphaValue1的值为0.6

$alphaValue2: opacity($transparentColor); // $alphaValue2的值也为0.6

上述代码通过alpha()和opacity()函数获取$transparentColor的透明度值 0.6。

rgba(color, alpha)

该函数用于改变指定颜色的透明度。$color参数为要修改透明度的颜色，$alpha参数表示新的透明度值，取值范围是 0 到 1 之间的小数。例如：

$originalColor: rgb(255, 0, 0);

$newTransparentColor: rgba($originalColor, 0.4); // 设置透明度为0.4

这里将$originalColor（红色）的透明度设置为 0.4，生成新颜色$newTransparentColor。

opacify(color, amount) / fade-in(color, amount)

这两个函数功能一致，用于增加指定颜色的不透明度（即降低透明度）。$color参数为目标颜色，$amount参数表示不透明度增加的量，取值范围是 0 到 1 之间的小数。例如：

$originalTransparentColor: rgba(255, 0, 0, 0.3);

$moreOpaqueColor1: opacify($originalTransparentColor, 0.2); // 不透明度增加0.2

$moreOpaqueColor2: fade-in($originalTransparentColor, 0.2); // 与opacify效果相同

上述代码将$originalTransparentColor的不透明度增加 0.2，得到更不透明的颜色$moreOpaqueColor1和$moreOpaqueColor2。

transparentize(color, amount) / fade-out(color, amount)

这两个函数作用相同，用于增加指定颜色的透明度（即降低不透明度）。$color参数为目标颜色，$amount参数表示透明度增加的量，取值范围是 0 到 1 之间的小数。例如：

$originalColor: rgba(255, 0, 0, 0.8);

$moreTransparentColor1: transparentize($originalColor, 0.3); // 透明度增加0.3

$moreTransparentColor2: fade-out($originalColor, 0.3); // 与transparentize效果相同

这里将$originalColor的透明度增加 0.3，得到更透明的颜色$moreTransparentColor1和$moreTransparentColor2。

其他颜色函数

adjust-color(color, (red), (green), (blue), (hue), (saturation), (lightness), (alpha))

该函数可以同时调整颜色的多个属性（红色、绿色、蓝色、色相、饱和度、亮度、透明度）。$color参数为要调整的颜色，后面的参数是可选的，分别表示要调整的各个属性的变化量。例如：

$originalColor: hsl(120, 40%, 70%);

$adjustedColor: adjust-color($originalColor, $hue: 20deg, $lightness: -10%); // 调整色相和亮度

上述代码将$originalColor的色相增加 20 度，亮度降低 10%，得到调整后的颜色$adjustedColor。

scale-color(color, (red), (green), (blue), (saturation), (lightness), ($alpha))

scale-color()函数用于按比例缩放颜色的各个属性（红色、绿色、蓝色、饱和度、亮度、透明度）。$color参数为要缩放的颜色，后面的参数是可选的，分别表示各个属性的缩放比例。例如：

$originalColor: rgb(100, 150, 200);

$scaledColor: scale-color($originalColor, $red: 1.2, $blue: 0.8); // 红色缩放1.2倍，蓝色缩放0.8倍

这里将$originalColor的红色通道值乘以 1.2，蓝色通道值乘以 0.8，得到缩放后的颜色$scaledColor。

change-color(color, (red), (green), (blue), (hue), (saturation), (lightness), (alpha))

change-color()函数用于直接改变颜色的各个属性（红色、绿色、蓝色、色相、饱和度、亮度、透明度）到指定的值。$color参数为要改变的颜色，后面的参数是可选的，分别表示各个属性要改变到的值。例如：

$originalColor: hsl(120, 40%, 70%);

$changedColor: change-color($originalColor, $saturation: 60%, $lightness: