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
%}
Comments
To leave a comment, please click here to sign in to your MathWorks Account or create a new one.