Update Color Picker, with Opacity, to Present a Better UX

[MackenzieHartung]

Feature description

As a user I want to see a more intuitive/visual dynamic color picker (including opacity) when selecting colors, with opacity option, currently in the editor.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• AC1: A new display of the color picker will be implemented within the editor.
• AC2: The color picker will include opacity option
• AC3: The new color picker will display in all areas where color picker, and opacity, currently exist (e.g. page and blocks)

This is closely related to #3068 and #3213

Implementation brief

QA testing instructions

Demo

Changelog entry

[spacedmonkey]

This ticket needs more details. Currently the background options for a page, already has opacity options.

What sort of shade options would be required?

[pbakaus]

Jonny, should this work continue per your comment at #3181 (comment), or should we pause this as well?

Re: shades: This refers to shades of primary colors, see Chrome DevTools Colorpicker, where you can long press to bring them up (I worked on this one ;-) ):

[cathibosco]

Regarding opacity in editors - this simple editor is a very useful example as well and may be worth looking at closer. We have used it as a model in other issues like the color palettes mock ups...

You see the results in the page and it has some simple break points that I am not sure about the usability on.
Here is a look:

You can open a free account at https://miro.com and experience this.

[cathibosco]

Here is a low fi sketch of an option of moving the opacity selector up top in the panel so that it is not covered by added palette options... (brain storming here)

It might be useful to see the changes as they happen on the page and not just when you are using the color picker...

Editors have a palette they are working with, select a color and can set the opacity. Preview is live on the page.

[cathibosco]

The shade picker above from Chrome dev Tools is nice... I'll keep an eye out for more options on that.

[cathibosco]

More resources:

https://github.com/edelstone/tints-and-shades

https://maketintsandshades.com/#9165e0

[spacedmonkey]

Some examples of open source color pickers.

https://github.com/loicmahieu/material-ui-color-picker
https://github.com/casesandberg/react-color
https://github.com/react-component/color-picker

The material UI color picker looks the best of the lot.

[spacedmonkey]

React-color seems like the most usable of the packages I tested. material-ui-color-picker seems to based on React Color anyway.

Here is an screenshot of the new colour picker while I was testing. It even includes colors defined in the theme.

[spacedmonkey]

This slide is also available in react-color

[spacedmonkey]

Chrome based color picker also available.

[cathibosco]

"React-color seems like the most usable of the packages I tested. material-ui-color-picker seems to based on React Color anyway."

This looks very useful @spacedmonkey Nice discovery.

[spacedmonkey]

Interesting fact, gutenberg's color pickers, is based on React color.

[MackenzieHartung]

Shade Support was moved to a separate ticket: #3423