Color Visualization Tool

Overview

The Color Visualization Tool provides a way for users to see color relationships in ways that align both with their artistic vision and with the principles of modern color theory. More specifically, the tool allows users to "lock" one of the three dimensions of color (either value or chroma) and then explore the remaining 2 dimensions visually.

For example, a user may want a specific value in an area of a painting but is undecided on the exact hue or chroma. This tool allows the user to "lock" the value and explore the dimensions of hue and chroma at that value. Users can also lock the chroma of a color using this tool and explore the dimensions of value and hue.

Since there are 3 dimensions to color (hue, chroma and value) a 3-dimensional object would be needed to represent all the possible combinations. Since it is difficult to work with a 3-dimensional object using a web browser the Color Visualization Tool uses a 2-dimensional representation of a 3-dimensional color space (this is the CIELAB color space). Such a representation is shown below with a section missing so we can see what it looks like inside.

The above, example color model shows color Values on an 11-step, central vertical axis ranging from pure black at the bottom to pure white at the top. Chroma is shown as the distance away from the central axis where there is no chroma to the highest chroma at the farthest point away from the central axis. Hue is represented by the angle around the circle looking down from the top.

Terminology

The Color Visualization Tool uses the following terminology to refer to different parts of the 3-dimensional color space:

Hue	• Hue refers to the pure color itself, determined by its wavelength in the visible spectrum. It is the attribute that distinguishes red, blue, green, yellow, etc. • In simpler terms, hue is what we typically think of as "color" in everyday language. • On the color wheel, hues are the basic colors arranged in a circular format.
Value	• Value describes the lightness or darkness of a color. It refers to how much light a color reflects or absorbs. • A color with high value is light (e.g., pastel yellow), while a color with low value is dark (e.g., navy blue). • Value is independent of hue; you can have a light red (pink) and a dark red (maroon), both with the same hue but different values.
Chroma	• Chroma, also called saturation or intensity, refers to the purity or vividness of a color. It describes how much a color deviates from neutral gray. • A highly saturated color is vivid and intense (e.g., bright red), while a low-chroma color is muted or grayish (e.g., dusty rose). • Chroma is independent of value; a color can be light or dark while still being highly saturated or desaturated.
Slice	A vertical cut or slice through one side of the color space. (Think of a grapefruit slice.)
Wedge	A series of adjacent color segments within a slice, all having the same hue.	or
Segment	A single color block within the color space.

Visualization Types

The Color Visualization Tool gives the user the ability to visualize the 3-dimensional color space in one of three ways as shown in the table below.

Visualization Type	What it does	When to use it	How Color Space is Cut (example)	Example
Chroma at Specified Value	Cuts open the color space using a horizontal plane at the value you specify.	When you want to explore the hues and chromas available at a specific (locked) value.
Value at Specified Chroma	Cuts open the color space using a cylinder at the chroma you specify, then "unrolls" the cylinder for the visualization.	When you want to explore the hues and values available at a specific (locked) chroma.
Max Chroma from Starting Value	Creates a wedge for you with one end at the value you specify (having zero chroma) and the other end at max chroma for that hue. Repeated for all hues to create "wheel. Note that the value that max chroma occurs at will be different for each hue.	When you want to explore colors ranging from a specific (locked) value (at the center of the visualization) to max chroma (at the edge).	(Done for each hue)

Settings

			Available in which Visualizations
Setting	What it Does	Default	Chroma at Specified Value	Value at Specified Chroma	Max Chroma from Starting Value
Hue Steps (0-360)	Sets the number of hue slices for the visualization.	24
Chroma Steps (3-100)	Sets the number of chroma steps for the visualization	10		N/A	N/A
Value Steps (3-100)	Sets the number of value steps for the visualization	10	N/A
Value for Slice (0-100%)	Sets the value you want the visualization to use. 0% is pure black. 100% is pure white.	50		N/A	N/A
Chroma for Slice (0-100)	Sets the chroma you want the visualization to use. 0 is no chroma. 100 is the maximum available chroma across all hues.	50	N/A		N/A
Starting Value (0-100)	Sets the starting value you want the visualization to use. This will be the value at the center of the wheel. 0 is pure black. 100 is pure white.	50	N/A	N/A

Table Legend:

	= This option is available for this visualization type. The default value should work for most use cases.
N/A	= This option doesn't apply to this visualization type.
	= The main setting you set for this visualization type.

Frequently Asked Questions

1	What color model is this application built on?	This application is built on the CIELAB color model.
2	Why are the color wheels irregularly shaped around the rim?	In the CIELAB color model the distance away from the center of the circle (i.e. the radius) represents the chroma of the color. The farther away a color is from the center of the circle the higher its chroma. Some colors can achieve a higher degree of chroma than others which results in an irregular outer boundary to the color wheels. Forcing the outer boundary to be perfectly circular would distort the color space making it less accurate.
3	Why are there gaps in the "Value at Specified Chroma" (unrolled cylinder) visualization?	The gaps represent areas of the color space where there are no colors (out of gamut). The diameter of the cylinder that you set for this visualization determines the amount of chroma you want for the visualization. It "locks" the chroma. If you set a low chroma value like 10 it means the diameter of the cylinder is relatively small which means that as the cylinder "cuts" down through the color solid it is cutting very close to the central axis. Since the central axis represents zero chroma moving a short distance away from the central axis means you want colors with a little chroma. Most hues are capable of doing this. However, when you specify a high chroma like 90 (a large diameter for the cylinder) the cylinder "cuts" down through the color solid much farther away from the central axis. Many hues are not able to produce a color with that much chroma, particularly near the top (white) and bottom (black) end of the value axis. This is where the gaps come from.