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

|
  • print

Comments

To leave a comment, please click here to sign in to your MathWorks Account or create a new one.