From Ocean to Algorithm

The Material Color Wheel

The journey of color from its physical origins to its digital expression

By Shu

This project traces the journey of color from its physical origins to its digital expression, exploring how the vibrant blue of a seashell, the warm ochre of clay, or the deep green of malachite become pixels on our screens. Rather than mixing pigments or light, we gather the spectrum—hunting for each hue in its natural material form and mapping these tangible sources onto a virtual color wheel. It's an exploration of where digital color comes from before it becomes code.

A walkthrough of

Color Wheel

redyellowblue
The color wheel begins with three primary colours — red, yellow, and blue — that cannot be created by mixing other hues. These foundational colours exist in nature: red in cinnabar and ochre, yellow in sulfur and turmeric, blue in lapis lazuli and indigo. All other colours emerge from their combinations.
Secondary colours emerge when two primaries meet: orange from red and yellow, green from yellow and blue, and purple from red and blue. In nature, these appear in materials like copper patina for green, orpiment for orange, and amethyst for purple. They form the bridge between the primaries, completing the basic color wheel.
Tertiary colours arise when a primary color blends with its neighboring secondary, creating six nuanced hues: red-orange, yellow-orange, yellow-green, blue-green, blue-purple, and red-purple. These subtle gradations appear in materials like vermillion (red-orange), amber (yellow-orange), chrysoprase (yellow-green), turquoise (blue-green), ultramarine (blue-purple), and manganese minerals (red-purple). They fill the gaps between major colours, revealing the full spectrum's complexity.

What are

Hues, Saturation and Light?

Hue

h (hue): 0-360° = position on color wheel

s: 100%s: 90%s: 80%s: 70%s: 60%s: 50%s: 40%s: 30%s: 20%s: 10%s: 0%l: 50%l: 100%l: 90%l: 80%l: 70%l: 60%l: 40%l: 30%l: 20%l: 10%l: 0%redred-orangeorangeyellow-orangeyellowyellow-greengreenblue-greenblueblue-purplepurplered-purple
Hue is the pure color itself — the name we give it on the color wheel (red, blue, yellow-green). It's the color's essential identity, independent of how bright, dark, or intense it appears.
Saturation measures a color's intensity or purity — from vivid and brilliant (like pure lapis lazuli blue) to muted and grayish (like weathered driftwood).
Lightness (or value) describes how light or dark a color is, from nearly white to nearly black. Together, hue, saturation, and lightness form the HSL color model, allowing us to describe any color we can perceive.

A mapping to

Hues and Cues

Hues and Cues uses "hue" conceptually in its title but deliberately avoids technical HSL color notation in gameplay. Despite its designer, Scott Brady's two-decade background in specialty printing and color-matching systems, the game employs natural language and perceptual color communication rather than technical color theory.

The 480 colours of Hues and Cues

Each square below represents one color

480 Colors
Navigate through a maze of colours where 12 hues from the color wheel — primaries, secondaries, and tertiaries — hide in plain sight, waiting to be discovered.
Let's find them!
red
2
red-orange
3
orange
1
yellow-orange
2
yellow
3
yellow-green
3
green
2
blue-green
3
blue
0
blue-purple
2
purple
0
red-purple
1

The 480 colours in Hues and Cues aren't evenly distributed across the 12 hues. Some hues are richer than others: blue-green dominates with 83 colours, while orange contains only 25.

This uneven distribution reflects how we perceive and name colours in the natural world, where some regions of the spectrum are more densely populated with distinct, nameable hues.

The secret lives of

Colour

The Secret Lives of Colour by Kassia St Clair explores the physical, historical, and cultural origins of colours through their material sources — from crushed insects for carmine red to ground lapis lazuli for ultramarine blue. Unlike the abstract digital world of HSL values where colours exist as pure mathematical coordinates, St Clair reveals how each pigment has a tangible story rooted in geography, chemistry, and human labor. The book demonstrates that colours aren't just visual experiences but material substances with weight, texture, and scarcity — harvested, mined, synthesized, and traded across centuries. Where a screen displays hsl(0, 100%, 50%) with a click, St Clair shows us the alchemists, miners, and merchants who risked their lives to create that same red such as cochineal.

75 colours in 10 groups
White: 7 colours
lead_white
ivory
silver
whitewash
isabelline
chalk
beige
Yellow: 10 colours
blonde
lead-tin_yellow
indian_yellow
acid_yellow
naples_yellow
chrome_yellow
gamboge
orpiment
imperial_yellow
gold
Orange: 6 colours
dutch_orange
saffron
amber
ginger
minium
nude
Pink: 7 colours
baker-miller_pink
mountbatten_pink
puce
fuchsia
shocking_pink
fluorescent_pink
amaranth
Red: 7 colours
scarlet
cochineal
vermilion
rosso_corsa
hematite
madder
dragon's_blood
Purple: 6 colours
tyrian_purple
archil
magenta
mauve
heliotrope
violet
Blue: 8 colours
ultramarine
cobalt
indigo
prussian_blue
egyptian_blue
woad
electric_blue
cerulean
Green: 8 colours
verdigris
absinth
emerald
kelly_green
scheeles_green
terre_verte
avocado
celadon
Brown: 8 colours
khaki
buff
fallow
russet
sepia
umber
mummy
taupe
Black: 8 colours
kohl
payne's_gray
obsidian
ink
charcoal
jet
melanin
pitch_black

Between above two colour categories

Is there a mapping?

Can we map the material colours from The Secret Lives of Colour onto the conceptual colour names in Hues and Cues? If cochineal produces a specific red hue, does knowing its HSL value help us win the game by better identifying "scarlet" or "crimson" on the board? Or does the game deliberately resist such systematic mapping, relying instead on shared cultural intuition and linguistic consensus about what colors mean? This question explores whether technical color knowledge translates to gameplay advantage, or whether the two systems remain fundamentally incompatible.

Mondrian grid in 75 colors

Each rectangle below represents one color

Now, we map all 75 colours from The Secret Lives of Colour onto Mondrian-inspired blocks — a visual memory lane for navigating and memorizing these material hues and their subtle differences. Hover over each block to discover its name and explore similar colours that share the same hue family, each varying in saturation and lightness. It takes a sharp eye to spot the whites — chalk, lead white, isabelline, ivory, whitewash, beige, silver — hiding among their more vibrant neighbors on the white canvas, quietly anchoring the spectrum's extremes.
Among the 75 material colours from The Secret Lives of Colour, 9 colours match colours in Hues and Cues most closely. By "most matching," we mean colours that share the same hue value and have a saturation-lightness (SL) distance within 15 units. The SL distance is calculated using the Euclidean distance formula: √((s₁ - s₂)² + (l₁ - l₂)²). These matching colours are: rosso corsa with A7, cochineal with A8, amaranth with A16, scarlet with C7, amber with D3, fuchsia with D15, saffron with E4, cobalt with I25, scheele's green with P18.
Aside from rosso corsa, cochineal, and scarlet, lead-tin yellow also has the most matches with the same hue. In comparison to Hues and Cues, where the most colours fall into the blue and blue green colour groups, however in The Secret Lives of Colour, they don't have the most matches, as expected.

A final question

Is Blue More a Virtual Colour?

Does blue even exist in nature, or is it more a virtual colour — an optical illusion we've learned to perceive? Unlike red and yellow pigments that arise directly from chemical compounds, true blue pigments are remarkably rare in the natural world. This scarcity stems from chemistry itself: creating stable blue molecules is extraordinarily difficult, requiring specific molecular structures that nature seldom produces.

Most blue we encounter in nature isn't actually blue at all — it's an elaborate trick of light. Butterfly wings shimmer blue not from pigment but from microscopic structures that scatter light waves, separating blue wavelengths from the rest of the spectrum. Bluebells achieve their blue color through anthocyanin pigments—the same compounds that appear red or purple in other plants—but stabilized through complex chemical modifications involving aromatic acylation and metal ion interactions that shift the color toward blue. Even the sky and ocean owe their azure hues to light scattering rather than any blue substance. In this sense, much of blue in nature is an optical phenomenon — a color we see but that rarely exists as a tangible pigment

Yet rare exceptions do exist. Blue starfish produce genuine blue pigment called linckiacyanin, combined with yellow carotenoids, making them one of very few creatures with true blue coloration. Even more exceptionally, the obrina olivewing butterfly stands alone as the only known animal species that produces a true blue pigment called pterobilin. These genuine blues are so uncommon that when humans sought blue for art and decoration, they turned to equally rare minerals like lapis lazuli or laboriously extracted indigo from plants. The difficulty of creating blue — both chemically in nature and historically for human use — makes it perhaps the most elusive of all colors: omnipresent in our visual experience yet vanishingly scarce as actual matter.