18-颜色函数

发表于 | 分类于 |

在 Sass 的官方文档中，列出了 Sass 的颜色函数清单，从大的方面主要分为 RGB , HSL 和 Opacity 三大函数，当然其还包括一些其他的颜色函数，比如说 adjust-color 和 change-color 等。在这章节中，将主要和大家一起探讨 Sass 颜色函数中常见的 RGB、HSL 和 Opacity 函数。

1、RGB颜色函数

RGB 颜色只是颜色中的一种表达式，其中 R 是 red 表示红色，G 是 green 表示绿色而 B 是 blue 表示蓝色。在 Sass 中为 RGB 颜色提供六种函数：

  • rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
  • rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
  • red($color)：从一个颜色中获取其中红色值；
  • green($color)：从一个颜色中获取其中绿色值；
  • blue($color)：从一个颜色中获取其中蓝色值；
  • mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

接下来，分别在终端使用 RGB 函数来进行计算，看其最终结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sass -i
>> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值
#c82858
>> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
rgba(200, 40, 88, 0.65)
>> red(#c82858) //从#c82858颜色值中得到红色值 200
200
>> green(#c82858) //从#c82858颜色值中得到绿色值 40
40
>> blue(#c82858) //从#c82858颜色值中得到蓝色值 88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色
rgba(200, 40, 80, 0.65105)

从上面的简单运算结果可以很清晰的知道。在 RGB 颜色函数中，在实际中常用的主要是 rgba() 和 mix() 两个函数，而 rgb() 函数只能快速的将一个 rgb 颜色转换成十六进制颜色表达，red()、green() 和 blue() 函数，只能取得某一颜色的一个值，对于颜色上使用并无太大作用（或许他的好处，我还没有理解过来）。接下来，主要来实战一下 rgba() 和 mix() 函数在实际中的运用。

RGB颜色函数-RGBA()函数

rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。

其语法有两种格式：

1
2
rgba($red,$green,$blue,$alpha)  //将一个rgba颜色转译出来，和未转译的值一样
rgba($color,$alpha)  //将一个Hex颜色转换成rgba颜色

其中 rgba($color,$alpha) 函数作用更大，主要运用在这样的情形之中：假设在实际中知道的颜色值是 #f36 或者 red，但在使用中，需要给他们配上一个透明度，这个时候在原来的 CSS 中，首先需要通过制图工具，得到 #f36 或 red 颜色的 R、G、B 值，而不能直接使用（注意 css3 是可以的，但是存在浏览器兼容问题）：

1
2
//CSS
color: rgba(#f36,.5); //在css中，这是无效的写法

但在 Sass 中，RGBA() 函数就能解决这个问题。我们先来看一个简单的例子，假设在变量中定义了一个基本的变量：
$color: #f36;
$bgColor: orange;
$borderColor:green;
同时给他们加上 .5 的透明度：
//SCSS
.rgba {
color: rgba(#f36,.5);
background: rgba(orange,.5);
border-color: rgba(green,.5);
}
语法：

在这个实例中，我们使用了 Sass 的 rgba 函数，在括号是函数的参数，第一个参数是需要转换的颜色，他可以是任何颜色的表达方式，也可以是一个颜色变量；第二个参数是颜色的透明度，其值是 0~1 之间。上面的代码转译出来：

1
2
3
4
5
.rgba {
  color: rgba(255, 51, 102, 0.5);
  background: rgba(255, 165, 0, 0.5);
  border-color: rgba(0, 128, 0, 0.5);
}

在来看一个调用前面定义的变量：

1
2
3
4
5
6
//SCSS
.rgba {
    color: rgba($color,.5);
    background: rgba($bgColor,.5);
    border-color: rgba($borderColor,.5);
}

编译出来的 css 代码：

1
2
3
4
5
6
//CSS
.rgba {
  color: rgba(255, 51, 102, 0.5);
  background: rgba(255, 165, 0, 0.5);
  border-color: rgba(0, 128, 0, 0.5);
}

RGB颜色函数-Red()、Green()、Blue()函数

Red() 函数

red() 函数非常简单，其主要用来获取一个颜色当中的红色值。假设有一个 #f36 的颜色，如果你想得到 #f36 中的 red 值是多少，这个时候使用 red() 函数就能很简单获取。

Green() 函数

green() 函数和 red() 函数一样，用来获取某一个颜色值中 green 的值。同样拿 ”#f36“ 颜色为例：

Blue() 函数

同理，blue() 函数是用来获取某一个颜色值中 blue 的值

RGB颜色函数-Mix()函数

Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。其使用语法如下：

1
mix($color-1,$color-2,$weight);

$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。

$weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。

HSL函数简介

  • hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
  • hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
  • hue($color)：从一个颜色中获取色相（hue）值；
  • saturation($color)：从一个颜色中获取饱和度（saturation）值；
  • lightness($color)：从一个颜色中获取亮度（lightness）值；
  • adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
  • lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
  • darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
  • saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
  • desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
  • grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
  • complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
  • invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

HSL函数-lighten()

来看一个简单的实例，首先定义一个颜色变量：
$baseColor: #ad141e;

使用 lighten() 和 darken() 函数来修改 10% 的亮度值：

1
2
3
4
5
6
7
//SCSS
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}

编译出来的 css 代码：

1
2
3
4
5
6
7
8
//CSS
.lighten {
  background: #db1926;
}

.darken {
  background: #7f0f16;
}

HSL函数-saturate()

saturate()、desaturate()这两个函数是通过改变颜色的饱和度来得到一个新的颜色，他们和前面介绍的修改亮度得到新颜色的方法非常相似。

1
2
3
4
5
6
7
8
//SCSS
$baseColor: #ad141e;
.saturate {
  background: saturate($baseColor,30%); //在原色饱和度基础上增加饱和度
}
.desaturate {
  background: desaturate($baseColor,30%);//在原色饱和度基础上减少饱和度
}

编译出来的 css 代码：

1
2
3
4
5
6
7
8
//CSS
.saturate {
  background: #c1000d;
}

.desaturate {
  background: #903137;
}

HSL函数-adjust-hue()函数

这个是通过调整颜色的色相换算一个新颜色。他需要一个颜色和色相度数值。通常这个度数值是在 -360deg 至 360deg 之间，当然了可以是百分数：

1
2
3
4
5
6
7
8
//SCSS
$baseColor: #ad141e;
.adjust-hue-deg {
  background: adjust-hue($baseColor,30deg);
}
.adjust-hue-per {
  background: adjust-hue($baseColor,30%);
}

编译出的 css 代码：

1
2
3
4
5
6
7
8
//CSS
.adjust-hue-deg {
  background: #ad5614;
}

.adjust-hue-per {
  background: #ad5614;
}

HSL函数-grayscale()函数

这个函数会颜色的饱和度值直接调至 0%，所以此函数与 desaturate($color,100%) 所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色。

Opacity函数简介

  • alpha($color) /opacity($color)：获取颜色透明度值；
  • rgba($color, $alpha)：改变颜色的透明度值；
  • opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
  • transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。

Opacity函数-alpha()、opacity()函数

alphpa() 和 opacity() 函数很简单，与前面介绍的 red(),green() 等函数很类似。这个函数的主要功能是用来获取一个颜色的透明度值。如果颜色没有特别指定透明度，那么这两个函数得到的值都会是 1：

Opacity函数-opacify()、fade-in()函数

这两个函数是用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。其接受两个参数，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时，会以 1 计算，表示颜色不具有任何透明度。

其中 fade-in( ) 函数又名 fade_in() 函数。其所起作用等效。

Opacity函数-transparentize()、 fade-out()函数

transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反，让颜色更加的透明。这两个函数会让透明值做减法运算，当计算出来的结果小于 0 时会以 0 计算，表示全透明。