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 %}
评论
要发表评论,请点击 此处 登录到您的 MathWorks 帐户或创建一个新帐户。