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