I get that you say it is for advanced users, but I think a "how to use this" link with a video in it that explained a few things would probably open it up to a lot more users.
There's so much more to do with tools like this, and I'm really glad to see it.
Yes, I liked the description of what it does, but at first glance am not sure what to do with the interface.
The general idea is:
- Drag the hue and saturation curves to customise the tints/shades of a color. Look at the UI mockup as you do this to make sure the tints/shades look good together.
- The color pairings used in the UI mockup all initially pass WCAG contrast checks but this can break if you tweak the lightness curve of a color. The mockup will show warning outlines if this happens. Click on a warning and it'll tell you which color pairs need to have their lightness values moved further apart to fix it.
- Once you're happy, use the export menu to use your colors in your CSS or Figma designs. You can use the mockup as a guide for which color pairs are accessible for body text, headings, button outlines and so on.
Does that make more sense? You really need to be on desktop as well because the mobile UI is more of a demo.
Sounds good, thanks!
Thanks for the feedback! Yeah, I appreciate there's a lot of background here around color palette design, UI design, color spaces, and accessibility so I likely need something like a video or tutorial. Another route is to have the tool start in a less freeform mode that handholds you through the process more.