{"id":3442,"date":"2018-06-11T12:00:50","date_gmt":"2018-06-11T17:00:50","guid":{"rendered":"https:\/\/blogs.mathworks.com\/cleve\/?p=3442"},"modified":"2018-06-09T15:35:36","modified_gmt":"2018-06-09T20:35:36","slug":"play-match-the-color-game","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/cleve\/2018\/06\/11\/play-match-the-color-game\/","title":{"rendered":"Play &#8220;Match the Color&#8221; Game"},"content":{"rendered":"<div class=\"content\"><!--introduction--><p>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.<\/p><p>My code for this game is available from <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/67670_play_match_the_color_game\">the MATLAB&reg; Central File Exchange<\/a>.<\/p><!--\/introduction--><h3>Contents<\/h3><div><ul><li><a href=\"#fb7a0773-c12b-4594-af98-71348bb29d58\">Color names<\/a><\/li><li><a href=\"#c0731063-8672-40a4-8dd4-f90c7f1e59c3\">First screen<\/a><\/li><li><a href=\"#7816ebb5-4a66-4e76-9b0e-2e428fd73188\">Second screen<\/a><\/li><li><a href=\"#e9c54b27-e4c3-4c80-8bcb-4e9af3a5de21\">Score<\/a><\/li><li><a href=\"#12cf998a-3be7-4130-bcd8-18ea6273b072\">YIQ<\/a><\/li><li><a href=\"#ba18bb8b-f060-474f-911a-44b430bba825\">Two greens<\/a><\/li><li><a href=\"#2b837643-ecc3-430b-a2b6-91abe4c2da14\">Two pinks<\/a><\/li><li><a href=\"#7e88a40b-04f1-42c1-b7b2-d3aea9110cb2\">Software<\/a><\/li><li><a href=\"#f907903c-1bba-4a46-8234-b892b49b5176\">color names<\/a><\/li><\/ul><\/div><h4>Color names<a name=\"fb7a0773-c12b-4594-af98-71348bb29d58\"><\/a><\/h4><p>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.<\/p><p>I found the names, and corresponding RGB triples, on a web site, <a href=\"https:\/\/htmlcolorcodes.com\/color-names\">color-names<\/a>, provided by a San Francisco architecture and design firm, <a href=\"https:\/\/dixonandmoe.com\">Dixon &amp; Moe<\/a>.  Several other web sites, including Wikipedia, have similar lists.<\/p><p>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.<\/p><h4>First screen<a name=\"c0731063-8672-40a4-8dd4-f90c7f1e59c3\"><\/a><\/h4><p>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.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/screen1.png\" alt=\"\"> <\/p><p>You can accept the invitation to click, or you can choose other tiles and see their names.<\/p><h4>Second screen<a name=\"7816ebb5-4a66-4e76-9b0e-2e428fd73188\"><\/a><\/h4><p>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.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/screen2a.png\" alt=\"\"> <\/p><p>If you succeed, you get rewarded with the gold star.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/screen2b.png\" alt=\"\"> <\/p><p>This example shows that \"blue violet\" has the RGB triple [138 43 226].<\/p><h4>Score<a name=\"e9c54b27-e4c3-4c80-8bcb-4e9af3a5de21\"><\/a><\/h4><p>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.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/screen2c.png\" alt=\"\"> <\/p><p>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<\/p><pre class=\"codeinput\">    left = [138 43 226];\r\n    right = [128 128 128];\r\n    score = norm(left - right,1)\r\n<\/pre><pre class=\"codeoutput\">score =\r\n   193\r\n<\/pre><p>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.<\/p><h4>YIQ<a name=\"12cf998a-3be7-4130-bcd8-18ea6273b072\"><\/a><\/h4><p>The YIQ color space is now nearly obsolete, but I revealed my personal fondness for it in <a href=\"https:\/\/blogs.mathworks.com\/cleve\/2016\/12\/12\/my-first-matrix-rgb-yiq-and-color-cubes\">a blog post in 2016<\/a>.  YIQ was used by the NTSC color standard for analog TV in North America from 1954 until 2009. Y stands for <i>luminance<\/i>, I for <i>in phase<\/i>, and Q for <i>quadrature<\/i>.  The Y component alone drove black-and-white TVs for half a century and is used today to convert RGB to gray scale.<\/p><p>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.<\/p><p>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 <i>not<\/i> [0.633 -0.447 0.302].  But is the variable patch on the right too bright or too dark?<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/screen2d.png\" alt=\"\"> <\/p><h4>Two greens<a name=\"ba18bb8b-f060-474f-911a-44b430bba825\"><\/a><\/h4><p>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.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/two_greens.png\" alt=\"\"> <\/p><p>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\".<\/p><h4>Two pinks<a name=\"2b837643-ecc3-430b-a2b6-91abe4c2da14\"><\/a><\/h4><p>Here are two shades of pink.  One is \"deep pink\", the other is \"hot pink\".<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/two_pinks.png\" alt=\"\"> <\/p><p>Both say, \"click me\".  But the text in one is white and the other black. Why?<\/p><p>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, <i>luminance<\/i>, which is computed by taking the dot product of a scaled RGB triple with<\/p><pre class=\"codeinput\">   luma = [0.2989  0.5870  0.1140];\r\n<\/pre><p>The RGB triple and the luminance for deep pink are<\/p><pre class=\"codeinput\">   deep = [255 20 147];\r\n   deep_luminance = deep\/255*luma'\r\n<\/pre><pre class=\"codeoutput\">deep_luminance =\r\n    0.4107\r\n<\/pre><p>The corresponding quantities for hot pink are<\/p><pre class=\"codeinput\">   hot = [255 105 180];\r\n   hot_luminance = hot\/255*luma'\r\n<\/pre><pre class=\"codeoutput\">hot_luminance =\r\n    0.6211\r\n<\/pre><p>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.<\/p><p>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.<\/p><h4>Software<a name=\"7e88a40b-04f1-42c1-b7b2-d3aea9110cb2\"><\/a><\/h4><p>My code for this game is available from <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/67670_play_match_the_color_game\">the MATLAB Central File Exchange<\/a>.<\/p><h4>color names<a name=\"f907903c-1bba-4a46-8234-b892b49b5176\"><\/a><\/h4><pre class=\"codeinput\">    type <span class=\"string\">match_color_tail<\/span>\r\n<\/pre><pre class=\"codeoutput\">\r\n%{\r\nreds\r\n     1             indianred   205   92   92\r\n     2            lightcoral   240  128  128\r\n     3                salmon   250  128  114\r\n     4            darksalmon   233  150  122\r\n     5           lightsalmon   255  160  122\r\n     6               crimson   220   20   60\r\n     7                   red   255    0    0\r\n     8             firebrick   178   34   34\r\n     9               darkred   139    0    0\r\n\r\npinks\r\n    10                  pink   255  192  203\r\n    11             lightpink   255  182  193\r\n    12               hotpink   255  105  180\r\n    13              deeppink   255   20  147\r\n    14       mediumvioletred   199   21  133\r\n    15         palevioletred   219  112  147\r\n\r\noranges\r\n    16           lightsalmon   255  160  122\r\n    17                 coral   255  127   80\r\n    18                tomato   255   99   71\r\n    19             orangered   255   69    0\r\n    20            darkorange   255  140    0\r\n    21                orange   255  165    0\r\n\r\nyellows\r\n    22                  gold   255  215    0\r\n    23                yellow   255  255    0\r\n    24           lightyellow   255  255  224\r\n    25          lemonchiffon   255  250  205\r\n    26  lightgoldenrodyellow   250  250  210\r\n    27            papayawhip   255  239  213\r\n    28              moccasin   255  228  181\r\n    29             peachpuff   255  218  185\r\n    30         palegoldenrod   238  232  170\r\n    31                 khaki   240  230  140\r\n    32             darkkhaki   189  183  107\r\n\r\npurples\r\n    33              lavender   230  230  250\r\n    34               thistle   216  191  216\r\n    35                  plum   221  160  221\r\n    36                violet   238  130  238\r\n    37                orchid   218  112  214\r\n    38               fuchsia   255    0  255\r\n    39               magenta   255    0  255\r\n    40          mediumorchid   186   85  211\r\n    41          mediumpurple   147  112  219\r\n    42         rebeccapurple   102   51  153\r\n    43            blueviolet   138   43  226\r\n    44            darkviolet   148    0  211\r\n    45            darkorchid   153   50  204\r\n    46           darkmagenta   139    0  139\r\n    47                purple   128    0  128\r\n    48                indigo    75    0  130\r\n    49             slateblue   106   90  205\r\n    50         darkslateblue    72   61  139\r\n    51       mediumslateblue   123  104  238\r\n\r\ngreens\r\n    52           greenyellow   173  255   47\r\n    53            chartreuse   127  255    0\r\n    54             lawngreen   124  252    0\r\n    55                  lime     0  255    0\r\n    56             limegreen    50  205   50\r\n    57             palegreen   152  251  152\r\n    58            lightgreen   144  238  144\r\n    59     mediumspringgreen     0  250  154\r\n    60           springgreen     0  255  127\r\n    61        mediumseagreen    60  179  113\r\n    62              seagreen    46  139   87\r\n    63           forestgreen    34  139   34\r\n    64                 green     0  128    0\r\n    65             darkgreen     0  100    0\r\n    66           yellowgreen   154  205   50\r\n    67             olivedrab   107  142   35\r\n    68                 olive   128  128    0\r\n    69        darkolivegreen    85  107   47\r\n    70      mediumaquamarine   102  205  170\r\n    71          darkseagreen   143  188  139\r\n    72         lightseagreen    32  178  170\r\n    73              darkcyan     0  139  139\r\n    74                  teal     0  128  128\r\n\r\nblues\r\n    75                  aqua     0  255  255\r\n    76                  cyan     0  255  255\r\n    77             lightcyan   224  255  255\r\n    78         paleturquoise   175  238  238\r\n    79            aquamarine   127  255  212\r\n    80             turquoise    64  224  208\r\n    81       mediumturquoise    72  209  204\r\n    82         darkturquoise     0  206  209\r\n    83             cadetblue    95  158  160\r\n    84             steelblue    70  130  180\r\n    85        lightsteelblue   176  196  222\r\n    86            powderblue   176  224  230\r\n    87             lightblue   173  216  230\r\n    88               skyblue   135  206  235\r\n    89          lightskyblue   135  206  250\r\n    90           deepskyblue     0  191  255\r\n    91            dodgerblue    30  144  255\r\n    92        cornflowerblue   100  149  237\r\n    93       mediumslateblue   123  104  238\r\n    94             royalblue    65  105  225\r\n    95                  blue     0    0  255\r\n    96            mediumblue     0    0  205\r\n    97              darkblue     0    0  139\r\n    98                  navy     0    0  128\r\n    99          midnightblue    25   25  112\r\n\r\nbrowns\r\n   100              cornsilk   255  248  220\r\n   101        blanchedalmond   255  235  205\r\n   102                bisque   255  228  196\r\n   103           navajowhite   255  222  173\r\n   104                 wheat   245  222  179\r\n   105             burlywood   222  184  135\r\n   106                   tan   210  180  140\r\n   107             rosybrown   188  143  143\r\n   108            sandybrown   244  164   96\r\n   109             goldenrod   218  165   32\r\n   110         darkgoldenrod   184  134   11\r\n   111                  peru   205  133   63\r\n   112             chocolate   210  105   30\r\n   113           saddlebrown   139   69   19\r\n   114                sienna   160   82   45\r\n   115                 brown   165   42   42\r\n   116                maroon   128    0    0\r\n\r\nwhites\r\n   117                 white   255  255  255\r\n   118                  snow   255  250  250\r\n   119              honeydew   240  255  240\r\n   120             mintcream   245  255  250\r\n   121                 azure   240  255  255\r\n   122             aliceblue   240  248  255\r\n   123            ghostwhite   248  248  255\r\n   124            whitesmoke   245  245  245\r\n   125              seashell   255  245  238\r\n   126                 beige   245  245  220\r\n   127               oldlace   253  245  230\r\n   128           floralwhite   255  250  240\r\n   129                 ivory   255  255  240\r\n   130          antiquewhite   250  235  215\r\n   131                 linen   250  240  230\r\n   132         lavenderblush   255  240  245\r\n   133             mistyrose   255  228  225\r\n\r\ngrays\r\n   134             gainsboro   220  220  220\r\n   135             lightgray   211  211  211\r\n   136                silver   192  192  192\r\n   137              darkgray   169  169  169\r\n   138                  gray   128  128  128\r\n   139               dimgray   105  105  105\r\n   140        lightslategray   119  136  153\r\n   141             slategray   112  128  144\r\n   142         darkslategray    47   79   79\r\n   143                 black     0    0    0\r\n%}\r\n<\/pre><script language=\"JavaScript\"> <!-- \r\n    function grabCode_a7be9a234eb04df28dab4ad24ff33b9d() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='a7be9a234eb04df28dab4ad24ff33b9d ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' a7be9a234eb04df28dab4ad24ff33b9d';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        copyright = 'Copyright 2018 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add copyright line at the bottom if specified.\r\n        if (copyright.length > 0) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\\n');\r\n\r\n        d.title = title + ' (MATLAB code)';\r\n        d.close();\r\n    }   \r\n     --> <\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_a7be9a234eb04df28dab4ad24ff33b9d()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; R2018a<br><\/p><\/div><!--\r\na7be9a234eb04df28dab4ad24ff33b9d ##### SOURCE BEGIN #####\r\n%% Play Match the Color Game\r\n% I first saw this game years ago in the Exploratorium, a science museum\r\n% in San Francisco.  You are given a computer screen with two \r\n% color patches and three sliders.  One of the color patches is fixed.\r\n% The sliders control the red, green and blue components of the other \r\n% patch. Your task is to adjust the sliders until the two patches are\r\n% the same color.  It ain't easy.\r\n%\r\n% My code for this game is available from\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/67670_play_match_the_color_game\r\n% the MATLAB(R) Central File Exchange>.\r\n\r\n%% Color names\r\n% The Exploratorium used random colors, but I'm going to pick the\r\n% colors from a list of 143 named colors recognized by modern web browsers.\r\n% These are wonderful names REPLACE_WITH_DASH_DASH tomato, papaya whip, dark khaki,\r\n% light sea green, burly wood, chocolate, moccasin, and many more.\r\n% You can use the names in HTML and CSS code.\r\n%\r\n% I found the names, and corresponding RGB triples, on a web site,\r\n% <https:\/\/htmlcolorcodes.com\/color-names color-names>,\r\n% provided by a San Francisco architecture and design firm,\r\n% <https:\/\/dixonandmoe.com Dixon & Moe>.  Several other web sites,\r\n% including Wikipedia, have similar lists.\r\n%\r\n% The names are divided into ten groups REPLACE_WITH_DASH_DASH reds, pinks, oranges,\r\n% yellows, purples, greens, blues, browns, whites, and grays.\r\n% There are two pairs of synonyms REPLACE_WITH_DASH_DASH \"fuchsia\" and \"magenta\" are the\r\n% same color and \"aqua\" and \"cyan\" are the same color.\r\n% And there are two duplicates REPLACE_WITH_DASH_DASH \"light salmon\" is listed in both\r\n% the orange and red groups and \"medium slate blue\" is in both\r\n% blue and purple.  See if you can find them.\r\n\r\n%% First screen\r\n% Here is the first screen of the game.  I've already clicked on one\r\n% of the tiles.  The name, \"blue violet\", appears in the title\r\n% and the color is used in a large patch that invites you to click it.\r\n%\r\n% <<screen1.png>>\r\n%\r\n% You can accept the invitation to click, or you can choose other tiles\r\n% and see their names.\r\n\r\n%% Second screen\r\n% If you choose to click on the large patch, you get the second screen. \r\n% Now the challenge begins.  You must adjust the red, green and blue\r\n% sliders until both patches have the same color. \r\n%\r\n% <<screen2a.png>>\r\n%\r\n% If you succeed, you get rewarded with the gold star.  \r\n%\r\n% <<screen2b.png>>\r\n%\r\n% This example shows that \"blue violet\" has the RGB triple\r\n% [138 43 226].\r\n\r\n%% Score\r\n% Some of the colors are easy to match.  For \"red\", you obviously have\r\n% to move R to its maximum, 255, and G and B to zero.\r\n% But  most are not so easy.  When you need some help, click on the \r\n% \"score\" toggle.\r\n%\r\n% <<screen2c.png>>\r\n%\r\n% The score is the 1-norm of the difference between the RGB vectors\r\n% of the two patches.  That's the sum of the absolute values of the\r\n% differences between the three components.  In this example\r\n%\r\n    left = [138 43 226];\r\n    right = [128 128 128];\r\n    score = norm(left - right,1)\r\n \r\n%%\r\n% You want to drive this score to zero.\r\n% The score is a monotone function of the sliders on either side of\r\n% the optimum setting, so you don't have to worry about local minima.\r\n\r\n%% YIQ\r\n% The YIQ color space is now nearly obsolete, but I revealed my\r\n% personal fondness for it in\r\n% <https:\/\/blogs.mathworks.com\/cleve\/2016\/12\/12\/my-first-matrix-rgb-yiq-and-color-cubes\r\n% a blog post in 2016>.  YIQ was used by the NTSC color standard \r\n% for analog TV in North America from 1954 until 2009.  \r\n% Y stands for _luminance_, I for _in phase_, and Q\r\n% for _quadrature_.  The Y component alone drove black-and-white TVs\r\n% for half a century and is used today to convert RGB to gray scale.\r\n%\r\n% If you have mastered the sliders in RGB space, click on the\r\n% \"rgb\/yiq\" toggle and try your hand there. Y varies between 0.0 and 1.0,\r\n% while I and Q vary between obscure positive and negative limits.\r\n% Again, the score is the 1-norm of the difference, now shown to\r\n% three decimal places.  I find it very difficult to steer to a match,\r\n% even when I can see the score.\r\n%\r\n% This screen shot was taken when the colors do not match and the score \r\n% is far from 0.000.  The YIQ coordinates for \"blue velvet\" are _not_\r\n% [0.633 -0.447 0.302].  But is the variable patch on the right\r\n% too bright or too dark?\r\n%\r\n% <<screen2d.png>>\r\n\r\n%% Two greens\r\n% Green is a special case.  If you color something with the G component\r\n% set to its maximum and the R and B components turned off, most\r\n% people will say it's too bright.  Here are two shades of pure green.\r\n%\r\n% <<two_greens.png>>\r\n%\r\n% In the HTML naming scheme the dark one on the left, with G set to only \r\n% 128, is called \"green\", while the light one on the right,\r\n% with G set to 255, is \"lime\".\r\n\r\n%% Two pinks\r\n% Here are two shades of pink.  One is \"deep pink\", the other is\r\n% \"hot pink\".\r\n%\r\n% <<two_pinks.png>>\r\n%\r\n% Both say, \"click me\".  But the text in one is white and the other black.\r\n% Why?\r\n\r\n%%\r\n% We want the text in dark colored patches to be white and the text in\r\n% light colored patches to be black.  The decision can be based on\r\n% the first component of YIQ, _luminance_,\r\n% which is computed by taking the dot product of a scaled RGB triple with\r\n\r\n   luma = [0.2989  0.5870  0.1140];\r\n \r\n%%\r\n% The RGB triple and the luminance for deep pink are\r\n\r\n   deep = [255 20 147];\r\n   deep_luminance = deep\/255*luma'\r\n\r\n%%\r\n% The corresponding quantities for hot pink are\r\n\r\n   hot = [255 105 180];\r\n   hot_luminance = hot\/255*luma'\r\n   \r\n%%\r\n% The two luminance values fall on either side of 0.5, the luminance of\r\n% gray.  So deep pink gets white text while hot pink gets black text.\r\n\r\n%%\r\n% Today's homework: how many of our colors are dark and how many\r\n% are light?  Can you guess which are the most frequent?\r\n% The answer surprised me.  The ratio is nearly 2 to 1.\r\n\r\n%% Software\r\n% My code for this game is available from\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/67670_play_match_the_color_game\r\n% the MATLAB Central File Exchange>.\r\n\r\n%% color names\r\n\r\n    type match_color_tail\r\n\r\n##### SOURCE END ##### a7be9a234eb04df28dab4ad24ff33b9d\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img decoding=\"async\"  class=\"img-responsive\" src=\"https:\/\/blogs.mathworks.com\/cleve\/files\/screen1.png\" onError=\"this.style.display ='none';\" \/><\/div><!--introduction--><p>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.... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/cleve\/2018\/06\/11\/play-match-the-color-game\/\">read more >><\/a><\/p>","protected":false},"author":78,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,5,23],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/3442"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/comments?post=3442"}],"version-history":[{"count":4,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/3442\/revisions"}],"predecessor-version":[{"id":3446,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/posts\/3442\/revisions\/3446"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/media?parent=3442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/categories?post=3442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/cleve\/wp-json\/wp\/v2\/tags?post=3442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}