Auto color scheme generator

selul commented 2 years ago

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:

Figma

lmisch commented 2 years ago

+1 :)

JohnPixle commented 2 years ago

I'd start tackling this one at a later stage, but will just leave the thought here that we can take huge inspiration from the latest version of the Material Design: https://m3.material.io/styles/color/overview and how they have a tone palette for darker and lighter variants.

They seem to work this out is a similar logic as Marius suggests.

mghenciu commented 1 year ago

TDLR: the focus here was mainly on generating a Color Palette, using 2 different approaches (I attached the files for each example). We can extend this in future with a HUE customisable slider by users.

The idea behind this is to use HSL when generating color paletts, and the generator will act as an extension for the Color System in Neve (maybe TPC in future as a Stylekit Generator). Below a Figma prototype, how this could work in the initial version:

https://user-images.githubusercontent.com/52494172/214522491-40e053d2-7e15-43c8-b429-356bb22aca68.mov

Randomly generated colors

Using this approach, the color pallets are generated (almost) randomly, with some adjustment for the range of the values - to make sure a color is always dark or light. Files: random-HSL-v1.html.zip

https://user-images.githubusercontent.com/52494172/214526728-f368d1ce-7146-4657-a9a9-509187229689.mov

Accent based color palette

The second example is based on this idea from a Google UI challenge, and what it does is generating 3 palettes (dark, light, dim) where the palette is generated based on the main accent color. Adjusting the HUE of the main color, will also influence the other colors in the palette. Here's an example (more in Figma), where dark-bg: 1 (or Text Color) | site-bg: 2 | light-bg: 3

To test this, use this zip, and inside the dist folder use the template or index files, and press Space in browser to generate palettes. Files:gui-challengescolor-scheme-starterslider.zip

Going forward

Personally I prefer the second approach, as it's less random.

In terms of integration, we can initially ask users if they think this is useful, and we can add this in the Color System panel (maybe later in the import wizard). It's also possible to add this as a HUE slider for the accent color, meaning that if the user changes the hue in the color picker -> the colors would adjust. But only using HUE and HSL, because otherwise the CSS formulas that create other colors, won't work as expected. Another challenge is the fact that using the whole color picker, it's challenging to generate the palette, in cases where a user chooses a #000000 button.

Contrast Ratio Another challenge is the Contrast Ratio between the colors and text, especially between the button/primary colors. One potential solution here (requires some lines of code), is to have function that checks the min 4.5 contrast between primary and #ffffff colors, and if the ratio is not met -> regenerate the primary color.

Let me know your thoughts, when you have some time, no rush at all. looping in @JohnPixle

cristian-ungureanu commented 11 months ago

Hi there, @mghenciu! Thank you for all your research and for trying to give this Idea a shape.

To be honest, the idea of having this random doesn't sound too good and I would avoid it at all costs. Every user has some branding colors. Suggesting a randomly generated color wouldn't make this feature that useful.

What I would do is after the user selects "generate palette automatically" allow the user to select just the primary color of his site and generate the rest of the colors based on that, something like this: https://vertis.d.pr/v/fpz5V6

The button from your video that regenerates colors can randomly pick not the main colors but the rules that other colors are generated. We will have the base color but the secondary color will be the base color + a random luminosity between a range that we established. And every time you click regenerate, it will be another variation but from the base color.

Here's the code I've used:

:root {
    --primary-h: 100;
    --primary-s: 94%;
    --primary-l: 43%;

    --nv-primary-accent: hsl( var(--primary-h), var(--primary-s), var(--primary-l))!important;
    --nv-secondary-accent: hsl( var(--primary-h), var(--primary-s), calc( (var(--primary-l) * 0) + 35% ))!important;
    --nv-site-bg: hsl( var(--primary-h), var(--primary-s), calc( (var(--primary-l) * 0) + 95% ))!important;
    --nv-light-bg: hsl( var(--primary-h), var(--primary-s), calc( (var(--primary-l) * 0) + 50% ))!important;;
    --nv-dark-bg: #14171c;
    --nv-text-color: #393939;
    --nv-text-dark-bg: #ffffff;
    --nv-c-1: #77b978;
    --nv-c-2: #f37262;
}

The challenging part is to actually find a formula for secondary-accent, site-bg, light-bg, dark-bg etc. I've tried the previous code on some starter sites and they look good. Playing a bit more with those values might produce a nice output.

Let me know your thoughts.

mghenciu commented 11 months ago

Let me know your thoughts.

Yes, you are probably right @cristian-ungureanu . It's possible that may use-case was coming from a personal need, and that was: easily generate new Color Palettes for our demos.

But in a real case, you are right - probably users have a Brand color already (or at least an idea about it). Which means that if we add something like this, it should work something like:

ask user for a Brand color
if he doesn't want/have, we can offer a random color - autogenerated by us
the user clicks Generate Palette
the magic happens and he has a new color palette derived from his Brand color

maybe also a Regenerate option, which will try to find different palettes using the same brand color.

The Oxygen builder example, this one, Automatic CSS - are using a similar approach, where users have to choose a brand color.

Thank you 🚀

lmisch commented 7 months ago

I subscribed to this thread because I had a need to create color palettes for like 6 websites that need to match a corporate branding. I did it pretty much the way @cristian-ungureanu mentioned here: https://github.com/Codeinwp/neve/issues/3169#issuecomment-1750704907 with some additional magic for shadows and elevations (google material recommendations).

IMHO this would be an awesome feature for users who are not trying to find a good look but need to comply to a branding guide.

On a sidenote and a bit off topic: While trying to set up the palettes I found that, in practice, it is difficult for me to distinguish between usage of primary and secondary color. Often there seems to be something hurtful to the eye when trying to set a secondary color that is for example on the opposite side of the hue wheel. So in the end I mostly set primary and secondary to the same or similar color. Hovered links don't use a defined color anyway but reduce the opacity on hover ... which to me is an... interesting approach. Just my 2 cent. Keep up the great work!

Codeinwp / neve