Skip to content

adjustSaturation

在 HSL 色彩空间中精确调整颜色的饱和度。

示例

设置绝对饱和度值

typescript
// 将红色的饱和度直接设置为 0.5
adjustSaturation('#ff0000', 0.5)
// => { mode: 'hsl', h: 0, s: 0.5, l: 0.5, alpha: 1 }

// 将饱和度设置为 0,颜色变为灰色
adjustSaturation('#ff0000', 0)
// => { mode: 'hsl', h: 0, s: 0, l: 0.5, alpha: 1 }

使用函数进行相对调整

typescript
// 将当前饱和度降低一半
adjustSaturation('#ff0000', s => s * 0.5)
// => { mode: 'hsl', h: 0, s: 0.5, l: 0.5, alpha: 1 }

// 在当前饱和度基础上增加 0.2,并确保不超过 1
adjustSaturation('hsl(0, 50%, 50%)', s => s + 0.2)
// => { mode: 'hsl', h: 0, s: 0.7, l: 0.5, alpha: 1 }

签名与说明

typescript
/**
 * 调整任意有效颜色的饱和度。
 *
 * 此函数会先将任何输入颜色智能地转换为 HSL 色彩空间,
 * 然后再对饱和度 (S) 通道进行操作。
 * 最终返回的饱和度值将被限制在 [0, 1] 的有效范围内。
 *
 * @param color 基础颜色字符串(如 '#FF0000')或颜色对象
 * @param adjuster 一个数字或一个函数来修改饱和度:
 *        - `number`: 设置一个绝对的饱和度值 (0 到 1)。
 *        - `(currentSaturation: number) => number`: 接收当前饱和度值并返回一个新值的函数。
 * @returns 一个新的、饱和度被调整后的 HSL 颜色对象,如果输入无效则返回 null
 */
export function adjustSaturation(color: string | EsdoraColor, adjuster: number | ((currentSaturation: number) => number)): EsdoraColor | null

注意事项与边界情况

  • 关于饱和度范围: 新的饱和度值将被自动限制(clamp)在 0 (灰色) 到 1 (最鲜艳) 的有效范围内。任何超出此范围的值都会被修正。
  • 关于无效输入: 当 color 参数为无效颜色字符串、nullundefined 或无法解析的对象时,函数将返回 null
  • 关于未定义饱和度: 如果输入的颜色对象中饱和度 (s) 值为 undefined,它将被当作 0 来处理,并在此基础上进行计算。
  • 返回格式: 函数总是返回一个 HSL 格式的颜色对象 ({ mode: 'hsl', ... }) 或 null。你需要使用其他函数(如 formatHex)来将其转换为更常见的格式。

相关链接

基于 MIT 许可证发布