adjustHsl()

The adjustHsl function allows you to adjust the HSL (Hue, Saturation, Lightness) values of a color object. This function returns a new Spectrum instance with the updated HSL values.

Usage

import Spectrum, { adjustHsl } from '@snipshot/spectrum';

const color = new Spectrum('hsl', [200, 0.5, 0.6, 1]);

const adjustedColor = adjustHsl(color, {
  hue: -20, // Adjust hue by -20 degrees
  saturation: 0.1, // Increase saturation by 10%
  lightness: -0.05 // Decrease lightness by 5%
});

console.log(adjustedColor.hsl); // { h: 180, s: 0.6, l: 0.55, a: 1 }
console.log(color.hex === adjustedColor.hex); // false

Parameters

adjustHsl(colorObj, options)

Parameter	Type	Required	Valid range	Description
colorObj	Spectrum instance	true	-	The Spectrum instance representing the color you want to adjust
options.hue	number	false	[-360; 360]	The amount by which to adjust the hue value
options.saturation	string	false	['-100%'; '100%']	The amount by which to adjust the saturation value. Should be provided as a percentage string.
options.lightness	string	false	['-100%'; '100%']	The amount by which to adjust the lightness value. Should be provided as a percentage string.
options.alpha	number	false	[-1; 1]	The amount by which to adjust the alpha value

Return Value

The adjustHsl function returns a new Spectrum instance with the adjusted HSL values.

Examples

Adjust all properties

import Spectrum, { adjustHsl } from '@snipshot/spectrum';

const color = new Spectrum('hsl', [200, 0.5, 0.6, 1]);
const adjustedColor = adjustHsl(color, {
  hue: -45,
  saturation: 0.3,
  lightness: -0.14,
  alpha: -0.32
});

console.log(adjustedColor.hsl); // { h: 155, s: 0.2, l: 0.46, a: 0.68 }

Adjust Hue

import Spectrum, { adjustHsl } from '@snipshot/spectrum';

const color = new Spectrum('hsl', [200, 0.5, 0.6, 1]);
const adjustedColor = adjustHsl(color, { hue: -20 });

console.log(adjustedColor.hsl); // { h: 180, s: 0.5, l: 0.6, a: 1 }