颜色操作相关
约 2993 字大约 10 分钟
2025-04-18
一、red() 获取/设置红色分量
1、函数作用
获取或设置颜色的红色分量值（0-255）。
2、语法
red(color[, value])3、参数说明
color：要操作的颜色值value（可选）：要设置的红色分量值（0-255）
4、返回值
当只传入颜色参数时，返回红色分量值；当传入 value 参数时，返回修改后的新颜色。
5、示例
// 获取红色分量
red(#f00) // => 255
// 设置红色分量
red(#00f, 255) // => #ff00f二、green() 获取/设置绿色分量
1、函数作用
获取或设置颜色的绿色分量值（0-255）。
2、语法
green(color[, value])3、参数说明
color：要操作的颜色值value（可选）：要设置的绿色分量值（0-255）
4、返回值
当只传入颜色参数时，返回绿色分量值；当传入 value 参数时，返回修改后的新颜色。
5、示例
// 获取绿色分量
green(#0f0) // => 255
// 设置绿色分量
green(#f00, 255) // => #f0f0三、blue() 获取/设置蓝色分量
1、函数作用
获取或设置颜色的蓝色分量值（0-255）。
2、语法
blue(color[, value])3、参数说明
color：要操作的颜色值value（可选）：要设置的蓝色分量值（0-255）
4、返回值
当只传入颜色参数时，返回蓝色分量值；当传入 value 参数时，返回修改后的新颜色。
5、示例
// 获取蓝色分量
blue(#00f) // => 255
// 设置蓝色分量
blue(#f00, 255) // => #f00f四、alpha() 透明度
1、函数作用
获取或设置颜色的透明度值（0-1）。
2、语法
alpha(color[, value])3、参数说明
color：要操作的颜色值value（可选）：要设置的透明度值（0-1）
4、返回值
当只传入颜色参数时，返回透明度值；当传入 value 参数时，返回修改后的新颜色。
5、示例
// 获取透明度
alpha(rgba(255,0,0,0.5)) // => 0.5
// 设置透明度
alpha(#f00, 0.5) // => rgba(255,0,0,0.5)五、dark() 是否为深色
1、函数作用
判断颜色是否为深色（亮度小于 50%）。
2、语法
dark(color)3、参数说明
color：要判断的颜色值
4、返回值
布尔值，true 表示是深色，false 表示不是深色。
5、示例
// 判断深色
dark(#333) // => true
dark(#ccc) // => false六、light() 是否为浅色
1、函数作用
判断颜色是否为浅色（亮度大于 50%）。
2、语法
light(color)3、参数说明
color：要判断的颜色值
4、返回值
布尔值，true 表示是浅色，false 表示不是浅色。
5、示例
// 判断浅色
light(#ccc) // => true
light(#333) // => false七、hue() 色调
1、函数作用
获取或设置颜色的色调值（0-360 度）。
2、语法
hue(color[, value])3、参数说明
color：要操作的颜色值value（可选）：要设置的色调值（0-360）
4、返回值
当只传入颜色参数时，返回色调值；当传入 value 参数时，返回修改后的新颜色。
5、示例
// 获取色调值
hue(#f00) // => 0
// 设置色调值
hue(#f00, 120) // => #0f0八、saturation() 饱和度
1、函数作用
获取或设置颜色的饱和度值（0-100%）。
2、语法
saturation(color[, value])3、参数说明
color：要操作的颜色值value（可选）：要设置的饱和度值（0-100）
4、返回值
当只传入颜色参数时，返回饱和度值；当传入 value 参数时，返回修改后的新颜色。
5、示例
// 获取饱和度值
saturation(#f00) // => 100
// 设置饱和度值
saturation(#f00, 50) // => #ff8080九、lightness() 亮度
1、函数作用
获取或设置颜色的亮度值（0-100%）。
2、语法
lightness(color[, value])3、参数说明
color：要操作的颜色值value（可选）：要设置的亮度值（0-100）
4、返回值
当只传入颜色参数时，返回亮度值；当传入 value 参数时，返回修改后的新颜色。
5、示例
// 获取亮度值
lightness(#888) // => 53.33
// 设置亮度值
lightness(#000, 50) // => #808080十、hsla() HSLA 颜色
1、函数作用
通过色调、饱和度、亮度和透明度值创建 HSLA 颜色。
2、语法
hsla(hue, saturation, lightness[, alpha])3、参数说明
hue：色调值（0-360 度）saturation：饱和度值（0-100%）lightness：亮度值（0-100%）alpha（可选）：透明度值（0-1）
4、返回值
返回对应的 HSLA 颜色值。
5、示例
// 创建不透明HSLA颜色
hsla(120, 100%, 50%) // => #0f0
// 创建半透明HSLA颜色
hsla(120, 100%, 50%, 0.5) // => rgba(0,255,0,0.5)十一、hsl() HSL 颜色
1、函数作用
通过色调、饱和度和亮度值创建 HSL 颜色。
2、语法
hsl(hue, saturation, lightness)3、参数说明
hue：色调值（0-360 度）saturation：饱和度值（0-100%）lightness：亮度值（0-100%）
4、返回值
返回对应的 HSL 颜色值。
5、示例
// 创建HSL颜色
hsl(120, 100%, 50%) // => #0f0
hsl(0, 100%, 50%) // => #f00十二、rgba() RGBA 颜色
1、函数作用
通过红色、绿色、蓝色和透明度值创建 RGBA 颜色。
2、语法
rgba(red, green, blue, alpha)3、参数说明
red：红色分量值（0-255）green：绿色分量值（0-255）blue：蓝色分量值（0-255）alpha：透明度值（0-1）
4、返回值
返回对应的 RGBA 颜色值。
5、示例
// 创建半透明红色
rgba(255, 0, 0, 0.5) // => rgba(255,0,0,0.5)
// 创建不透明蓝色
rgba(0, 0, 255, 1) // => #00f十三、rgb() RGB 颜色
1、函数作用
通过红色、绿色和蓝色值创建 RGB 颜色。
2、语法
rgb(red, green, blue)3、参数说明
red：红色分量值（0-255）green：绿色分量值（0-255）blue：蓝色分量值（0-255）
4、返回值
返回对应的 RGB 颜色值。
5、示例
// 创建红色
rgb(255, 0, 0) // => #f00
// 创建绿色
rgb(0, 255, 0) // => #0f0
// 创建蓝色
rgb(0, 0, 255) // => #00f十四、blend() 混合
1、函数作用
将两种颜色按照指定比例混合。
2、语法
blend(color1, color2[, weight])3、参数说明
color1：第一种颜色值color2：第二种颜色值weight（可选）：混合比例（0-1），默认 0.5
4、返回值
返回混合后的新颜色。
5、示例
// 等比例混合红色和蓝色
blend(#f00, #00f) // => #800080
// 按30%比例混合红色和蓝色
blend(#f00, #00f, 0.3) // => #b3004d十五、lighten() 变亮
1、函数作用
通过增加亮度值使颜色变亮。
2、语法
lighten(color, amount)3、参数说明
color：要变亮的颜色值amount：亮度增加值（0-100%）
4、返回值
返回变亮后的新颜色。
5、示例
// 将颜色亮度增加20%
lighten(#800, 20) // => #cc0033
// 将黑色亮度增加50%
lighten(#000, 50) // => #808080十六、darken() 变暗
1、函数作用
通过减少亮度值使颜色变暗。
2、语法
darken(color, amount)3、参数说明
color：要变暗的颜色值amount：亮度减少值（0-100%）
4、返回值
返回变暗后的新颜色。
5、示例
// 将颜色亮度减少20%
darken(#800, 20) // => #4d0000
// 将白色亮度减少50%
darken(#fff, 50) // => #808080十七、desaturate() 降低饱和度
1、函数作用
通过减少饱和度值使颜色变灰。
2、语法
desaturate(color, amount)3、参数说明
color：要降低饱和度的颜色值amount：饱和度减少值（0-100%）
4、返回值
返回降低饱和度后的新颜色。
5、示例
// 将颜色饱和度减少50%
desaturate(#f00, 50) // => #bf8080
// 将绿色完全去色
desaturate(#0f0, 100) // => #808080十八、saturate() 增加饱和度
1、函数作用
通过增加饱和度值使颜色更鲜艳。
2、语法
saturate(color, amount)3、参数说明
color：要增加饱和度的颜色值amount：饱和度增加值（0-100%）
4、返回值
返回增加饱和度后的新颜色。
5、示例
// 将颜色饱和度增加50%
saturate(#bf8080, 50) // => #f00
// 将灰色完全饱和
saturate(#808080, 100) // => #f00十九、complement() 互补色
1、函数作用
获取颜色的互补色（色相旋转 180 度）。
2、语法
complement(color)3、参数说明
color：要获取互补色的颜色值
4、返回值
返回颜色的互补色。
5、示例
// 获取红色的互补色
complement(#f00) // => #0ff
// 获取绿色的互补色
complement(#0f0) // => #f0f二十、invert() 反转颜色
1、函数作用
反转颜色的红、绿、蓝分量值。
2、语法
invert(color)3、参数说明
color：要反转的颜色值
4、返回值
返回反转后的新颜色。
5、示例
// 反转红色
invert(#f00) // => #0ff
// 反转白色
invert(#fff) // => #000二十一、spin() 旋转色调
1、函数作用
通过旋转色调值改变颜色。
2、语法
spin(color, amount)3、参数说明
color：要旋转色调的颜色值amount：旋转角度（正数为顺时针，负数为逆时针）
4、返回值
返回旋转色调后的新颜色。
5、示例
// 将红色顺时针旋转120度
spin(#f00, 120) // => #0f0
// 将红色逆时针旋转120度
spin(#f00, -120) // => #00f二十二、grayscale() 灰度
1、函数作用
将颜色转换为灰度（饱和度降为 0）。
2、语法
grayscale(color)3、参数说明
color：要转换为灰度的颜色值
4、返回值
返回灰度颜色值。
5、示例
// 将红色转换为灰度
grayscale(#f00) // => #808080
// 将绿色转换为灰度
grayscale(#0f0) // => #808080二十三、mix() 混合
1、函数作用
将两种颜色按指定比例混合。
2、语法
mix(color1, color2, weight)3、参数说明
color1：第一种颜色值color2：第二种颜色值weight：混合比例（0-1）
4、返回值
返回混合后的新颜色。
5、示例
// 按30%比例混合红色和蓝色
mix(#f00, #00f, 0.3) // => #b3004d
// 按70%比例混合红色和蓝色
mix(#f00, #00f, 0.7) // => #4d00b3二十四、tint() 色调
1、函数作用
通过混合颜色与白色来创建色调。
2、语法
tint(color, amount)3、参数说明
color：基础颜色值amount：混合比例（0-100%）
4、返回值
返回与白色混合后的新颜色。
5、示例
// 将红色与50%白色混合
tint(#f00, 50) // => #ff8080
// 将蓝色与20%白色混合
tint(#00f, 20) // => #3333ff二十五、shade() 阴影
1、函数作用
通过混合颜色与黑色来创建阴影。
2、语法
shade(color, amount)3、参数说明
color：基础颜色值amount：混合比例（0-100%）
4、返回值
返回与黑色混合后的新颜色。
5、示例
// 将红色与50%黑色混合
shade(#f00, 50) // => #800000
// 将绿色与20%黑色混合
shade(#0f0, 20) // => #00cc00二十六、luminance() 亮度
1、函数作用
计算颜色的相对亮度（WCAG 标准）。
2、语法
luminance(color)3、参数说明
color：要计算亮度的颜色值
4、返回值
返回颜色的亮度值（0-1）。
5、示例
// 计算白色的亮度
luminance(#fff) // => 1
// 计算黑色的亮度
luminance(#000) // => 0二十七、contrast() 对比度
1、函数作用
计算两种颜色之间的对比度比率（WCAG 标准）。
2、语法
contrast(color1, color2)3、参数说明
color1：第一种颜色值color2：第二种颜色值
4、返回值
返回两种颜色的对比度比率（1-21）。
5、示例
// 计算黑白对比度
contrast(#000, #fff) // => 21
// 计算红绿对比度
contrast(#f00, #0f0) // => 2.91二十八、transparentify() 透明化
1、函数作用
根据背景色调整前景色的透明度。
2、语法
transparentify(foreground, background, alpha)3、参数说明
foreground：前景颜色值background：背景颜色值alpha：目标透明度（0-1）
4、返回值
返回调整后的前景色。
5、示例
// 在白色背景上半透明红色
transparentify(#f00, #fff, 0.5) // => rgba(255,0,0,0.5)
// 在黑色背景上半透明蓝色
transparentify(#00f, #000, 0.5) // => rgba(0,0,255,0.5)更新日志
2025/8/24 08:17
查看所有更新日志
e7112-1于