Palettes: Custom base gray color modified when creating shades off it

[simeonoff]

When creating a palette with provided gray color, said color is being converted to HSL and the color components differ significantly from the original value.

[simeonoff]

@pmoleri Can you remind me what the original issue was. I logged this because you said something was off with the gray colors in app builder when comparing a 20.1 of Ignite UI for Angular with an older version of the library?

[pmoleri]

I can't remember the exact context.

I guess it means that these colors don't match:

although, this might be by design?

Perhaps it was difficult to make the Angular theme match the Web Components theme, in which you're supposed to set grays-500 directly.

[simeonoff]

I will check it out, thanks!

[didimmova]

Hello @pmoleri

When you pass a $gray color to the palette() function, the value isn’t used directly for every shade. Instead, the grayscale palette is generated by taking the hue (H) and saturation (S) from your color, while applying predefined lightness (L) values for each shade level. These lightness values come from the grayscale multipliers table, where every shade has a fixed lightness percentage.

As a result, --ig-gray-500 will not exactly match the color you provided. Its lightness is always set to 74%, regardless of the input color. This behavior is intentional — it ensures a consistent, evenly distributed grayscale scale, while still preserving the hue and saturation characteristics of your original color.

If you need access to the exact gray value passed into the custom palette, we can expose an --ig-gray-seed variable that preserves the original input color.