{"id":1688,"date":"2024-04-12T16:46:41","date_gmt":"2024-04-12T22:46:41","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1688"},"modified":"2024-04-12T16:46:43","modified_gmt":"2024-04-12T22:46:43","slug":"color-picker-with-display-p3","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/color-picker-with-display-p3\/","title":{"rendered":"Color Picker with Display P3"},"content":{"rendered":"\n

One of my recent moanings-and-groanings is the fact that seemingly no color-picker supports Display P3 colors. Display P3 allows you to use far more vivid colors<\/a> then we’ve historically had access to in CSS, but now are totally supported in CSS through newer color functions like oklch()<\/a><\/code>. Not even the built-in color picker to macOS. <\/p>\n\n\n\n

Well it’s time for me to quit my bitchin’ because I’ve just seen two. I only looked at Mac stuff because that’s what I use. Feel free to chime in with options on other operating systems. <\/p>\n\n\n\n

XScope<\/a> can do it \u2014 but XScope is $50 and I find it heavy handed for the work I do. System Color Picker<\/a> is free<\/em> and I find very nice in it’s simplicity (it’s just a UX improvement over the default). The workflow I want, and it delivers, is: pick color from screen, have color on clipboard in OKLCH (that’s it).<\/p>\n\n\n\n\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

One of my recent moanings-and-groanings is the fact that seemingly no color-picker supports Display P3 colors. Display P3 allows you to use far more vivid colors then we’ve historically had access to in CSS, but now are totally supported in CSS through newer color functions like oklch(). Not even the built-in color picker to macOS. […]<\/p>\n","protected":false},"author":1,"featured_media":1695,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[81,154],"class_list":["post-1688","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-color","tag-display-p3"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/04\/color-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=1688"}],"version-history":[{"count":4,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1688\/revisions"}],"predecessor-version":[{"id":1696,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1688\/revisions\/1696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/1695"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=1688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=1688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}