Make top level duotone color selection more intuitive and consistent

[annezazu]

What problem does this address?

Currently, the initial duotone customization isn't quite clear since you have to click on the specific circles in order to customize the color rather than being able to select the whole color to then see the color picker. This came up in the FSE Outreach Program's All Things Media exploration:

I got stuck a little bit fumbling the changing the color on the duo-tone filter. I think it would have really helped me if the simple color picker was expanded from the beginning.

Here's a video demonstrating the problem as this is tricky to explain and I'm missing the correct terminology to describe this:

clickable.duotone.mov

Here's a quick visual as well showing how this can be confusing to have within the same feature:

Oddly the only other color experience that matches this is when you're messing with gradients which has the same small circle to then open a color picker. These two experiences (duotone colors and gradient colors) feel wildly different from a UX point of view (I can create new color points within the gradient and can move that point around whereas you can't do that with the duotone option):

What is your proposed solution?

Either remove the circle to select a color from duotone and/or allow the entire field to be clicked to then pop open the color picker. I'm not quite sure :) Will flag this for design.