Colour picker UI mockup

Just a quick user-interface concept mock-up part of Grasshopper 2.0 colour pickers. I’ve been thinking about how to expose a 4+ dimensional colour space on screen. Selected colour in the middle, N rays with either grips or cylinders representing each of the variables; red, green, blue, hue, luminance, saturation, alpha, cyan, magenta, yellow, key, tone, tint, chromaticity, … Possibilities are endless.

A UI like this would be primarily appropriate for modifying existing colours, not so much for picking them.

Rendered using Cycles, all edges done with Curve Piping. Axes distributed equally across the sphere using Grasshopper.


That makes my head explode just like your image… :stuck_out_tongue_closed_eyes:

Hi David,

That’s a really neat approach to a color picker/editor.

My thoughts went to what benefits 3D rays will have over a flat set of rays.

I imagine being able to rotate the picker and bring my controls of preference in front. That however would just be a nice UI trick but would not add real value of the 3D approach.

Next I imagined (some of) the rays to have fixed ends and I’d be able to drag the color sphere around in 3D. Only then the 3D space adds true value for the UI.

Image being able to fix certain rays’ ends. By dragging the color the values for that ray would change. So there’d be a relation between the color values and it’s 3D position. You’d be constructing a custom colorspace.

One could setup a configuration where translating the color over a 3D curve would create a gradient based on shifting relations to the fixed rays.

Make the rays exhibit some elasticity in how they influence the color and we might be able to get a glimpse of what the explosion of Mitchs’ head looked like. :wink:


1 Like

You’re absolutely right of course, it is -functionally- the same as a set of stacked 2D sliders. All types of colour picker I’m hoping to implement though have the same basic layout, with a set of channel sliders along the bottom and some type of geometry on top. So there’d be an RGB cube, an HSL(p) sphere, an HSV cylinder, etc. etc. and these exploded cylinders would just be the 3D geometry associated with the multi-dimensional approach.

(just some quick sketches)

Your idea of moving the centre colour around doesn’t work though. First of all this is a >3 dimensional space, and you can only move points in 2 dimensions using an input like a mouse or a touchscreen, and only in 3 dimensions if you also allow for camera navigation. Furthermore these 6 or 7 or 8 dimensions are not distinct, they are correlated. If you change the amount of red in a colour, you will also change the hue, saturation and luminance values.

Mostly, I just think it’s a fun way to expose a whole bunch of colour modification operations in one go.