Auto color scheme generator

Description:

This is just for brainstorming right now but I think it's a topic that is worth exploring in order to offer more flexibility for colors with less work for site creators.

The challenge is if we can restrict this to only 4 colors and use HSL manipulation to extend to more of them but using the same baseline colors:
I.e: we would use 4 colors for Primary/Secondary/Accent and Base and each one will have automatically generated 4 shades as light, ultra-light, dark, ultra-dark as well as some transparency variations let's say 20%, 40%, 60%, 80%, and a complementary color. Basically, each one of those Individual colors will generate additionally 9 more color variants but they will be controlled from the same base color.

I.e if I use the color variant of Ultra Light - Primary somewhere and I change the Primary, the Ultra Light will change automatically too.

Let me know your thoughts @Codeinwp/design-team @abaicus

References:

• https://wordpress.org/support/users/atelieruldeweb/topics/
• https://www.youtube.com/watch?v=1Ta8_OhKY7k

Figma

Start by reviewing the issue description and the linked Figma design to understand the proposed color options and generated variants. Because the issue is explicitly for brainstorming, clarify the desired scope and acceptance criteria before implementation; done should mean an agreed design and implementation plan.