Investigate decorative/linear/illustration color scale

[Thunear]

Description:
We currently only offer a "functional" color scale based on contrast for the user, where the color is calculated based on luminance. This works well when colors need to work in a functional system with states and contrast boundaries, but does not create nice colors for more decorative purposes, like illustrations.

We have gotten a lot of feedback from users that they want to generate more linear / smooth color scales with steps. A quick thought is to generate the colors based on percentage based color space interpolation to create nice transitions. And maybe the user can select how many steps should be in the color scale so that the scale looks like for example: "red-1" ... "red-15" if the user selected 15 steps.

Current test approach:
After talking with a few users I want to test an approuch where the user can input the amount of steps for the scale and define the lightness boundaries with a slider.

Link to implementation: https://advanced-themebuilder.netlify.app/

[oddvernes]

There are many tools out there that does this, with a huge amount of customizability. If we made one as well, what woukld the advantages be? I suppose:

• convenience for the user when it right there and they don't have to figure out other solutions
• a possible option to use the same parameteres we use in the ui-scale but for a linear scale, so the colors don't stray away too much from the component colors.

[mimarz]

We talked a bit about this during during team meeting 11 march. Ideas of having different types of scales for people to choose from as an option for a color.

Napkin suggestion was users could select a color and choose color scale type; "semantic" (todays), "steps" or "single" generated for that color. Latter color scales such as "steps" and "single" would only be desgin-tokens (json) and CSS variables and in no way coded into components in code, but available for end-users to compose in their design however they wish.

[paalpaulsen]

I suggest adding a non-semantic, non-brand palette that covers the entire range of primary colours. The entire colour wheel, expanded with shades and tints, 100 - 900 where 500 is the main.