Virtual 3-D Munsell Color Tree

The objective of this project is to exend this work done by Andrew Worth:

Virtual Munsell Color Wheel
by Andrew Werth © 2023
All rights reserved.

To a 3-D virtual app that approximates The Pantone Munsell Color Tree:

A Pantone Munsell Color Tree for sale at Amazon.com

An old-fashioned rolodex

Picture replacing each index card of this old-fashioned rolodex with a transparent index card with a matrix of ColorChips. And then placing it on its side, so its axis is vertical.

Andrew Worth's color wheel

Regarding the top-most image, click on the image to open Andrew Worth's site. Then click on different any Hue in the circular color wheel to see the its Hue Page. Notice how each Hue Page has a different shape but they are common in that the left-most column has diminished Chroma (or saturation) and Chroma increases towards the right-most column. The bottom-most row has the lowest Value and the highest rows have the highest Values.

The Munsel Color System

The Munsell Color system, is based on rigorous measurements of human subjects' visual responses to color, putting it on a firm experimental scientific basis. Because of this basis in human visual perception, Munsell's system has outlasted its contemporary color models, is still in wide use today. (see Wikipedia/Munsell_color_system)

The 3-D Color Space

Munsell's Color Conversion List describes the mapping between the RGB Color Space and the Munsell Color Space of Hue, Value and Chroma. It was created using experimental human observations. There is no simple linear equation for associating Munsell Color Keys with RGB color values. These associations require table lookups.

The Pantone Munsell Color Tree

The Munsell Color Space has been materialized as a set of Hue Pages all oriented perpendicular to a horizontal base, all connected to a vertical shaft at the center of the flat base. Each page of this Tree is rotated some number of degrees about the vertical axis of the shaft. The color Red is typically set to be 0 degress. Then going clockwise, the next Color or HuePrefix, Yellow, is set at 72 degrees. The other Hue Pages have increasing degree headings up to Red-Purple, which has a setting of 324 degrees. The next hue then comes back to Red at 360 or 0 degrees.

One implementation of the Munsell Color Tree (currently available for purchase at Amazon.com for $424) uses five primary Hues and five intermediate Hues making ten color branches. The Munsell-to-RGB-Tables spreadsheet splits the color space into 10 primary HuePrefixes each with 4 intermediate Hues.

Munsell-to-RGB tables

As mentioned above there is no simple linear equation for associating Munsell Color Keys with RGB color values. These associations require table lookups.

This repo contains the Munsell-to-RGB-Tables in an Excel spreadsheet with macros enabled. When opening this file in Excel be sure not to ignore the macros. The macros are critical to the functionality of some of the sheets.

The sheets of this spreadsheet are as follows:

• Intro - gives credit to the creators of this spreadsheet.
• Setup - describes 10 basic Colors or HuePrefixes each with their 4 intermediate Hues.
• HuePages - describes how HuePrefix and intermediate Hues define each HuePage and how each HuePage has a page number, degrees, and a png image file name.
• Conversion Lists - describes the mapping between Munsell Keys and RGB Color values. ColorChips have Values that range vertically from 1 to 9 and Chroma values that vary horizontally
• Grey lists - shows the 11 grey values defined along the vertical shaft mentioned above, ranging from 0 as black at the bottom to 10 as white at the top.
• Value-Chroma - is a macro-driven page that shows Values and Chroma for a given HuePage defined by its HuePrefix and Hue using the dropdowns at the top left.
• HuePrefix-Chroma - is a macro-driven page that shows the 10 HuePrefix pages for a selected Value and Hue using the dropdowns at the top left.
• Hue-Chroma - this macro-driven page shows Hue and Chroma for a selected HuePrefix and Value using the dropdowns at the top left.

Macro-driven Sheets

Note that macro-driven sheets are oriented differently in the Munsell Color Tree. Value is oriented vertically along the y-axis with black at the bottom and white at the top. Chroma is shown horizontally on each page on the x-axis with zero chroma as gray on the left and maximum chroma on the right.

Note that the Hue dropdown on the Value-Chroma page currently not working for choices 5.0 and 10.0.

Munsell vs RGB color gamut

Note that the shape of the Value and Chroma combinations on the HuePrefix/Hue pages do not fill the entire page. This illustrates the non-linear nature of the HVC mapping to RGB. The color gamut of the Munsell Color space does not match the color gamut of the RGB color space.

Muncell Dimensions

Munsell Tree partitioning is:

• 10 Colors or HuePrefixes
• 4 intermediate Hue-Pages per HuePrefix = 40 Hue-Pages
• 9 Value-Rows per Hue-Page
• ~8 Chroma-Columns per Value-Row (approx average)
  with a total of 2,734 Color Chips

The Munsell Color Chips

Munsell Color Tree models are available at many retail outlets, including Amazon.com. These models use Pantone paint chips, which explains the hight cost.

Each Color Chip in the Conversion Lists sheet has a unique RGB Color Value and its Munsell Color Key. The Munsell Color Key encoding format is:

    (<Hue><HuePrefix>)-<Value>-<Chroma>

For example, Munsell Key 10.0RP-3-12 decodes to

• HuePrefix = RP
• Hue = 10.0
• Value = 3
• Chroma = 12

So, in 3-D Munsell space this chip has location
HuePage=10.0RP (or Page#=40), Row=3, Column=12.

This example Munsell Color Key is at row 2689, column F in the Conversion List table. The corrsponding RGB Color Value next to it at column G is 149,0,69.

Implementation

Matthew Davis uses Vanilla javascript (not three.js) to create this magnificent orthographic viewer of a random collection of RGB color cubes. See the full screen 3D color selector

at CodePen

For this project, we need to extend the model by replacing the 3D color cubes with flat ColorChips arranged as shown in each HuePage.

HuePages and ColorChips

This repo contains the Munsell-to-RGB-Tables.xlsm folder, which contains 40 png files, one for each HuePage. For example, this is 351-10.0RP.png

Each filename has format:

<degrees>-<Hue><HuePrefix>.png

so 351-10.0RP.png decodes to
degrees=351, Hue=10.0, HuePrefix=RP

The HuePages defined in the Munsell-to-RGB-Tables as an animated gif

The 3D model and the GreyShaft

The 3D model for the Virtual 3-D Munsell Color Tree is the set of HuePages, each projected on a plane oriented perpendicular to the horizon. All HuePages connect to a vertical "GreyShaft" at the center.

The vertical GreyShaft should have a diameter that matches the ColorChip width in the HuePages. It should have 11 rows of equal length that match the row height and spacing of the ColorChips. Each row on the GreyShaft should be given grey values that rane from 0 (#000) to white (#fff) as shown in the "Grey lists" page of the spreadsheet.

HuePages are placed within a gap distance to the Grey Shaft on their zero-chroma side. HuePages have vertical values that only range from 1 to 9, so HuePage rows should align with the 1 thru 9 rows of the GreyShaft.

Each HuePage is rotated some number of degrees about the vertical axis of the GrayShaft. The color Red is typically set to be 0 degress. Then going clockwise, the next Color or HuePrefix, Yellow, is set at 72 degrees. The other Hue Pages have increasing degree headings up to Red-Purple, which has a setting of 324 degrees. The next hue then comes back to Red at 360 or 0 degrees.

Each HuePage in the HuePages folder has the degrees defined as the filename's 3-digit prefix. Each image file should be projected onto a plane that has bee rotated that number of degrees about the vertical center GreyShaft.

When loading these PNG image files, make the grey background color transparent and crop each image at top and bottom to remove the title text. Retain the ColorChip boundaries. The horizontal width of each image can be trimmed to fit the existing ColorChips, but HuePage edges should not be visible.

3D model orientation and position

1. The vertical axis of the model always aligns with that of the viewport and viewer
2. The tree should be floating at a reasonable fixed distance from the ground plane
3. Viewer can rotate the tree about its vertical axis using click and drag on any of its pages

Removed
4. Viewer can tilt the tree torwards or away with another slider widget
5. Viewer can zoom in or zoom out from the tree within reasonable limits with another slider widget

Lighting

1. The tree should cast a blurred shadow on the ground plane
2. Subtle lighting from above, behind, left of viewer

HuePage mode

1. Viewer can click on a HuePage to view it in HuePage mode, where the HuePage replaces the view of the tree
2. When viewing just the HuePage, on ColorCell hover, Munsell Key value and RGB values are displayed at the right side of the hz slider widgets
3. On ColorCell click, the scene background is changed to match its RGB value

See my related project workspace-rolodex

Check out the inspirational work of others

3D plot of the Munsell Color Order System. Caroline Larboulette

Munsell Color Space - basic color theory. 黄运南ngwoonlam

Munsell (a.) and CIELAB (b.) color solid. Mojtaba Navvab

Color volumes of Rec.2020 reference in the Yxy space (top left),
Yu'v' space (top right), Lab space (bottom left) and in the ICtCp
color space (bottom right). Pierre Boher

Munsell Colorspace (Colorspaces IX) | Harder, Better, Faster, Stronger. Steven Pigeon

the geometry of color perception. Bruce MacEvoy

colormaking attributes - differences in hue. Bruce MacEvoy

adaptation, anchoring & contrast - the contours of rod intrusion. Bruce MacEvoy

additive & subtractive color mixing - substance uncertainty in watercolor paint mixtures. Bruce MacEvoy

do "primary" colors exist? - james clerk maxwell's "diagram of colors". Bruce MacEvoy

modern color models - maximum chroma of munsell color samples. Bruce MacEvoy