Moreover, color is commonly broken down into three-dimensional systems—RGB, CMY, HSB— luckily mirroring the three spatial dimensions. As such, color lends itself very well to spatial design.

Common Color Breakdowns

There exists many designs that simplify 3D color values into 2D interfaces, often forced to make various compromises based on context. Due to the 3D nature of this project, I have found myself in a unique position to push past the boundaries of flat color pickers.

2D Color Picker Variations

Unlike saturation and value that both have minimums and maximums, hue is a continuous value. With that in mind, I pivoted towards a cylindrical color-space design. This new design was comprised of a disc shaped cross section of color-space which I then mounted on a sliding axis of brightness. Goodbye color cube, hello color tube!

Once the form was established, the next natural step was to refine the interaction design to feel more responsive and natural. I introduced a grabbable focal point used to select color and gave it a 'hover' and 'grabbed' state. The subtle addition of caps to the end of the brightness axis imply boundaries to the color wheel's motion and add to the overall physicality of the interface. I then mounted the entire interface on a lazy-susan rotation tool to make viewing the interface from all sides easier.

Below is uncut footage of me utilizing the color selection tool to adjust colors on a model.

In many instances, however, linear interpolations of RGB values result in more favorable color combinations, making it the go-to approach. During my analysis, I charted the trajectory of a linear RGB blend in color-space, which led to some unexpected curve patterns.

To better understand this behavior, it is important to gain an insight into the interrelations between hue, saturation, and value and the RGB channels of a color. I visualized these relationships by charting the trajectories of colors when adding or removing red, green, or blue. This results in a shifting RGB axis that shows where the curve patterns originate from.

I also thought it would be interesting to explore compound gradients by adding more nodes of manipulation along each blend of color. Below is uncut footage of different ways to blend color as well as compound gradient manipulation.

As a next step, I sampled colors directly from the pixels of a photo into point clouds within color-space. This allowed me to analyze and visualize the color distribution of an image in a three-dimensional context. This opened up new avenues for understanding and exploration.

It's fascinating to note that this approach shares similarities with two familiar tools used in photo and film grading: the vector scope, which is used to visualize the distribution of color in an image, and the waveform monitor which breaks down the brightness of an image.

A Vectorscope

A Waveform Monitor

We can also use this visualization to better understand some of the more complicated qualities of an image such as contrast and lightness. To do this, I implemented a method of displaying a layer from Photoshop directly into color-space. This allowed for the visualization of any adjustments in real-time.

Each setting's effect on the color-space became readily apparent, with distinct regions being manipulated in unique ways. For example, modifying the hue value resulted in a rotational shift of colors around the center pole, while adjusting the contrast appeared to compress or expand the color spectrum in relation to some focal point.

I modified my visualizer to allow me to pinch and pull parts of the color-cloud and watch as the source image adjusts accordingly. Below is uncut footage of realtime, tactile image processing.