This is definitely possible, but will probably require some amount of glue code.
A lot may come down to if you favor having the data accuracy in RGB or in RYB. Starting with RYB means that you'll have fine tuned the values, and would need to convert to RGB for the computer. Starting in RGB means you can do a lot more upfront visually, but the RYB accuracy may not be what you intended. You can also supply both values for the project to fine tune paint and computer displays.
There's always multiple ways to tackle a problem, but if you favor RYB, I'd probably do something like:
- Make animations for the R Y B W BL bars that go from 0 to 100, each on separate timelines
- Use the Additional HTML Attributes in the Identity Inspector to either hold the RYB color values, or hold an index to a javascript object which has the values
- On Scene Load, generate the color for each swatch by setting the CSS background-image for each element with color data
- Either use a group with overflow scrolling and style your own scrollbar via CSS for the scrolling, or entirely use Hype elements and have the scrollbar perform an on drag to control timeline that animates the swatches to look like a scroll
- Use an drag and drop library like this one: Hypespecific Drag and Drop Enabler
- On drop run some code that will change the dropzone to the specified color, and then also uses the Hype API to animate the R Y B W BL timelines to some value that maps a % to a time in seconds
I would see the biggest hurdles being:
- RYB to RGB color conversion. Since computers use RGB you'll need to find some code to convert the color spaces. (I'd also ask yourself why you actually want RYB and/or why not use CMYK which will yield better paint results?)
- Scrollable area that has drag and drop outside of the group, so your drag/drop may be dependent on that setup
- Swatch value entry if you want to do it manual could take a while