{"id":136,"date":"2019-11-04T23:45:34","date_gmt":"2019-11-05T04:45:34","guid":{"rendered":"http:\/\/qlikwithfriends.com\/?p=136"},"modified":"2019-12-02T02:07:58","modified_gmt":"2019-12-02T07:07:58","slug":"color-confusion","status":"publish","type":"post","link":"https:\/\/qlikwithfriends.com\/index.php\/2019\/11\/04\/color-confusion\/","title":{"rendered":"Color Confusion"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

For this post I\u2019ll be talking about something that isn\u2019t really a Qlik issue, but I initially thought it was. Recently, I was making changes to some apps to standardize the colors that were used in charts and tables. We decided upon standards for each color and changes were made in order to load the RGB color values from an external script file. To test, we used a color checker\u2014in this case, a Chrome add-in\u2014to verify that the color was the correct RGB value.<\/p>

Simple\u2014or so I thought.<\/p>

To my surprise, some of the colors were incorrect, even in some of the simplest formulas. After a quick check, I realized that the formulas in the Qlik expressions were correct, but Qlik was actually displaying a different color.<\/p>

For instance, in the example below, you can see that the green color being set in the formula is RGB(152,251,152), but the color displayed is RGB(152,251,151). That\u2019s close, but not exact.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

What\u2019s going on here?<\/p>

After researching it for a while, I realized the issue was not with Qlik, but with Chrome. In recent versions of Chrome, the default behavior is to adjust colors to match the color space of the display driver being used. I use a Benq PD series monitor that is color calibrated. That really helps me maintain true color accuracy, but in this case, it turns out to be the source of the problem.<\/p>

All Chrome is doing here is adjusting the colors in the browser to use the corrected value.<\/p>

Fortunately, there\u2019s a quick way to turn this off when you really must see the actual RGB values. Here\u2019s how.<\/p>

  1. In your Chrome browser\u2019s address bar, navigate to http:\/\/chrome\/flags<\/a>.<\/li>
  2. In the search box at top, search for \u201cForce Color Profile\u201d.<\/li>
  3. Change the selection in the dropdown from \u201cDefault\u201d to \u201csRGB\u201d.<\/li>
  4. Select the option to relaunch the browser.<\/li><\/ol>

    Chrome will now display the actual color that\u2019s requested by the color code.<\/p>

    Problem solved, with a few considerations.<\/p>

    First, note that Chrome, and possibly some other browsers, have different algorithms to render colors. Overriding this is a quick way to test exact colors, but you\u2019ll want to set the flag back to \u201cDefault\u201d after you\u2019re done testing. Otherwise, colors in the browser won\u2019t be color calibrated and match the monitor quality you paid for.<\/p>

    Second, keep in mind that your visualizations are used by many users, each of whom may have a different monitor capable of displaying (or limited to) a specific gamut of colors. In plain English, this means that the colors you see when designing your visualizations may look slightly different to other users. Therefore, a best practice is to always use a color palette that is compatible with most color spaces and displays reasonably similar on most monitors\u2014but that is a topic for a future post.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

    For this post I\u2019ll be talking about something that isn\u2019t really a Qlik issue, but I initially thought it was. Recently, I was making changes to some apps to standardize the colors that were used in charts and tables. We decided upon standards for each color and changes were made …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[6,8,7],"tags":[],"class_list":["post-136","post","type-post","status-publish","format-standard","hentry","category-qliksense","category-quick-tip","category-visualizations"],"_links":{"self":[{"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":3,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/136\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qlikwithfriends.com\/index.php\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}