adobe / leonardo

Generate colors based on a desired contrast ratio
http://www.leonardocolor.io
Apache License 2.0
1.97k stars 108 forks source link

Hue shift when adjusting saturation #200

Closed NateBaldwinDesign closed 1 year ago

NateBaldwinDesign commented 1 year ago

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

image

Leonardo package and version

1.0.0-alpha.16

Environment

Additional context