Hexadecimal color text input

[fcatapano]

Hey @KaeganCasey, thanks a lot for your excellent work on this tool.

I was thinking that it would be a nice feature to have the opportunity to type in a hexadecimal color code. I often have colour gradients from a Figma file (or other software), and it takes some time to do the conversion.

What do you think?

[KaeganCasey]

Hi @fcatapano I think this is a great idea! I'm not sure when I'll have the time to implement this but I will start looking into it now and see what it would take and how it would change the look of the component etc. One thing I would love some feedback on is the different options for where to put this feature:

1. I could add a text box on the "Settings" page that could take a hex code to initialize the key with when it is first created. This would be an easy approach but wouldn't help much with the two default keys on the ramp.
2. Add a hex code to each key param section on the "Keys" page. this is probably the most ideal but I might need a pulse button or something to tell it when to convert the hex to RGB.
3. I could make a new extremely simple component that could convert hex to rgb params and those params could be mapped to the different keys you care about either to set up the component initially or to change them later. I am kind of leaning towards this approach since it wouldn't complicate the UI for the existing metaRamp.

All that being said I have another component that I'm still testing and thinking about before I fully promote it to the community. It's a color manager that lets you save color palettes / gradients and then map them to an "Artwork Comp" which is just a component that has any RGBA custom parameters set up for it. This might work on it's own for your use case or even when combined with the metaRamp it can also be very useful.

I attached a toe file that would show you how to use both components together. Github wouldn't let me upload a .toe to this conversation so I had to zip it up.

Let me know your thoughts!! Thanks for the great idea! example_meta_ramp_color_manager.zip

[fcatapano]

Hey @KaeganCasey,

I appreciate your interest in my idea.

As a seasoned UX designer, option 2 is the one that makes more sense. Having a string with a "convert" pulse is easy to understand. I recommend ensuring that the hex decimal code works with or without the hash #.

With the help of ChatGPT (sorry, I'm not a great coder), I created this simple .tox that converts a CSS gradient into a Ramp. There may be something useful for you there.

I think the Meta Ramp Color Manger is excellent, I can see a lot of potential. The node position could be animated, too, like Colorama in After Effects.