{"id":15213,"date":"2016-07-15T12:07:26","date_gmt":"2016-07-15T16:07:26","guid":{"rendered":"http:\/\/mjtsai.com\/blog\/?p=15213"},"modified":"2016-07-15T12:07:26","modified_gmt":"2016-07-15T16:07:26","slug":"improving-color-on-the-web","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2016\/07\/15\/improving-color-on-the-web\/","title":{"rendered":"Improving Color on the Web"},"content":{"rendered":"<p><a href=\"https:\/\/webkit.org\/blog\/6682\/improving-color-on-the-web\/\">Dean Jackson<\/a>:<\/p>\n<blockquote cite=\"https:\/\/webkit.org\/blog\/6682\/improving-color-on-the-web\/\"><p>The past few years have seen a dramatic improvement in display technology. First it was the upgrade to higher-resolution screens, starting with mobile devices and then desktops and laptops. Web developers had to understand high-DPI and know how to implement page designs that used this extra resolution. The next revolutionary improvement in displays is happening now: better color reproduction. Here I&rsquo;ll explain what that means, and how you, the Web developer, can detect such displays and provide a better experience for your users.<\/p>\n<p>[&#8230;]<\/p>\n<p>The Web has often struggled to handle colors correctly. I&rsquo;m sure there are some readers out there who painfully remember <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_colors#Web-safe_colors\">Web-safe colors<\/a>! While we&rsquo;ve moved on from that, we still have limitations, such as HTML and CSS having been defined to work only in the sRGB color space. Just like the example of <a href=\"https:\/\/twitter.com\/hober\/\">hober<\/a>&rsquo;s shoes above, this means there are many colors that your CSS, images, and canvas are unable to represent.<\/p>\n<p>[&#8230;]<\/p>\n<p>WebKit now supports the (new to CSS Color Level 4) <a href=\"https:\/\/drafts.csswg.org\/mediaqueries-4\/#color-gamut\">color-gamut<\/a> media query.<\/p>\n<p>[&#8230;]<\/p>\n<p>This is what members of the WebKit project have proposed for CSS. The current idea is to add a new function called <code>color()<\/code> that can take a color profile as well as the parameters defining the color.<\/p><\/blockquote>\n<p><a href=\"http:\/\/shapeof.com\/archives\/2016\/7\/webkit_improving_color_on_the_web.html\">Gus Mueller<\/a>:<\/p>\n<blockquote cite=\"http:\/\/shapeof.com\/archives\/2016\/7\/webkit_improving_color_on_the_web.html\">\n<p>This writeup is an incredibly great explanation of wide gamut issues with a touch on deep color as well. If you are a developer who uses color in any way, you&rsquo;re going to want to read this. Wide gamut displays are already here.<\/p>\n<\/blockquote>\n<p>Previously: <a href=\"http:\/\/mjtsai.com\/blog\/2016\/04\/22\/ipad-pro-true-tone-and-color-gamut\/\">iPad Pro, True Tone, and Color Gamut<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Dean Jackson: The past few years have seen a dramatic improvement in display technology. First it was the upgrade to higher-resolution screens, starting with mobile devices and then desktops and laptops. Web developers had to understand high-DPI and know how to implement page designs that used this extra resolution. The next revolutionary improvement in displays [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[566,1357,338,31,1380,30,1381,96,328],"class_list":["post-15213","post","type-post","status-publish","format-standard","hentry","category-technology","tag-color","tag-colorsync","tag-css","tag-ios","tag-ios-10","tag-mac","tag-macos-10-12","tag-web","tag-webkit"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/15213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=15213"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/15213\/revisions"}],"predecessor-version":[{"id":15214,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/15213\/revisions\/15214"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=15213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=15213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=15213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}