# Play “Match the Color” Game

I first saw this game years ago in the Exploratorium, a science museum in San Francisco. You are given a computer screen with two color patches and three sliders. One of the color patches is fixed. The sliders control the red, green and blue components of the other patch. Your task is to adjust the sliders until the two patches are the same color. It ain't easy.

My code for this game is available from the MATLAB® Central File Exchange.

### Contents

#### Color names

The Exploratorium used random colors, but I'm going to pick the colors from a list of 143 named colors recognized by modern web browsers. These are wonderful names -- tomato, papaya whip, dark khaki, light sea green, burly wood, chocolate, moccasin, and many more. You can use the names in HTML and CSS code.

I found the names, and corresponding RGB triples, on a web site, color-names, provided by a San Francisco architecture and design firm, Dixon & Moe. Several other web sites, including Wikipedia, have similar lists.

The names are divided into ten groups -- reds, pinks, oranges, yellows, purples, greens, blues, browns, whites, and grays. There are two pairs of synonyms -- "fuchsia" and "magenta" are the same color and "aqua" and "cyan" are the same color. And there are two duplicates -- "light salmon" is listed in both the orange and red groups and "medium slate blue" is in both blue and purple. See if you can find them.

#### First screen

Here is the first screen of the game. I've already clicked on one of the tiles. The name, "blue violet", appears in the title and the color is used in a large patch that invites you to click it.

You can accept the invitation to click, or you can choose other tiles and see their names.

#### Second screen

If you choose to click on the large patch, you get the second screen. Now the challenge begins. You must adjust the red, green and blue sliders until both patches have the same color.

If you succeed, you get rewarded with the gold star.

This example shows that "blue violet" has the RGB triple [138 43 226].

#### Score

Some of the colors are easy to match. For "red", you obviously have to move R to its maximum, 255, and G and B to zero. But most are not so easy. When you need some help, click on the "score" toggle.

The score is the 1-norm of the difference between the RGB vectors of the two patches. That's the sum of the absolute values of the differences between the three components. In this example

    left = [138 43 226];
right = [128 128 128];
score = norm(left - right,1)

score =
193


You want to drive this score to zero. The score is a monotone function of the sliders on either side of the optimum setting, so you don't have to worry about local minima.

#### YIQ

The YIQ color space is now nearly obsolete, but I revealed my personal fondness for it in a blog post in 2016. YIQ was used by the NTSC color standard for analog TV in North America from 1954 until 2009. Y stands for luminance, I for in phase, and Q for quadrature. The Y component alone drove black-and-white TVs for half a century and is used today to convert RGB to gray scale.

If you have mastered the sliders in RGB space, click on the "rgb/yiq" toggle and try your hand there. Y varies between 0.0 and 1.0, while I and Q vary between obscure positive and negative limits. Again, the score is the 1-norm of the difference, now shown to three decimal places. I find it very difficult to steer to a match, even when I can see the score.

This screen shot was taken when the colors do not match and the score is far from 0.000. The YIQ coordinates for "blue velvet" are not [0.633 -0.447 0.302]. But is the variable patch on the right too bright or too dark?

#### Two greens

Green is a special case. If you color something with the G component set to its maximum and the R and B components turned off, most people will say it's too bright. Here are two shades of pure green.

In the HTML naming scheme the dark one on the left, with G set to only 128, is called "green", while the light one on the right, with G set to 255, is "lime".

#### Two pinks

Here are two shades of pink. One is "deep pink", the other is "hot pink".

Both say, "click me". But the text in one is white and the other black. Why?

We want the text in dark colored patches to be white and the text in light colored patches to be black. The decision can be based on the first component of YIQ, luminance, which is computed by taking the dot product of a scaled RGB triple with

   luma = [0.2989  0.5870  0.1140];


The RGB triple and the luminance for deep pink are

   deep = [255 20 147];
deep_luminance = deep/255*luma'

deep_luminance =
0.4107


The corresponding quantities for hot pink are

   hot = [255 105 180];
hot_luminance = hot/255*luma'

hot_luminance =
0.6211


The two luminance values fall on either side of 0.5, the luminance of gray. So deep pink gets white text while hot pink gets black text.

Today's homework: how many of our colors are dark and how many are light? Can you guess which are the most frequent? The answer surprised me. The ratio is nearly 2 to 1.

#### Software

My code for this game is available from the MATLAB Central File Exchange.

#### color names

    type match_color_tail

%{
reds
1             indianred   205   92   92
2            lightcoral   240  128  128
3                salmon   250  128  114
4            darksalmon   233  150  122
5           lightsalmon   255  160  122
6               crimson   220   20   60
7                   red   255    0    0
8             firebrick   178   34   34
9               darkred   139    0    0

pinks
10                  pink   255  192  203
11             lightpink   255  182  193
12               hotpink   255  105  180
13              deeppink   255   20  147
14       mediumvioletred   199   21  133
15         palevioletred   219  112  147

oranges
16           lightsalmon   255  160  122
17                 coral   255  127   80
18                tomato   255   99   71
19             orangered   255   69    0
20            darkorange   255  140    0
21                orange   255  165    0

yellows
22                  gold   255  215    0
23                yellow   255  255    0
24           lightyellow   255  255  224
25          lemonchiffon   255  250  205
26  lightgoldenrodyellow   250  250  210
27            papayawhip   255  239  213
28              moccasin   255  228  181
29             peachpuff   255  218  185
30         palegoldenrod   238  232  170
31                 khaki   240  230  140
32             darkkhaki   189  183  107

purples
33              lavender   230  230  250
34               thistle   216  191  216
35                  plum   221  160  221
36                violet   238  130  238
37                orchid   218  112  214
38               fuchsia   255    0  255
39               magenta   255    0  255
40          mediumorchid   186   85  211
41          mediumpurple   147  112  219
42         rebeccapurple   102   51  153
43            blueviolet   138   43  226
44            darkviolet   148    0  211
45            darkorchid   153   50  204
46           darkmagenta   139    0  139
47                purple   128    0  128
48                indigo    75    0  130
49             slateblue   106   90  205
50         darkslateblue    72   61  139
51       mediumslateblue   123  104  238

greens
52           greenyellow   173  255   47
53            chartreuse   127  255    0
54             lawngreen   124  252    0
55                  lime     0  255    0
56             limegreen    50  205   50
57             palegreen   152  251  152
58            lightgreen   144  238  144
59     mediumspringgreen     0  250  154
60           springgreen     0  255  127
61        mediumseagreen    60  179  113
62              seagreen    46  139   87
63           forestgreen    34  139   34
64                 green     0  128    0
65             darkgreen     0  100    0
66           yellowgreen   154  205   50
67             olivedrab   107  142   35
68                 olive   128  128    0
69        darkolivegreen    85  107   47
70      mediumaquamarine   102  205  170
71          darkseagreen   143  188  139
72         lightseagreen    32  178  170
73              darkcyan     0  139  139
74                  teal     0  128  128

blues
75                  aqua     0  255  255
76                  cyan     0  255  255
77             lightcyan   224  255  255
78         paleturquoise   175  238  238
79            aquamarine   127  255  212
80             turquoise    64  224  208
81       mediumturquoise    72  209  204
82         darkturquoise     0  206  209
83             cadetblue    95  158  160
84             steelblue    70  130  180
85        lightsteelblue   176  196  222
86            powderblue   176  224  230
87             lightblue   173  216  230
88               skyblue   135  206  235
89          lightskyblue   135  206  250
90           deepskyblue     0  191  255
91            dodgerblue    30  144  255
92        cornflowerblue   100  149  237
93       mediumslateblue   123  104  238
94             royalblue    65  105  225
95                  blue     0    0  255
96            mediumblue     0    0  205
97              darkblue     0    0  139
98                  navy     0    0  128
99          midnightblue    25   25  112

browns
100              cornsilk   255  248  220
101        blanchedalmond   255  235  205
102                bisque   255  228  196
103           navajowhite   255  222  173
104                 wheat   245  222  179
105             burlywood   222  184  135
106                   tan   210  180  140
107             rosybrown   188  143  143
108            sandybrown   244  164   96
109             goldenrod   218  165   32
110         darkgoldenrod   184  134   11
111                  peru   205  133   63
112             chocolate   210  105   30
113           saddlebrown   139   69   19
114                sienna   160   82   45
115                 brown   165   42   42
116                maroon   128    0    0

whites
117                 white   255  255  255
118                  snow   255  250  250
119              honeydew   240  255  240
120             mintcream   245  255  250
121                 azure   240  255  255
122             aliceblue   240  248  255
123            ghostwhite   248  248  255
124            whitesmoke   245  245  245
125              seashell   255  245  238
126                 beige   245  245  220
127               oldlace   253  245  230
128           floralwhite   255  250  240
129                 ivory   255  255  240
130          antiquewhite   250  235  215
131                 linen   250  240  230
132         lavenderblush   255  240  245
133             mistyrose   255  228  225

grays
134             gainsboro   220  220  220
135             lightgray   211  211  211
136                silver   192  192  192
137              darkgray   169  169  169
138                  gray   128  128  128
139               dimgray   105  105  105
140        lightslategray   119  136  153
141             slategray   112  128  144
142         darkslategray    47   79   79
143                 black     0    0    0
%}


Published with MATLAB® R2018a

|