Hue shift when adjusting saturation

[NateBaldwinDesign]

Description

Adjusting Theme or Color saturation results in unexpected hue shifts. This is especially visible for blues. This is due to the use of HSLuv for deriving new colors with updated saturation levels.

Steps to reproduce

1. Create a theme with a blue color scale:

  const color = new Color({ name: 'Color', colorKeys: ['#2451FF', '#C9FEFE', '#012676'], ratios: [3, 4.5], colorspace: 'CAM02' });
  const theme = new Theme({ colors: [color], backgroundColor: '#f5f5f5', output: 'RGB', saturation: 60  });

2. Take the output RGB colors from theme.contrastColorValues and paste them into a visual tool like Figma
3. Change the saturation of the theme to 60 by running

  theme.saturation = 60;

4. Take the output RGB colors from the updated theme using theme.contrastColorValues and paste them side-by-side in a visual tool like Figma
5. Observe the hue appears purple-ish for the desaturated colors when compared to the original

Expected behavior

Expect hue to be preserved in appearance.

Screenshots

Leonardo package and version

1.0.0-alpha.16

Environment

• Browser(s) and OS(s):

Additional context