【笔记】Sass的color颜色类型数据

发表于 2023-08-27 更新于 2024-05-16 阅读次数：

前言

Sass的color颜色类型数据学习笔记

color的表示形式

本案例以红色为例

颜色名称

red

16进制

#FF0000

16进制缩写

#F00

RGB

R：红，取值范围：0~255
G：绿，取值范围：0~255
B：蓝，取值范围：0~255

1	rgb(255, 0, 0)

HSL

H：色相，取值范围：0~360
S：饱和度，取值范围：0～100%
L：明度，取值范围：0~100%

1	hsl(0, 100%, 50%)

处理color类型数据的内置函数

通过RGB定义颜色

1
2
3

* {
  background-color: rgb(255, 0, 0)
}

1
2
3

* {
  background-color: red
}

定义不透明度

1
2
3

* {
  background-color: rgba(255, 0, 0, 0.5)
}

通过HSL定义颜色

1
2
3

* {
  background-color: hsl(0, 100%, 50%)
}

定义不透明度

1
2
3

* {
  background-color: hsla(0, 100%, 50%, 0.5)
}

1
2
3

* {
  background-color: rgba(255, 0, 0, 0.5)
}

调整颜色色相

<color>：颜色值
0deg：调整色相的度数

1	adjust-hue("<color>", 0deg)

调整颜色明度

调亮颜色明度

相当于在调色板向左（白色区域）移动

1	lignten("<color>", 50%)

调暗颜色明度

相当于在调色板向下（黑色区域）移动

1	darken("<color>", 50%)

调整颜色饱和度（纯度）

增加颜色饱和度（提高颜色纯度）

相当于在调色板向右上（彩色区域）移动

1	saturate("<color>", 50%)

减少颜色纯度（降低颜色纯度）

相当于在调色板向左下（黑白区域）移动

1	desaturate("<color>", 50%)

调整颜色透明度

增加透明度

相当于在调色板的透明度滑块向上移动，变得更不透明

1	opacify("<color>", 0.5)

减少透明度

相当于在调色板的透明度滑块向下移动，变得更透明

1	transparentize("<color>", 0.5)

完成

参考文献

哔哩哔哩——8m88

0%