{"id":36,"date":"2025-09-07T12:05:35","date_gmt":"2025-09-07T12:05:35","guid":{"rendered":"https:\/\/gsama.cc\/?p=36"},"modified":"2025-09-13T14:13:32","modified_gmt":"2025-09-13T14:13:32","slug":"deltae","status":"publish","type":"post","link":"https:\/\/gsama.cc\/?p=36","title":{"rendered":"is it blue or black?"},"content":{"rendered":"\n<p>Each of us perceives colour differently. Our eyes, our brains, even the lighting around us \u2014 all influence what we actually see.<\/p>\n\n\n\n<p>I built a game to answer the question &#8211; <br>how small a difference you can actually detect? <\/p>\n\n\n\n<p>Skip the explanation and jump to the game<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/gsama.cc\/custompages\/deltae_game_v1.html\" target=\"_blank\" rel=\"noreferrer noopener\">deltaE game<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-fce84ff9-8c38-415b-b93c-d4454a7c2f54\"><strong>\u0394E<\/strong><\/h2>\n\n\n\n<p id=\"block-b1d00363-f935-4c4a-ad75-363a6aadc3f2\"><strong>\u0394E<\/strong> is a score for \u201chow far apart\u201d two colours are:<br>\u0394E = 0 \u2192 identical colors.<br>\u0394E &lt; 2 \u2192 is usually imperceptible to the human eye.<br>\u0394E &lt; 10+ \u2192 obvious, clearly distinct colors.<br>The lower the number you can detect, the sharper your colour vision.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-79570f63-ade3-4047-9391-c381361a46e6\">The Math<\/h2>\n\n\n\n<p id=\"block-2051928e-d8a1-413a-89e1-78a91c9881b1\">To calculate \u0394E, colors are plotted into a three-dimensional map, called <strong>Lab color space<\/strong>.<br><strong>L*<\/strong> \u2192 brightness (light to dark)<br><strong>a*<\/strong> \u2192 green to red axis<br><strong>b*<\/strong> \u2192 blue to yellow axis<\/p>\n\n\n\n<p id=\"block-4f22c6f5-83ec-476e-a98c-00e9d249fe3d\">Once in this space, the difference between two colors is just <strong>Euclidean distance<\/strong> \u2014 the same formula used to measure the distance between two points in geometry<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\Delta E = \\sqrt{(L_1 - L_2)^2 + (a_1 - a_2)^2 + (b_1 - b_2)^2}<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The Code<\/h2>\n\n\n\n<p>The Code uses the latest colour distance formula <strong>CIEDE2000<\/strong> that adjust the math to match perception better. <\/p>\n\n\n\n<p class=\"has-small-font-size\">References <br><a href=\"https:\/\/en.wikipedia.org\/wiki\/Color_difference\">https:\/\/en.wikipedia.org\/wiki\/Color_difference<\/a><br><a href=\"https:\/\/hajim.rochester.edu\/ece\/sites\/gsharma\/papers\/CIEDE2000CRNAFeb05.pdf\">https:\/\/hajim.rochester.edu\/ece\/sites\/gsharma\/papers\/CIEDE2000CRNAFeb05.pdf<\/a> <\/p>\n\n\n\n<p class=\"has-small-font-size\">Notes<br>I didn&#8217;t write a single line of code. It&#8217;s all created using AI tools<br>Everything is in one html file, you can download it and play locally<br>Your GPU and Displays may affect your score<\/p>\n\n\n\n<p class=\"has-small-font-size\">Update: The game is not on GitHub: <a href=\"https:\/\/github.com\/gsama\/deltaE-game.git\">https:\/\/github.com\/gsama\/deltaE-game.git<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Each of us perceives colour differently. Our eyes, our brains, even the lighting around us \u2014 all influence what we actually see. I built a game to answer the question &#8211; how small a difference you can actually detect? Skip the explanation and jump to the game \u0394E \u0394E is a score for \u201chow far [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[13,11,12],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-makerspacebgm-2","tag-math-2","tag-science-2"],"_links":{"self":[{"href":"https:\/\/gsama.cc\/index.php?rest_route=\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gsama.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gsama.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gsama.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gsama.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=36"}],"version-history":[{"count":3,"href":"https:\/\/gsama.cc\/index.php?rest_route=\/wp\/v2\/posts\/36\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/gsama.cc\/index.php?rest_route=\/wp\/v2\/posts\/36\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/gsama.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gsama.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gsama.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}