From Ocean to Algorithm

The Material Color Wheel

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

By Shu

Nowadays, we have an abundance of colors to choose from in order to paint a painting, dye a food, or make a piece of cloth. It is easier to get confused while being provided with such a buffet of colors, and it seems that these colors are also free for grabs, especially when they exist digitally, for which they are just a click of rgba plus a few numbers away. Why are there so many different colors? Where do they originate from? How can we tell the subtleties of colors, for example, train our eyes to detect the nuances between Egyptial blue and Eletric blue? This project traces my train of thoughts and tries to connect the dots of my readings about colors along these years. It is an interactive summary that I constantly go back to in order to sharpen my eyes and refresh my words about colors. Let us start with color wheel first.

A walkthrough of

Color Wheel

When we mix pigments on a palette, we will end up with a black color if we add more and more pigments in. It is known as subtractive color mixing. And you will ask what is the additive color mixing? It is for the light. With a prism, you can create a rainbow of colors from the light, and with another prism, all the colors are added back into a white light. In this story, I'm exloring the subtractive color mixing with color wheel.

A color wheel arranges colors in a circle, traditionally organizing the three primary colors (red, yellow, blue) with secondary and tertiary colors blended between them. It is a tool to explore the definition of colors.

redyellowblue
The color wheel begins with three primary colors — red, yellow, and blue — that cannot be created by mixing other hues. These foundational colors exist in nature: red in cinnabar and ochre, yellow in sulfur and turmeric, blue in lapis lazuli and indigo. All other colors emerge from their combinations.
Secondary colors 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 colors 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 colors, 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. In painting, "color" and "hue" can be often used interchangeably, but there still exists a subtle difference. Color implies that it is made from a single physical pigment, whereas hue is an abstract concept which is just a name of the original color. A hue can be created by mixing other pigments to mimic the original color, or it exists purely in our mind perceptually.
Saturation measures a color's intensity or purity — from vivid and brilliant (like pure lapis lazuli blue) to muted and grayish (like weathered driftwood). To make a color less saturated, we can add its complementary color - the color sitting opposite it on the color wheel, e.g., mixing yellow into purple or blue into orange. It can effectively reduce its vibrancy without changing the hue too much.
Lightness (or value) describes how light or dark a color is, from nearly white to nearly black. It describes how bright a color is. When we randomly mix various colors on a palette, we get a darker color close to black. It is because the mixture of pigments absorb more "light", thus it has less lightness. However, some color is naturally brighter than others, such as yellow is conceived mostly brigher than blue.

A mapping to

Hues and Cues

Hues and Cues is a board game designed for people who are interested in color. In the game, the cue giver will draw a card, choose a color and try to describe the color with one or two words. Other players need to guess what the color is on a board with 480 colors. The cue giver cannot use the color name, such as pink, so it deliberately avoids a technical color notation in gameplay, but encourages an intuitive descripton of the color. 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 colors of Hues and Cues

Each square below represents one color

480 Colors

Navigate through a maze of 480 colors, where you can barely identify the differences among the neighbouring colors, let alone to describe each individual color with vivid words. In order to see trees through the forest, let us first try to classify them into 12 hue groups, including primary, secondary and tertiary.

In color wheel, hue is comprised of 360 degrees in a full circle. Similarly in HSL, hue ranges from 0 to 360, with 0 representing red, 120 for green and 240 standing for blue. The color picker is used to identify and assign each position a HSL value, then we cluster each position into 12 groups by measuring its distance between the hues.

First, let's find exactly where these 12 hues from red to red-purple hide!
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

Here we get 12 groups, and you can hover over each position to reveal its HSL value and group.

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

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

But how can we imply a color in the board with just a few words? And everyone knows what that color is? The concept of the true name is explored in the novel「A Wizard of Earthsea」by Ursula K. Le Guin. There is a creature known as the shadow that if you don't know its name, you can not defeat it. In order to win the game of Hues and Cues, we also need to attach a name to each color. So in the next chapter, we want to explore if we can give each color a name, where this name derives from the history, arises from a material, and is perceived in our linguistic consensus.

The secret lives of

Color

「The Secret Lives of Colour」by Kassia St Clair explores the physical, historical, and cultural origins of colors 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 colors 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 colors 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(358, 62%, 38%) with a click, St Clair shows us the alchemists, miners, and merchants who risked their lives to create that same red such as cochineal.

In her beautiful book, colors are grouped into 10 balls in the front page, from white to black, each of which looks like a precious stone or a far-away planet in the galaxy. Below we create something similar, and each group contains all the color blobs swimming inside. You can hover over each color under the name list to see if you can spot them in the pool.

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

It is a mind-opening experience of reading this book. You realize that there were indigo farmers who grew the plants, and workers were involved to ferment and bake the dye into cakes, traders risked their lives in sinking ships to bring the cakes back home. These nameless people's effort made such a color valuable, and people who can afford such colors attached a symbol of status or a sense of beauty to the color.

Back to our main track, can we map the material colors from「The Secret Lives of Colour」onto the conceptual color names in Hues and Cues?

Inspired by「The Secret Lives of Colour」

Can we name a position?

First, we need an imaginary map to let these 75 colors reside in a cell. So we can walk the map like in a city, and find each color living in its own building. It is easier for us to remember streets and directions we turn left and right, rather than a blob ordered as number 5 in a sequence. It makes me think of Mondrian's "New York City" or "Broadway Boogie-Woogie". Let's do that!

Mondrian grid in 75 colors

Each rectangle below represents one color

We map all 75 colors 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 colors 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 colors from「The Secret Lives of Colour」, 9 colors match colors in Hues and Cues most closely. By "most matching," we mean colors 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. These matching colors 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 colors fall into the blue and blue green color 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 Color?

In Hues and Cues, the blue-green color occupies the most positions, whereas in「The Secret Lives of Colour」, the color red has the most matches in these positions with the names such as rosso corsa, cochineal and scarlet. It makes me wonder if blue is so dominant in our perception, why can't we name most of them?

According to Samer Hattar and David Berson's study, everyone, even the blinded, is sensitive to blue light, which comes with the earliest daylight at the break of dawn. It sets our internal clock, and that's why scrolling the cellphone at bedtime during night will impact our sleep. If we are prone to seeing blue, why can we barely name it?

William Gladstone, who was a British prime minister, studied the colors used in the book「The Odyssey」by Homer. He found out that colors are seldom named in the book, and blue was not mentioned once. Homer used the word "wine-dark" to refer to the sea, which we will find odd today. Are people in the past color-blind? A later study「Basic Color Terms」by Brent Berlin and Paul Kay shows that color names developed gradually. First developed were black and white, then it came red. Afterwards we found green or yellow, then at a later stage came blue. So maybe Homer was not color-blinded, but he just could not name the color blue at that time.

Asides from the development of color terms, blue is also a rare pigment in nature. In order to obtain blue, people turned to rare minerals like lapis lazuli for ultramarine 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.