This is a personal project, developed with the kind and generous collaboration of Raluca Nicola, a talented web cartographer whose creativity and expertise in 3D mapping and data visualization were essential in defining its overall quality.
Introduction
The Munsell Color Order System is one of the most influential attempts to describe color as humans actually perceive it. Rather than relying on technical device values or arbitrary naming, it organizes color into a logical structure that can be taught, visualized, and consistently reproduced across disciplines such as art, science, design, cartography and data visualization.
In this personal project I explore that system and I present two interactive tools that I have developed to translate its theory into something you can explore directly in the browser.
The Munsell Color Order System
Albert H. Munsell, an American painter and art educator, developed his perceptual model of color in the early 20th century, publishing its full structure in 1905 with his famous book A Color Notation. His goal was to move beyond vague color naming and create a scientific system based on how the human eye actually perceives color. He defined color through three independent dimensions, Hue, Value and Chroma, establishing the first truly systematic, measurable, and perceptually organized approach to describing color relationships.
Hue is the name of the color and describes its type and its position around the color circle. The full system contains 40 hues organized into 10 families: R (Red), YR (Yellow-Red), Y (Yellow), GY (Green-Yellow), G (Green), BG (Blue-Green), B (Blue), PB (Purple-Blue), P (Purple), and RP (Red-Purple). Each family is further subdivided into four steps, 2.5, 5, 7.5 and 10, allowing smooth transitions between adjacent families.
Value describes lightness and ranges from 1 (near black) to 9 (near white), moving vertically through the scale. Chroma measures saturation or color purity and typically increases outward in even steps of 2, from 2 up to 26, depending on the hue’s maximum achievable intensity. Together, these dimensions form a three-dimensional Color Solid where every color has an exact coordinate.
Picture 1 displays the 5P (Purple) Hue as a two-dimensional slice of the Munsell Color Solid. The vertical axis represents Value, moving from light tints at the top (higher values) to dark shades at the bottom (lower values). The horizontal axis represents Chroma, increasing from neutral, grayish purples on the left to more intense, vivid purples on the right. The hue remains constant at 5P across the chart, while each square shows a specific Munsell notation in the form H V/C, where H is the hue name, V is the value level and C is the chroma step. A notation such as 5P 4/14 identifies a precise position: the hue (5 Purple), the lightness level (value 4), and the saturation (chroma 14).
Together, the grid reveals how a single hue systematically changes in brightness and saturation within the Munsell system. Because the system is perceptually uniform, equal steps represent visually consistent changes, which makes it highly reliable for accurate color communication and enduringly useful in art, science, and cartography.
The Interactive Color Chart
The Interactive Color Chart translates the Munsell system into a readable matrix. Each selected hue is displayed across nine value levels (light to dark) and thirteen chroma steps (weak to strong). The grid updates instantly when a new hue is chosen.
Every square represents one exact Munsell color and displays its value/chroma notation along with its HEX code. The system is not random: columns represent increasing chroma, while rows move through value levels, making it easy to trace how a single hue changes in brightness and intensity.
Controls include a hue dropdown grouped by color family and a slider that cycles through the full hue sequence. A toggle allows you to show or hide the numeric labels, keeping the display either informative or purely visual. The result is both an educational reference and a practical design tool for building coherent, perceptually balanced color palettes.
The Interactive Color Tree
The Interactive Color Tree reconstructs the Munsell system as a true spatial object. Hue wraps horizontally around a circle, value rises vertically, and chroma extends outward from the center. Together, these axes form a three-dimensional “tree” structure that mirrors Munsell’s original color solid.
An interactive panel allows users to filter hues by family, hide or show specific groups, and isolate individual hue ranges to study their full vertical structure. Click interactions reveal color data directly within the 3D environment, turning the system into a navigable landscape rather than an abstract diagram.
This visualization has been built with the ArcGIS Maps SDK for JavaScript and designed and refined through collaboration with Raluca Nicola, whose input shaped both its usability and clarity.
Munsell Hue Labels
Munsell Hue Palette
Bringing Munsell Into the Browser
It is worth noting that each Munsell color used in these tools is based on spectral measurements published by the Munsell Color Science Lab at the Rochester Institute of Technology (RIT), which provide accurate RGB equivalents for physical Munsell samples.
I have converted these RGB values into their corresponding HEX codes, creating a reliable digital translation of the original Munsell notation. The tools are fed with these HEX values, ensuring that every displayed color directly corresponds to a specific Munsell hue, value, and chroma, preserving the system’s structure while making it usable in modern web environments.
Conclusion
The Munsell system brings structure, predictability, and perceptual accuracy to color selection. It supports clearer visual hierarchies, better contrast control, and more consistent map design by grounding decisions in how humans actually perceive color rather than in subjective judgment or device-dependent values. By making the system interactive and explorable, these tools reduce the gap between theory and practice, allowing users to engage with color in a precise and meaningful way.
These visualizations were created to transform an abstract color model into something tangible, navigable, and intuitive. They offer a direct way to see, compare, and understand color relationships in context, while reflecting the value of collaboration and refinement throughout the process. My sincere thanks again to Raluca Nicola for her contribution to the 3D scene. Ultimately, the goal is simple: to help you experience and use color with greater clarity, intention, and confidence.
For those who want to explore or adapt these visualizations independently, both tools are also available as standalone live demos on CodePen: the Munsell Interactive Color Chart and the Munsell Interactive Color Tree.
Happy coloring, the Munsell way!