Color wheel Widget


First of all, amazing application so thank you to the developers.

Has anyone developed an alternative colour wheel widget rather than the RGB pad. The slider for selecting the colour is fiddly and I think it would be better having a large area for selecting the colour which integrates saturation and intensity in one pad like the one from lemur here:

Or just a standard colour wheel with white in the centre and black around the circumference, and the color in between.

Similar to this one but it goes to black around the outside:

It would also be good if you could have multiple points on the one pad so that you can set a colour range. And it would also be great if you could select between outputting RGB or HSI data.

Is anyone aware of something like this or know how I would start developing one myself.

Thanks in advanced.


There’s currently no equivalent to lemur’s canvas widget, although that’s something I’d like to implement someday. Using a combination of widgets I’ve been able to build one (hsv.json) but it’s sub-efficient and relies on a css property that only works in the browser (not in the built-in client).

Extending the built-in rgb widget with some extra modes could be nice, I’ll add it to the todo list but don’t expect it too soon, o-s-c is developed on my free time.


Thank you very much

an alternative design could be like in the GrandMA2 Lighting Console (Using The Color Picker - grandMA2 User Manual - Help pages of MA Lighting International GmbH), hue on top(x-axis), saturation on y-axis and brightness as a slider on the side

but still great that it is on the to do list to improve the color picker

i build my own color-picker by now, it looks basicly like the one from the GrandMA2 (see post above)


to create this i used a xy-pad and added the following css line:

    linear-gradient(rgba(255,0,0,0), rgba(255,255,255,1)),
        linear-gradient(to right, rgb(255,0,0), rgb(255,255,0), rgb(0,255,0), rgb(0,255,255), rgb(0,0,255), rgb(255,0,255), rgb(255,0,0));

to calculate the RGB Values i used the following code in the scripting area of the xy-pad:

var r, g, b, i, f, p, q, t, h, s, v;
    s = value[1];
    v = 1;
    h = value[0];
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;

this gives values between 0 and 1 for r, g and b so for my usecase i needed to multiply them by 127 to be able to send them out via midi (not shown in code)

i hope this might be helpful for other people


Hi I'm building a OSC interface for grand ma on pc, your Color Picker is awsome but i can't get it to work, any chance you might agree to share your OpenStageControl File?

this is a quick proof of concept i created based on the existing documentation (see above), it is made with version 1.21.0 and sends the values via OSC to the first three faders of an GrandMA3 onPC Setup on the same machine

For the Future, if you can not get something to work, provide more context on what is not working so people can help you, for example what part was not working? the CSS? the script? the sending? what have you tried to trouble shoot this? what where the results of those troubleshooting steps (for example logging to the console at various points of the script to see at which point it breaks)

color-picker.json (3.1 KB)