Scratchaddons: Browser colour selection

[Richienb]

Is your feature request related to a problem? Please describe.

I'm always frustrated when I have to use colours from another project and I have to convert them to fit within Scratch's proprietary colour system.

Describe the solution you'd like

It would be useful if the default colour selection box asking for Colour, Saturation and Brightness is proxied by the browser colour selection box which automatically converts them to the format.

Describe alternatives you've considered

See Converting Scratch Colours for the workarounds I used.

Additional context

Implementation details:

From the hex colour returned by the <input type="color"> element, convert it to HSV (Hue, Saturation, Value) so that Math.round(hue * 5 / 18) is Colour, Saturation remains the same and Value is Brightness. This allows us to find the closest possible colours.

We could additionally add an option to suggest the closest colours that don't have to be rounded by computing the Colour as 5 * Math.round(hue / 18). This would be useful if custom image sprites are used that have colours not normally selectable so that it can still be used in the is touching colour block without issues.

Accuracy (red: closest colours, blue: without rounding issues):

[WorldLanguages]

It would be great so simply add a hex color input.

[Richienb]

@WorldLanguages An <input type="color"> element produces a hex input from a multitude of colour selection options.

[jeffalo]

i think an input colour would be neat, but having a hex input seems also good because the user's browser/os's colour picker could be lame and not have a hex input. im looking at you windows 10 pre chrome input redesign...

[GrahamSH-LLK]

But, this extension only caters to Chromium browsers and firefox.

[easrng]

But, this extension only caters to Chromium browsers and firefox.

Well technically it should work everywhere with WebExtentions.

[jeffalo]

jeffalo high quality mockup time

credit to world languages for introducing me to this wonderful colour

[Richienb]

I managed to prototype a colour picker: https://codepen.io/Richienb/pen/YzqgLbO

The biggest challenge in implementing browser colour selection is proxying the selections to the actual colour selector. We need to somehow simulate mouse presses that trigger the sliders which is something I haven't been able to do yet. If someone is able to do this, I'll be able to implement the rest of this addon.

[lisa-wolfgang]

Perhaps add tabs to the color selector that let you choose between HSB, RGB, or Hex.
It would also be really nice to be able to type in the values for HSB and RGB, or even just Scratch's proprietary color system, rather than getting that darn slider just right. (And the numbers that do display are rounded -- so no two colors are ever quite the same when using the sliders.)