Chromotome: A 3D Interface for Exploring Colour Space1
Giovanni Moretti, Paul Lyons, and Mark Wilson
Institute of Information Sciences and Technology, Massey University, Private Bag
11-222, Palmerston North, New Zealand,
P.Lyons/[email protected]
Abstract. When continuous 3D shapes or enclosed structures, such as solid
objects or skeletons, are mapped onto a 2D screen, simplifications such as hulls
and wire frames are suitable visualization tools, because most or all of the
information is concentrated along discontinuities that occupy only a small
proportion of the space. Visualizing a colour space is more difficult. Colour
spaces are three-dimensional solids with no discontinuities, and every point in
such a space represents a unique colour. A colour space visualization tool must
therefore facilitate the exploration of a solid, continuous, three-dimensional
shape. Here we describe Chromotome, a software tool that has been developed
for this purpose. Chromotome provides a cutaway view of a spherical colour
space, and has controls for rotating the space (to alter the hues displayed), for
altering the shape of the cutaway, and for visualizing sets of colours positioned
according to simple geometrical relationships within the space.
1 Introduction
The authors are developing the Colour Harmoniser [1], a tool that assists users to
select groups of harmonious colours for use in computer interfaces. It calculates an
abstract colour scheme, based on several parameters associated with the components
of the interface. The Colour Harmoniser needs an interface component that will
enable the user to visualise and explore the three-dimensional colour space. The
present paper describes Chromotome, the first prototype of that component.
1.1 The Colour Harmoniser
Conventional heuristics for choosing colour scheme are often represented as simple
rigid wireframe shapes overlaid onto a colour circle. The wireframes correspond to
common rules for colour harmony (lines represent the rules for monochromatic,
achromatic, and complementary colour schemes, a Y shape represents split
complementary colour schemes, and an oval represents polyadic colour schemes,
particularly triadic and tetradic schemes [2]). They can be thought of as a rigid
1
In full colour at www-ist.massey.ac.nz/pylons/papers/Moretti Lyons and Wilson 2004.pdf
2
Giovanni Moretti, Paul Lyons, and Mark Wilson
framework for a sort of multi-barrel eyedropper (see Fig. 1);
the colours selected are the colours at the points of
intersection between the wireframe and the colour circle.
The Colour Harmoniser presents an abstract colour scheme as
a set of nodes on a rigid wireframe in a three dimensional
colour space. The user can manoeuvre the wireframe within
the colour space until, in the user’s opinion, the positions of
the nodes correspond to a satisfactory set of colours – a
Fig. 1: A wireconcrete colour scheme – for the interface components. The
frame as a "multidevelopment of the Colour Harmoniser has been influenced
barrel eye-dropby the following considerations;
per"
• Technological progress (specifically, the development of
computers) has made it feasible to use a sophisticated mathematical model of
colour harmony to support the generation of a harmonious set of colours.
• Choosing colours is the business of the user, not a mathematical model, so the
user should have access to an interface in which prospective sets of colours that
are consistent with the model of colour harmony can be seen in the context of
the complete colour space, and easily changed.
• Distances in the colour solid and the wireframe used to represent colour schemes
should maintain a constant proportionality with respect to human perception of
colour differences.
• Choosing a new set of colours should be nearly instantaneous, and the user
should instantly see feedback in the real interface.
1.2 Problems with current tools
Elsewhere [3], we have noted that the interfaces to currently available tools for
selecting harmonious sets of colours [4-11] suffer from a number of drawbacks. First,
the colour wheels they use have significant brightness variations, caused by using
naïve algorithms for generating the colours on the wheels. These algorithms fail to
take into account the fact that CRTs produce the primary colours (Red, Green and
Blue) by turning on a single phosphor, and the secondary colours (Cyan, Magenta,
and Yellow) by turning on two phosphors [12]. Consequently, the secondaries they
display are significantly brighter than the primaries. When wireframes are overlaid on
these colour wheels and rotated to produce colours, they will produce colour sets that
vary in brightness.
Secondly, their two-dimensional colour wheels do not display the full threedimensional structure of the colour universe. Though there is still argument about
exactly how colour sensations derive from physical input [13], the human perceptual
system is generally considered [14, 15] to derive a three dimensional colour sensation
via a chain of conversions. The spectral power distribution of light entering the eye is
converted by cones in the retina into (R, G, B) amplitude signals bounded by the
maximum cone response. Still in the retina, ganglia detect linear combinations of the
(R, G, B) signals and use these to modulate the frequencies of three electrical spike
sequences that can be modelled as a (dark-bright, red-green, yellow-blue) triple in a
Cartesian coordinate system.
The pulse trains generated by the retinal ganglia enter the brain where they are
transferred via the Lateral Geniculate Body to the visual cortex. There they are
Chromotome: A 3D Interface for Exploring Colour Space
3
converted into a percept that is usually represented as a point in a bounded 3D space
with pair of polar axes (rotational angle representing hue, and radial distance
representing saturation) and a Cartesian axis (representing brightness), orthogonal to
the first two. In the conversion from gangliar space to perceptual space, the
orthogonal (red-green, yellow-blue) duple has become the polar (hue, saturation)
duple, and the angular hue dimension of the space roughly corresponds to the
periphery of a colour conventional wheel.
Our level of understanding of this chain decreases at the later stages, but there is
evidence that hue and saturation are genuine psychological constructs [13]. Each (hue,
saturation, brightness) triple in this three-dimensional coordinate system corresponds
to a unique colour, except that, at the extremes of the brightness scale, our perception
of high saturation colours diminishes, so an accurate representation of the human
colour space needs to come to a point at the extremes of light and dark. Colour space
is thus often modelled as a sphere or bicone [12].
These symmetrical models broadly conform to our knowledge of human colour
perception, but their symmetry, though appealing, has no empirical basis. It is, in fact,
contradicted by measurements of human response to colour [16]. In a colour space
based on empirical measurements of human subjects, full saturation yellow is
positioned above and out from the “equator” (that is, it’s brighter and strongly
coloured), whereas full saturation blue and red, being less bright and less strongly
coloured, occur below and set in from the equator. These corrections to the symmetric
“ideal” result in significant warping of both biconical and spherical models.
Of the currently available tools [3] that provide a visualisation of the colour space,
most show it as a simple circular colour wheel, and incorporate only the full
saturation hues that are dispersed around the “equator” of the colour solid. The more
ambitious show a disc with full saturation colours at the periphery and a range of less
saturated colours inside, decreasing to grey in the centre. One tool distorts of the skin
of the colour sphere, stretching it out to form a disc, with the white pole in the centre,
and as the radius increase it successively displays the tints, the full saturation colours,
the shades, and finally black distributed around the periphery.
A colour selection algorithm that relies on choosing colours where a wireframe
intersects these circles and discs is inherently restricted; the vast majority (over 99%)
of perceivable colours are not represented on the colour wheel or disc, so they cannot
form part of the colour scheme. A number of the applications provide slider controls
that allow the user to alter the saturation and brightness of the colours after their hue
has been selected but this is no substitute for seeing them in situ in a high quality
visualisation. It’s precisely the colours that aren’t represented in the simple colour
wheels – medium and low saturation, intermediate, nameless colours (artists cheat by
calling them coloured greys) – that people find most difficult to visualise, to specify,
and to distinguish between, but which combine well in colour schemes.
A final problem with the colour selection applications that we have surveyed is that
none maintain perceptual uniformity - a pair of fixed points on a wireframe should
always appear to have a colour difference of the same magnitude when the wireframe
is rotated. As described by Munsell [16], harmonious sets of colour schemes can be
automatically produced from conventional monochrome, complementary, split colour
complementary and similar heuristics, but for these heuristics to work reliably, they
need to take human perception into account. Then, when a wireframe is used as a sort
4
Giovanni Moretti, Paul Lyons, and Mark Wilson
Fig. 2: The three top images show external views of the L*u*v* colour solid; the
others show the Wilson Colour Cutaway at various rotations
of multi-eyedropper to select a set of colours with a defined geometrical relationship
in the colour solid, the colour differences between the members of the set will always
correspond to identical differences in colour in human perception. This will maintain
the differences between differently coloured objects. Mathematical interpolation
techniques will not reliably find harmonious sets of colours if distances in the space
are not consistently proportional to the only meaningful unit of colour difference, the
human JND (Just Noticeable Difference) [17].
Note that perceptual uniformity in colour selection does not have to be enforced
by displaying the wireframe in a perceptually uniform colour space (a colour space in
which a given distance d in any part of the space, will always correspond to a given
multiple of JND units). However, it can alternatively be enforced by displaying a
perceptually non-uniform space with a pleasing shape - a spherical space, for
example. This space will exhibit various distortions with respect to perceptual
uniformity at various locations; if equal distortions are applied to the parts of the
wireframe laid over the colour space, then any colours selected from the space by
virtue of their position under the wireframe will have a harmonious relationship to
each other in undistorted colour space. Although this may seem an unlikely way to
enforce perceptual uniformity, it avoids the extremely disconcerting shapes that
correspond to an accurate mapping of human colour perception.
An automatic tool for selecting sets of harmonious colours needs to work with a
mathematically tractable visualisation of the three-dimensional, perceptually uniform,
colour solid. The CIE L*a*b* colour solid is mathematically tractable and
approximately perceptually uniform. The tool should be able to project wireframes
representing colour heuristics onto the visualisation, and it should be easy to
reposition them.
Chromotome: A 3D Interface for Exploring Colour Space
5
2. The Three 3D Colour Selection Interfaces
We have implemented three experimental interfaces for this task.
2.1 The Wilson Colour CutawayA
The first of these, the Wilson Colour CutawayA [18], Fig. 2, shows a cutaway view of
the L*u*v* perceptually uniform colour space [12] based on an image in Faber
Birren’s encyclopaedic Color [14]. The cutaways produced internal surfaces onto
which the wireframes representing colour heuristics were to be projected, and the
cutaway could be rotated to allow a wireframe to be positioned anywhere in the space.
However, the highly asymmetrical shape of the L*u*v* space caused an unexpected
problem; when the cutaway view was rotated, various projections on the shape
appeared and disappeared from view. The profile alterations that resulted from this
(the static images in Fig. 2 convey a muted impression of the extent of this problem)
were so distracting as to render the Wilson Colour Cutaway unsuitable.
2.2 Wilson Colour CutawayB
A second version of the Wilson Colour Cutaway that attempted to make use of the
L*u*v* space was also abandoned. This involved trimming off the projecting corners
to display only the spherical core of the L*u*v* solid. Unfortunately, the original
shape of the L*U*V* colour solid is so bizarre that when only the spherical core was
retained, very little remained. And a partial trim, to retain a larger proportion of more
highly saturated colours, still produced strange and disquieting shapes when rotated.
2.3 Chromotome
In Chromotome2, the third interface, we have therefore taken a step back from our
original plan to display the highly irregular perceptually uniform colour solid.
Chromotome is based on a more conventional, non-perceptually uniform, rotationally
symmetric colour sphere.
Chromotome was developed in accordance with the second consideration listed
for the Colour Harmoniser in the introduction - that the user should have access to an
interface in which prospective sets of colours that are consistent with the model of
colour harmony can be seen in the context of the complete colour space, and easily
changed.
This presented us with two problems. First, while the human perceptual system
can be considered to treat colours as occupying a three-dimensional space, ordinary
users and application developers do not have a conscious understanding of the shape
of the space, nor the meaning or disposition of the axes within the space. Secondly,
these target users do not generally wish to learn colour theory or to develop an indepth familiarity with colour spaces. Consequently, Chromotome has been designed
to expose and “explain” the colour space.
2
The name Chromotome is formed from χρώµα, chroma, color + τοµος tomos, a cut, because
the visualization implemented by the tool shows a cutaway view of the three-dimensional
colour space.
6
Giovanni Moretti, Paul Lyons, and Mark Wilson
2.4 An Exploratory Visualisation
Providing colour users with a visualisation
of the interior of a 3D colour solid is a
challenging
task.
Generally,
when
continuous 3D shapes or enclosed structures,
such as solid objects or skeletons, are
mapped onto a flat screen, simplifications
such as hulls and wire frames are suitable
visualization tools, because most or all of the
information in the space is concentrated
along discontinuities. We visualise the
“space” by visualising the discontinuities,
which occupy only a small proportion of the Fig. 3: The Chromotome shows a
space. Colour spaces are different. The cutaway view of a colour solid
three-dimensional volume of a colour space
is information-rich, and feature-poor. It is
information-rich because each point in the space specifies a unique colour, and
feature-poor because there are no discontinuities that can be visualised as edges. A
colour space visualization tool must therefore facilitate the exploration of the interior
of a solid, continuous, three-dimensional shape.
The Chromotome has been designed to facilitate this task. The cutaway view is
designed to give the user an idea of how the colours vary in each of the three
dimensions of the space, so that a single control can be used to cycle through all the
possible colours in the space. The cutaway view of the solid has been dissected so that
it reveals a significant portion of a familiar colour wheel (the “equatorial plane” in
Fig. 3). This colour wheel is tilted about at 800 to the plane of the screen (though the
user can reorient it), so it only occupies a small amount of screen area. The remainder
of the display shows vertical cuts through the colour solid up to the White Pole and
down to the Black Pole. These show brightness and saturation variations, and, by
rotating the hues – a simple mouse interaction - the user can show all possible colours
on the vertical surfaces of the visualisation. The colour wheel puts the vertical faces
into context, and the vertical faces allow the user to see and choose “difficult” colours
in an intelligent fashion. To aid visualisation, a real-time animation, controlled by the
mouse, allows the user to view the colour solid from any angle. The slight tilt in Fig.
3 is intentional – the image is easier to interpret when viewed from a slight angle.
The cutaway visualisations also help with the second problem mentioned above that colour spaces are more difficult to map onto a flat screen than many other threedimensional shapes, because colour spaces are information-rich, and feature-poor.
However, even with the visual cueing given by the cutaways, it has been found
beneficial to accentuate the edges with lines. The featurelessness of the space makes
the edges difficult to deduce when the image is not being animated. Lines are a simple
and effective aid.
Chromotome: A 3D Interface for Exploring Colour Space
7
Fig. 4: The cutaway angle can be varied to reveal differing parts of the inside of
the colour space, and the space can be viewed from any angle.
2.5 Controlling the Chromotome Visualisation
The user has three ways of controlling the Chromotome interface; altering the
viewing angle by rotating the solid, exposing different colours by rotating the colours
within the solid, and changing the angle of the cutaway.
The user rotates the colour solid by dragging on the window surface with the left
mouse button, and rotates the colour within the solid by dragging on the window
surface with the right mouse button. Opening and closing the cutaway angle is
currently associated with the thumbwheel on the mouse.
These controls are primitive but the initial investigation has been into the value of
the cutaway visualisation. Even with the simplistic controls, the insight and
naturalness of using an interactive and animated 3D visualisation as a way of
selecting colours has been immediately apparent.
2.6 The Chromotome Geometry
The cutaway visualisation originally produced by Birren lacks a flat surface for
displaying the wireframes for split complementary and polyadic colour schemes. A
central elliptical region was added to act as a surface, both to “support” the wireframe
and to give context to the colours selected by the wireframe. This region (shown in
Fig. 3) is created by scooping out the horn that projects up from the “equatorial plane”
to form a cutaway that resembles a Sydney Opera House roofline.
Handles on the central ellipse allow it to be tilted from left to right, and from front
to back (see Fig. 5). When it is tilted, the “equatorial plane” is redrawn to be coplanar
with the ellipse (so strictly, the plane is only equatorial when the ellipse is horizontal).
The outer surface of the solid has been maintained as a sphere. This is reassuringly
familiar, and when the internal oval is tilted or rotated, disconcerting shape changes
like the ones produced by the Wilson Colour Cutaway are avoided. It also provides a
larger display surface for the vertical faces to display the intermediate (internal)
colours than a biconical projection.
8
Giovanni Moretti, Paul Lyons, and Mark Wilson
Fig. 5: The angle of wireframe can be tilted from left to right and from front to
back
2.7 Using the Chromotome for Harmonious Colour Schemes
The Chromotome interface has been designed to allow the Colour Harmoniser to
show colour scheme wireframes on the central ellipse. The axes of the ellipse can be
given any orientation within the space, and the surface can display linear, Y-shaped
and oval wireframes. Thus any type of harmonious colour scheme, involving colours
from anywhere within the space, with any orientation, can be generated.
Colour harmony selectors that use a wireframe overlaid on a simple colour wheel
usually generate a restricted set of colours. For example, a split complementary
wireframe will commonly generate a colour scheme with three colours, corresponding
to the intersection points between the wireframe and the colour wheel. Sometimes a
separate palette of colours is generated by the application, but the user does not have a
great deal of control over their colour relationships. Because the Chromotome shows
the intermediate colours that the wireframe passes through, it will be possible to put
an arbitrary number of eyedroppers anywhere along the wireframe and select as many
colours as are necessary for the interface. Similarly, the Chromotome allows the ends
of the wireframe to occur at low or high saturation colours, so the user has a much
greater degree of control of the appearance of the selected colours. The orientation of
the ellipse can be altered quickly and simply to update a complete colour scheme.
The images in Fig. 5 show the Chromotome in use. The wireframe illustrated is
the Y-shape of a split-complementary colour scheme, with an additional colour being
selected from the midpoint of each arm of the Y. Thus the Chromotome is being used
to select six colours. As the user changes the orientation of the wireframe, the six
selected colours are displayed continuously, in a palette in the upper left corner of the
window.
Although the wireframe and the ellipse could be positioned within the colour
space independently, fixing the wireframe on the ellipse reduces interface complexity
(there are fewer degrees of freedom) and provides context for the colour selected by
the wireframe. Tilting the oval front-to-back produces schemes with varying lightness
(Fig. 5). Altering the overall size of the oval enables colour schemes of varying
saturation to be created.
Two handles (the two dark dots on the edge of the oval in Fig. 3) control its aspect
ratio and its tilt. One handle enables the user to change the size and aspect ratio of the
oval from a 9:1 ellipse to a circle; the other alters the front-to-back and sideways tilt.
After only a few minutes of experimenting, naïve users can use these controls to
vary a colour scheme in a sophisticated way, without endangering the harmony of the
scheme.
Chromotome: A 3D Interface for Exploring Colour Space
3
9
Perceptual Uniformity
The wireframe metaphor is supported by the
mathematical technique of interpolation; to
generate colours at intermediate points along
a wireframe, the Colour Harmoniser
interpolates between the colours at the ends of
the wireframe. In order for the intermediate
colours to appear to fall directly between the
colours at the endpoints, the interpolation
should occur in a perceptually uniform space
Fig. 6: A straight line in L*a*b*
such as the CIE’s L*a*b* space.
space becomes a curve in the
The Chromotome displays a spherical
Chromotome’s colour space
colour space. Fig. 6 shows how a linear
interpolation in L*a*b* space (in other words, a perceptually linear wireframe)
appears when displayed in this coordinate system. The Colour Harmoniser will
achieve perceptual uniformity by mapping straight wireframes in perceptually
uniform L*a*b* space into bent wireframes in non-uniform spherical space.
The wireframe for a triadic colour scheme, for example, is an equilateral triangle
in L*a*b* space. When projected onto the spherical colour solid, the triangle would
no longer be equilateral, and would change continuously as the cutaway rotated
beneath it, but a projection back into the perceptually uniform colour space would
always be congruent to the original equilateral triangle. Unfortunately, in the spherical
visualisation space, the triangle is generally non-planar. This will be addressed by
sculpting away the surface of the ellipse where the colour dips below the plane.
4
Conclusion
Chromotome is being developed in two stages. Stage I – discussed in this paper - has
resulted in an interface component that shows a wireframe in a cutaway view of a
colour solid. It has controls for orienting the solid, and for altering the cutaway shape.
The wireframes are perceptually non-uniform shapes; a straight line, a Y, or an ellipse.
In Stage II, the wireframes will be distorted in the display space to conform to a
perceptually uniform space, and the cutaway view of the colour solid will become a
“sculpted” visualisation that conforms to the shape of the wireframe.
This phased development has allowed us to assess the general concept of the
cutaway as a tool for visualising and exploring the colour space, before tackling the
more complex programming associated with real-time sculpting of arbitrary curves.
The cutaway view reduces the difficulty of exploring information-rich, featurepoor colour spaces, and makes it possible to orient wireframes anywhere in the space.
The freedom and flexibility afforded by the interactive 3D visualisation are difficult
to convey in a written document, but are readily apparent with a few minutes of use.
The Chromotome display allows the user to explore a large number of possible
harmonious colour combinations rapidly.
10
Giovanni Moretti, Paul Lyons, and Mark Wilson
Although the interface has a large number of degrees of freedom, the immediate
visual feedback helps maintain consistency between the state of the software and the
user’s mental model. More sophisticated, intuitive, pop-up handles have been
designed for addition to a future version of the Chromotome. Space restrictions
preclude their description here.
References
1.
Moretti, G., Lyons, P.J. Colour Group Selection for Computer Interfaces. in Proc
Conf Human Vision and Electronic Imaging (SPIE2000). 2000. San Jose, California.
2.
Itten, J., The Art of Colour; New York. 1973: New York: Van Nostrand Reinhold.
3.
Lyons, P. and G. Moretti. Nine Tools for Generating Harmonious Colour Schemes. in
Proc APCHI 2004 elsewhere in this volume. 2004. Rotorua, New Zealand: SpringerVerlag.
4.
Epstein, A., 2002, Color Schemer 2.5.1, downloaded from www.colorSchemer.com,
5.
HP, HP Colour Wheel downloaded from http://h40099.bbnstage.europe.hp.com/country/za/eng/color/art_hp_colour_wheel.html,
6.
HumanSoftware, SmartPicker.
7.
Pomeroy, P., Adaptive Software, 2002, ColorWrite downloaded from
http://www.adaptiveview.com/cw/,
8.
Software, O.J., Old Jewel Software, Painter's Picker 1.1.2, downloaded from
http://www.oldjewelsoftware.com/ppicker/,
9.
Triantafyllou, A., Life Software, ColorWheel downloaded from
http://www.lifesoftplus.com/Colorwheel/,
10.
Color Wheel Pro QSK Software Group, 2.0, downloaded from http://www.colorwheel-pro.com/,
11.
Oken, E., Patton, G., Can You Imagine Software, 1999, ColorSchemes 1.0.0.2,
downloaded from http://oken3d.com/html/tips.html,
12.
Travis, D., Effective Color Displays: Theory and Practice. 1991: Academic Press
1991.
13.
Jamseon, K., What Saunders and van Brakel chose to Ignore in Color and Cognition
Research. Commentary in Behavioural and Brain Science, 1997. 20(2): p. 195-196.
14.
Birren, F., Colour. 1980: Mitchell Beazley Arts House.
15.
Wyszecki, G. and Stiles, Color Science. 1967: Wiley.
16.
Birren, F., MUNSELL: A Grammar of Color. 1969: Van Nostrand-Reinhold.
17.
MacAdam, D.L., Visual sensitivities to color differences in daylight. J. Opt. Soc.
Am., 1942. 32: p. 247-273.
18.
Moretti, G., P. Lyons, and M. Wilson. Chromatic Interpolation for Interface Design.
in OZCHI 2000. 2000. Sydney, Australia.