Color matching game

Test how well you can analyze colors for their primary components!

You can enter numbers directly, or use the up and down arrows on-screen or on your keyboard.

[codepen_embed height=”490″ theme_id=”0″ slug_hash=”yJGQVL” default_tab=”result” user=”KarenBennett”]See the Pen Color matching game by Karen Bennett (@KarenBennett) on CodePen.[/codepen_embed]

About the statistics

CMY = Cyan, Magenta, and Yellow, the pigment primaries, in % from 0 to 100.

HSL = Hue, Saturation, and Lightness. These terms relate to the 3-D color wheel.
Hue is the color in degrees (0-360) around the color wheel. 0/360=red; 60=yellow; 120=green; 180=cyan; 240=blue-violet; 300=magenta. If you see “NaN” for hue, it means there is no hue – it is a gray value, somewhere between black and white. In that case, the Saturation value will also be 0.
Saturation tells how intense or pure the color is – for example, a bright red, or a dull red. Saturation ranges from 0 at the center of the color wheel to 1.0 at the rim.
Lightness is value, ranging from 0 for black to 1 for white.

Luminance = Overall value; how light or dark. Black = 0; white = 1.0.

Contrast = How different are the two colors. Ranges from 1.000 if the colors are identical, to 21 for black vs. white. Low values (under 1.02 or so) mean you came very close.

Older version

Below is an earlier version. Try setting the black slider to zero – you don’t need black, since pigment colors are subtractive (removing light). You can click on a slider to make a large change, or use the arrow keys on your keyboard to move up or down in small increments. This demo works best on laptop or desktop computers.

[codepen_embed height=”738″ theme_id=”0″ slug_hash=”XKpyEW” default_tab=”result” user=”KarenBennett”]See the Pen Match this color in CMYK by Karen Bennett (@KarenBennett) on CodePen.[/codepen_embed]