color picker overhaul

[F3der1co]

Reviewed guidelines

• [X] I have read and understand the suggestion guidelines

Checked for duplicate suggestions

• [X] I checked for existing similar suggestions

Summary

The color picker for color properties is currently using a browser built in dialog. For this reason it cannot be fully integrated into the engine and the following issues show up:

• you cannot copy paste values like the hex string
• you cannot access the color palette swatches from that dialog
• you cannot copy rgb as comma separated string to paste into expressions
• different between browsers

Possible workarounds or alternatives

not applicable

Proposed solution

A new custom color picker dialog with the following features , the one in the animations editor could be used as a base:

• pipette to sample the screen

• RGB, HEX and HSL values that can be set and copy pasted easily, ideally there is a way to copy paste rgb as a space separated string, so you can easily use the colors in expressions css etc. Maybe like the possition properties that can be expanded:

• access the color palette swatches (maybe folded away by default)

• color wheel, I really would prefer one like this instead of the one currently used in the animation editor:

It is important that this dialog stays relatively compact and off to the side so picking colors from the the screen is still easy

Why is this idea important?

A custom dialog allows for much better ux, better integration with c3 features and consistency across browsers.

Additional remarks

It would be great to make some of the changes to the color picker/palette in the animation editor too, so the same workflows can be used in both.

[KhaledFelfal]

The ability to copy rgb comma separated string to easy copy paste into expressions is a time-saver! I'd like to see it in the animation editor as well.