4-7 HSL函数-saturate()
本节编程练习不计算学习进度,请电脑登录imooc.com操作

HSL函数-saturate()

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

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

编译出来的 css 代码:

//CSS
.saturate {
  background: #c1000d;
}

.desaturate {
  background: #903137;
}


颜色变了。同样使用 saturation() 函数在终端中进行计算一下,看看他们有什么样的变化:

>> saturation(#ad141e) //原色的饱和度
79.27461%
>> saturation(#c1000d)  //在原色饱和度基础上增加30%,超过100%时按100%计算
100%
>> saturation(#903137) //在原色饱和度基础上减少30%,小于0时按0计算
49.2228%

 

任务

在编辑器第行输入正确的代码,让按钮边框色是背景颜色的基础上饱和度增加20%

  1. $bgcolor: #ff3;
  2.  
  3. .btn {
  4. background-color: $bgcolor;
  5. border-color:?;
  6. }
下一节