{"id":2207,"date":"2020-07-08T12:42:46","date_gmt":"2020-07-08T12:42:46","guid":{"rendered":"https:\/\/devexperts.com\/blog\/?p=2207"},"modified":"2022-10-05T11:31:01","modified_gmt":"2022-10-05T11:31:01","slug":"getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference","status":"publish","type":"post","link":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/","title":{"rendered":"Getting to the Bottom of the RGB Pixels. Part 1: Color Difference"},"content":{"rendered":"\n<div class=\"wp-block-devexperts-custom-thumbnail\"><figure><picture><source media=\"(max-width: 639px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-600x338.png 2x, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-300x169.png 1x\"\/><source media=\"(min-width: 640px) and (max-width: 767px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-1168x657.png 2x, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-600x338.png 1x\"\/><source media=\"(min-width: 768px) and (max-width: 1023px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-1168x657.png 2x, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-728x410.png 1x\"\/><source media=\"(min-width: 1024px) and (max-width: 1279px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-1168x657.png 1x, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-690x388.png 1x\"\/><source media=\"(min-width: 1280px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-1752x986.png 2x,\n\t\t\t\thttps:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-1752x986.png 1.5x,\n\t\t\t\thttps:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-870x489.png 1x\"\/><img decoding=\"async\" class=\"singleThumbnail lazyload\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-1024x576.png\" data-src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/Post-inner-banner-2336x1314-1-870x489.png\"\/><\/picture><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-introduction\"> Introduction <\/h2>\n\n\n\n<p>Devexperts Quality Assurance team is happy to update you about our latest news. We precisely compare testing tools we use to get the best performance<sup><a href=\"#footnote_1_2207\" id=\"identifier_1_2207\" class=\"footnote-link footnote-identifier-link\" title=\"Roman Zakharov. &ldquo;Thirty Seconds to Pass: Performance Comparison of iOS UI Testing Frameworks&rdquo;. Devexperts Blog, Devexperts LLC, 2020. devexperts.com\/blog\/ios-ui-testing-frameworks-performance-comparison\">1<\/a><\/sup>. We adapt our testing process when the business changes at a fast pace<sup><a href=\"#footnote_2_2207\" id=\"identifier_2_2207\" class=\"footnote-link footnote-identifier-link\" title=\"Alexander Volkov. &ldquo;Maintaining Trading Platforms Uptime Through Turbulent Markets&rdquo;. Devexperts Blog, Devexperts LLC, 2020,devexperts.com\/blog\/maintaining-trading-platforms-uptime-through-turbulent-markets\">2<\/a><\/sup><sup><a href=\"#footnote_3_2207\" id=\"identifier_3_2207\" class=\"footnote-link footnote-identifier-link\" title=\"Marina Kauponen and Sofia Lyateva. &ldquo;Work from Home Principles during a&nbsp;Pandemic&rdquo;. Devexperts Blog, Devexperts LLC, 2020, devexperts.com\/blog\/work-from-home-principles-during-a-pandemic\">3<\/a><\/sup>. And we are beginning to open-source our internal projects with <a href=\"https:\/\/testfailed.com\/suit-case\">SUITCase<\/a> \u2013 a great tool for\u00a0screenshot testing of iOS and iPadOS apps((Devexperts team. &#8220;devexperts\/suitcase&#8221;. A Public Repository on GitHub, Devexperts LLC, 2020, <a href=\"http:\/\/github.com\/devexperts\/suitcase\">github.com\/devexperts\/suitcase<\/a>)). <\/p>\n\n\n\n<p>The main idea of SUITCase is to provide many different comparing strategies. It&nbsp;does not only support testing with pixel by pixel accuracy. Also, it can tolerate minor color differences or completely ignore the color hue. The way to calculate the&nbsp;color difference and the light intensity is not as obvious as it might seem.  In this article, we will tell you about the different approaches to calculating the color difference between two colors and why it is important in screenshot testing.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-problem\">Problem <\/h2>\n\n\n\n<p>Let\u2019s suppose we test Apple&#8217;s Health application. We have recorded the reference screenshots on iOS 13.0 and want to run screenshots tests a few versions later \u2013 on&nbsp;simulators running iOS 13.5. The next screenshots show the Health app on these two versions. How many user interface changes can you see?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-screenshots-1024x893.png\" alt=\"There are two screenshots of Apple's Health app on iOS 13.0 and 13.5.\" class=\"wp-image-2208\" width=\"512\" height=\"447\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-screenshots-1024x893.png 1024w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-screenshots-300x262.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-screenshots-768x670.png 768w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-screenshots-320x279.png 320w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-screenshots-382x333.png 382w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-screenshots-578x504.png 578w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-screenshots.png 1098w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><figcaption>The screenshots of Apple&#8217;s Health app on iOS 13.0 and 13.5.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Some changes are more noticeable than others. For example, the Browse button in&nbsp;the tab bar became bigger to match the Summary button. The little arrows to the right of the category cells are thinner while retaining their color. Speaking of color, have you noticed the Mindfulness icon\u2019s different hue? <\/p>\n\n\n\n<p>The next image shows all of the changes made. The pixels that do not match are displayed with #000000 color, while the remaining are #FFFFFF.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-pixels-deep-comparison.png\" alt=\"This image shows the graphical difference between the two screenshots mentioned before. Most of the changes are hard-to-see but may leed to unstable UI tests.\" class=\"wp-image-2209\" width=\"205\" height=\"438\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-pixels-deep-comparison.png 410w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-pixels-deep-comparison-140x300.png 140w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-pixels-deep-comparison-320x684.png 320w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-pixels-deep-comparison-382x816.png 382w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><figcaption> The graphical difference between the screenshots of Health app. <\/figcaption><\/figure>\n<\/div>\n\n\n<p> The texts in the navigation bar slightly changed their position. While it is hard to see on the side-by-side comparison, we can notice it if we position one screenshot on the top of the other and change their order repeatedly. There are also minor changes to some of the other icons. The last significant difference is the Activity icon\u2019s hue. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-icon-colors-orange-malibu-vermilion-robins-egg-blue-1024x706.png\" alt=\"This image shows the difference between the two icons. While the activity icon's color is almost the same, the mindfulness icon has changed noticeably. \" class=\"wp-image-2222\" width=\"512\" height=\"353\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-icon-colors-orange-malibu-vermilion-robins-egg-blue-1024x706.png 1024w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-icon-colors-orange-malibu-vermilion-robins-egg-blue-300x207.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-icon-colors-orange-malibu-vermilion-robins-egg-blue-768x530.png 768w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-icon-colors-orange-malibu-vermilion-robins-egg-blue-320x221.png 320w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-icon-colors-orange-malibu-vermilion-robins-egg-blue-382x263.png 382w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-icon-colors-orange-malibu-vermilion-robins-egg-blue-578x399.png 578w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-icon-colors-orange-malibu-vermilion-robins-egg-blue.png 1341w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><figcaption> The difference between colors of iOS 13.0 and 13.5. <\/figcaption><\/figure>\n<\/div>\n\n\n<p>Let&#8217;s compare the Activity and Mindfulness icons&#8217; color changes. <\/p>\n\n\n\n<p>The difference between Vermillion and Orange is barely visible, while Robin\u2019s Egg Blue is easy to distinguish from Malibu. We don\u2019t want to treat minor color differences the way we pay attention to much more noticeable changes. Also, we&nbsp;don\u2019t want to receive false-negative test results because of nearly invisible changes.<\/p>\n\n\n\n<p>So, how should we calculate the color difference? <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-color-difference\">Color difference<\/h2>\n\n\n\n<p>Let&#8217;s quickly refresh the things we know about RGB pixels. The colors of RGB spaces are relatively easy to display because the majority of modern screens (including iOS and iPadOS devices) use physical RGB pixels. All you have to do is to&nbsp;mix three additive primary colors (red, green, and blue). The 24-bit RGB model allows us to create about 16.7 million colors mixed with the 256 discrete levels of&nbsp;each color component((Michael Stokes, Matthew Anderson, Srinivasan Chandrasekar, and Ricardo Motta. &#8220;A Standard Default Color Space for the Internet: sRGB&#8221;. International Color Consortium, ICC, 1996,  <a href=\"http:\/\/color.org\/sRGB.xalter\">color.org\/sRGB.xalter<\/a>)). <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/color-difference.svg\" alt=\"\" class=\"wp-image-2267\" width=\"584\" height=\"149\"\/><\/figure>\n<\/div>\n\n\n<p> What is the difference between the two colors in the 24-bit RGB model? We have two points in a three-dimensional space (called the color cube), so the Euclidian distance (\u0394<em>C<sub>E<\/sub><\/em>) should be alright. <\/p>\n\n\n\n<p> The problem is the human eye does not perceive colors the way electronic devices display them. We differentiate shades of green more effectively than shades of&nbsp;blue and red((Adeel Mahmood Javaid. &#8220;Why does the human eye see more shades of green than any other colour?&#8221;. A Personal Blog on LinkedIn, Adeel Mahmood Javaid, 2016, <a href=\"http:\/\/linkedin.com\/pulse\/why-does-human-eye-see-more-shades-green-than-any-other-adeel-javaid\">linkedin.com\/pulse\/why-does-human-eye-see-more-shades-green-than-any-other-adeel-javaid<\/a>)) (even if it is hard to name them((Randall Patrick Munroe. \u201cColor Survey Results \u2013 xkcd\u201d. xkcd Blog, Randall Patrick Munroe, 2010, <a href=\"http:\/\/blog.xkcd.com\/2010\/05\/03\/color-survey-results\">blog.xkcd.com\/2010\/05\/03\/color-survey-results<\/a>))). Our ancestors lived in a green world, and our eyes have not adapted to the modern world yet. To improve the color components&#8217; contribution, we should use a weighted sum instead of a simple sum before calculating the square root.  <\/p>\n\n\n\n<p> There is a great article in CompuPhase((Thiadmer Riemersma. &#8220;Colour Metric&#8221;. CompuPhase Website, 2019, <a href=\"http:\/\/compuphase.com\/cmetric.htm\">compuphase.com\/cmetric.htm<\/a>)) that suggests two ways to calculate weighted Euclidean distance functions. The first one (\u0394<em>C<sub>1<\/sub><\/em>) uses two fixed sets of weights depending on the mean of the red components&#8217; values. If the mean is less than a half, the function adjusts the blue components\u2019 difference more than the red components\u2019. If the mean is high, it values the red components\u2019 contribution more.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/weighted-1.svg\" alt=\"\" class=\"wp-image-2269\" width=\"605\" height=\"211\"\/><\/figure>\n<\/div>\n\n\n<p> The difference between the green components is the top priority in both cases.<\/p>\n\n\n\n<p> There is another explanation to this approach \u2013 we can use a simple Euclidian distance but in the modifications of the color cube. The color cube stretches to form two color parallelepipeds. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/cubes-o.svg\" alt=\"There are three 3D figures \u2013 the original color cube and two parallelepipeds. The parallelepipeds are noticeably different from the cube and each other, as their red, green, and blue sides are longer according to the formula. \" class=\"wp-image-2298\" width=\"641\" height=\"284\"\/><\/figure>\n<\/div>\n\n\n<p> The second way to calculate the color difference (\u0394<em>C<sub>2<\/sub><\/em>) transforms the color cube smoothly. Instead of using two fixed sets of weights, it applies more precise weights. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/weighted-2.svg\" alt=\"\" class=\"wp-image-2271\" width=\"561\" height=\"50\"\/><\/figure>\n<\/div>\n\n\n<p> Let&#8217;s compare the three approaches mentioned above. The next image shows five colors. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/colors-o.svg\" alt=\"This image shows five squares filled with different colors. The Lemon square is surrounded by the four others to make it easier to compare colors. \" class=\"wp-image-2301\" width=\"567\" height=\"567\"\/><figcaption> The colors we want to compare. <\/figcaption><\/figure>\n<\/div>\n\n\n<p> We will calculate the color difference between Lemon and four other colors \u2013 Tangerine, Banana, Asparagus, and Lime. Which color do you think is the closest to&nbsp;the Lemon? And which one is the least similar? <\/p>\n\n\n\n<p> The next image shows the color differences calculated by three methods. The results are normalized to make the differences between #000000 and #FFFFFF equal to&nbsp;1.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/distances-o.svg\" alt=\"This image resembles the previous, but now there are calculated differences displayed as well. \" class=\"wp-image-2304\" width=\"567\" height=\"567\"\/><figcaption> The calculated differences of colors. <\/figcaption><\/figure>\n<\/div>\n\n\n<p>According to results, all three formulae tell us that Asparagus is the most distant color to Lemon. But what about the closest? The simple Euclidian distance (\u0394<em>C<sub>E<\/sub><\/em>) is the least for the Tangerine, and the first weighted distance (\u0394<em>C<sub>1<\/sub><\/em>) says the Lime is the most similar to Lemon. The limes and lemons are greatly similar in the matter of taste, but according to the majority of our QA team, the two most similar colors are Lemon and Banana. The second weighted distance (\u0394<em>C<sub>2<\/sub><\/em>) proves it.<\/p>\n\n\n\n<p>There are other more precise methods, but they require converting RGB pixels to other representations((Charles Poynton. &#8220;Frequently Asked Questions about Color&#8221;. Charles Poynton\u2019s Website, Charles Poynton, 1999,  <a href=\"http:\/\/poynton.ca\/ColorFAQ.html\">poynton.ca\/ColorFAQ.html<\/a>)). Such conversions lead to more calculations, so we chose \u0394<em>C<sub>2<\/sub><\/em> as a color difference calculation method for SUITCase. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-result\">Result<\/h2>\n\n\n\n<p>Let\u2019s go back to the example in the beginning. <\/p>\n\n\n\n<p>Now we know how to calculate the difference between Orange and Vermillion which equals 0.08, while the difference between Malibu and Robin\u2019s Egg Blue is much higher and equals 0.193.  Let\u2019s see how choosing the color difference threshold (<em>T<\/em>), that separates matching and non-matching pixels, affects the testing stability. The next image shows non-matching pixels for<em> T<\/em> \u2208 {0.05, 0.1, 0.2}.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-color-colour-difference.png\" alt=\"Three screenshots are allowing us to compare how changing the threshold affects stability and accuracy. The threshold that equals one-tenth seems to be a good trade-off. \" class=\"wp-image-2226\" width=\"640\" height=\"510\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-color-colour-difference.png 1280w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-color-colour-difference-300x239.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-color-colour-difference-1024x815.png 1024w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-color-colour-difference-768x611.png 768w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-color-colour-difference-320x255.png 320w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-color-colour-difference-382x304.png 382w, https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/06\/ios-13-health-application-app-design-changes-color-colour-difference-578x460.png 578w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/figure>\n<\/div>\n\n\n<p> You can see how increasing a threshold leads to a smaller amount of non-matching pixels. Our screenshot testing tool SUITCase allows users to configure this threshold which equals 0.1&nbsp;by default.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n\n\n\n<p>Ignoring minor color differences allows us to increase our screenshot testing stability. You can try this feature right now as the code is available on GitHub((Devexperts team. &#8220;devexperts\/suitcase&#8221;. A Public Repository on GitHub, Devexperts LLC, 2020, <a href=\"http:\/\/github.com\/devexperts\/suitcase\">github.com\/devexperts\/suitcase<\/a>)), and we will be happy for your feedback. <\/p>\n\n\n\n<p>We hope this article will help you to improve your screenshot testing, even if you develop tests for other target platforms. <\/p>\n\n\n\n<p class=\"has-text-align-left\">Take our little quiz to know how good you are in differentiating colors: <a href=\"https:\/\/forms.gle\/ZBjRVqd1P7VVv2mz8\">https:\/\/forms.gle\/ZBjRVqd1P7VVv2mz8<\/a> <\/p>\n\n\n\n<p><strong>Which tools do you use to automate screenshot testing? How do you treat minor color differences?<\/strong><\/p>\n\n\n\n<p><strong>References:<\/strong><\/p>\n<ol class=\"footnotes\"><li id=\"footnote_1_2207\" class=\"footnote\">Roman Zakharov. &#8220;Thirty Seconds to Pass: Performance Comparison of iOS UI Testing Frameworks&#8221;. Devexperts Blog, Devexperts LLC, 2020. <a href=\"https:\/\/devexperts.com\/blog\/ios-ui-testing-frameworks-performance-comparison\">devexperts.com\/blog\/ios-ui-testing-frameworks-performance-comparison<\/a><span class=\"footnote-back-link-wrapper\"> [<a href=\"#identifier_1_2207\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><li id=\"footnote_2_2207\" class=\"footnote\">Alexander Volkov. &#8220;Maintaining Trading Platforms Uptime Through Turbulent Markets&#8221;. Devexperts Blog, Devexperts LLC, 2020,<br><a href=\"https:\/\/devexperts.com\/blog\/maintaining-trading-platforms-uptime-through-turbulent-markets\/\">devexperts.com\/blog\/maintaining-trading-platforms-uptime-through-turbulent-markets<\/a><span class=\"footnote-back-link-wrapper\"> [<a href=\"#identifier_2_2207\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><li id=\"footnote_3_2207\" class=\"footnote\">Marina Kauponen and Sofia Lyateva. &#8220;Work from Home Principles during a\u00a0Pandemic&#8221;. Devexperts Blog, Devexperts LLC, 2020, <a href=\"https:\/\/devexperts.com\/blog\/work-from-home-principles-during-a-pandemic\">devexperts.com\/blog\/work-from-home-principles-during-a-pandemic<\/a><span class=\"footnote-back-link-wrapper\"> [<a href=\"#identifier_3_2207\" class=\"footnote-link footnote-back-link\">&#8617;<\/a>]<\/span><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>Introduction Devexperts Quality Assurance team is happy to update you about our latest news. We precisely compare testing tools we &hellip; <\/p>\n","protected":false},"author":39,"featured_media":2315,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2020],"tags":[1384,25,496],"class_list":["post-2207","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fintech","tag-automation","tag-qa","tag-testing"],"acf":{"nifty_post_card_image":4313,"nifty_post_card_index_big":4316,"nifty_post_inner_image":4315,"nifty_post_card_banner":4314},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Getting to the bottom of the RGB pixels. Part 1: Color difference \u2013 Blog<\/title>\n<meta name=\"description\" content=\"Meet SUITCase \u2013 the open-source tool by Devexperts. Made for screenshot testing of iOS apps, it precisely compares the colors of RGB pixels.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting to the Bottom of the RGB Pixels. Part 1: Color Difference\" \/>\n<meta property=\"og:description\" content=\"Meet SUITCase \u2013 the open-source tool by Devexperts. Made for screenshot testing of iOS apps, it precisely compares the colors of RGB pixels.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/\" \/>\n<meta property=\"og:site_name\" content=\"Devexperts Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/devexperts\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-08T12:42:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-05T11:31:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/SUITCase-open-source-tool-for-screenshot-testing.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Roman Zakharov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@devexperts\" \/>\n<meta name=\"twitter:site\" content=\"@devexperts\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roman Zakharov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/\"},\"author\":{\"name\":\"Roman Zakharov\"},\"headline\":\"Getting to the Bottom of the RGB Pixels. Part 1: Color Difference\",\"datePublished\":\"2020-07-08T12:42:46+00:00\",\"dateModified\":\"2022-10-05T11:31:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/\"},\"wordCount\":1352,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/suitcase-open-sourced-tool-for-screenshot-ios-testing-3.png\",\"keywords\":[\"automation\",\"QA\",\"testing\"],\"articleSection\":[\"Fintech\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/\",\"url\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/\",\"name\":\"Getting to the bottom of the RGB pixels. Part 1: Color difference \u2013 Blog\",\"isPartOf\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/suitcase-open-sourced-tool-for-screenshot-ios-testing-3.png\",\"datePublished\":\"2020-07-08T12:42:46+00:00\",\"dateModified\":\"2022-10-05T11:31:01+00:00\",\"description\":\"Meet SUITCase \u2013 the open-source tool by Devexperts. Made for screenshot testing of iOS apps, it precisely compares the colors of RGB pixels.\",\"breadcrumb\":{\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#primaryimage\",\"url\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/suitcase-open-sourced-tool-for-screenshot-ios-testing-3.png\",\"contentUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/suitcase-open-sourced-tool-for-screenshot-ios-testing-3.png\",\"width\":3840,\"height\":700,\"caption\":\"Compare the colors of RGB pixels precisely\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devexperts.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting to the Bottom of the RGB Pixels. Part 1: Color Difference\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devexperts.com\/blog\/#website\",\"url\":\"https:\/\/devexperts.com\/blog\/\",\"name\":\"Devexperts Blog\",\"description\":\"We make complex finance ideas on technology, innovation and business simple\",\"publisher\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devexperts.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\",\"name\":\"Devexperts LLC\",\"url\":\"https:\/\/devexperts.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png\",\"contentUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png\",\"width\":167,\"height\":30,\"caption\":\"Devexperts LLC\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/devexperts\/\",\"https:\/\/x.com\/devexperts\",\"https:\/\/www.linkedin.com\/company\/devexperts\",\"https:\/\/www.youtube.com\/channel\/UCF3FRmes2KrcVsTXQ1aAB5w\/featured\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting to the bottom of the RGB pixels. Part 1: Color difference \u2013 Blog","description":"Meet SUITCase \u2013 the open-source tool by Devexperts. Made for screenshot testing of iOS apps, it precisely compares the colors of RGB pixels.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/","og_locale":"en_US","og_type":"article","og_title":"Getting to the Bottom of the RGB Pixels. Part 1: Color Difference","og_description":"Meet SUITCase \u2013 the open-source tool by Devexperts. Made for screenshot testing of iOS apps, it precisely compares the colors of RGB pixels.","og_url":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/","og_site_name":"Devexperts Blog","article_publisher":"https:\/\/www.facebook.com\/devexperts\/","article_published_time":"2020-07-08T12:42:46+00:00","article_modified_time":"2022-10-05T11:31:01+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/SUITCase-open-source-tool-for-screenshot-testing.png","type":"image\/png"}],"author":"Roman Zakharov","twitter_card":"summary_large_image","twitter_creator":"@devexperts","twitter_site":"@devexperts","twitter_misc":{"Written by":"Roman Zakharov","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#article","isPartOf":{"@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/"},"author":{"name":"Roman Zakharov"},"headline":"Getting to the Bottom of the RGB Pixels. Part 1: Color Difference","datePublished":"2020-07-08T12:42:46+00:00","dateModified":"2022-10-05T11:31:01+00:00","mainEntityOfPage":{"@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/"},"wordCount":1352,"commentCount":0,"publisher":{"@id":"https:\/\/devexperts.com\/blog\/#organization"},"image":{"@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#primaryimage"},"thumbnailUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/suitcase-open-sourced-tool-for-screenshot-ios-testing-3.png","keywords":["automation","QA","testing"],"articleSection":["Fintech"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/","url":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/","name":"Getting to the bottom of the RGB pixels. Part 1: Color difference \u2013 Blog","isPartOf":{"@id":"https:\/\/devexperts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#primaryimage"},"image":{"@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#primaryimage"},"thumbnailUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/suitcase-open-sourced-tool-for-screenshot-ios-testing-3.png","datePublished":"2020-07-08T12:42:46+00:00","dateModified":"2022-10-05T11:31:01+00:00","description":"Meet SUITCase \u2013 the open-source tool by Devexperts. Made for screenshot testing of iOS apps, it precisely compares the colors of RGB pixels.","breadcrumb":{"@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#primaryimage","url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/suitcase-open-sourced-tool-for-screenshot-ios-testing-3.png","contentUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2020\/07\/suitcase-open-sourced-tool-for-screenshot-ios-testing-3.png","width":3840,"height":700,"caption":"Compare the colors of RGB pixels precisely"},{"@type":"BreadcrumbList","@id":"https:\/\/devexperts.com\/blog\/getting-to-the-bottom-of-the-rgb-pixels-part-1-color-difference\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devexperts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting to the Bottom of the RGB Pixels. Part 1: Color Difference"}]},{"@type":"WebSite","@id":"https:\/\/devexperts.com\/blog\/#website","url":"https:\/\/devexperts.com\/blog\/","name":"Devexperts Blog","description":"We make complex finance ideas on technology, innovation and business simple","publisher":{"@id":"https:\/\/devexperts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devexperts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/devexperts.com\/blog\/#organization","name":"Devexperts LLC","url":"https:\/\/devexperts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png","contentUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png","width":167,"height":30,"caption":"Devexperts LLC"},"image":{"@id":"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/devexperts\/","https:\/\/x.com\/devexperts","https:\/\/www.linkedin.com\/company\/devexperts","https:\/\/www.youtube.com\/channel\/UCF3FRmes2KrcVsTXQ1aAB5w\/featured"]}]}},"_links":{"self":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/2207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/comments?post=2207"}],"version-history":[{"count":64,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/2207\/revisions"}],"predecessor-version":[{"id":5071,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/2207\/revisions\/5071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/media\/2315"}],"wp:attachment":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/media?parent=2207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/categories?post=2207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/tags?post=2207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}