search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
17.75k stars 2.65k forks source link

fix: react ColorSlider hue gradient #31238

Open yoonbuck opened 2 weeks ago

yoonbuck commented 2 weeks ago

The background gradient used by the hue slider of ColorPicker does not accurately represent a gradient through hues with constant saturation/lightness because it is created with 10 stops instead of the 6 primary/secondary stops needed to correctly represent the hue gradient using RGB interpolation.

In particular, the current gradient has incorrect muddy lightness dips around fuchsia and yellow and (less noticeable) lightness bumps around lime and blue.

Two horizontal rainbow gradients. The upper one has marks every tenth of the way along and is slightly different in the yellow and fuchsia areas than the lower one, which has marks every sixth of the way along.

Upper: current hue gradient (10 stops) Lower: correct hue gradient (6 stops)

Previous Behavior

Full color picker, with the hue slider resembling the top gradient above

New Behavior

Full color picker, with the hue slider resembling the bottom gradient above
codesandbox-ci[bot] commented 2 weeks ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.