{"id":5981,"date":"2025-05-23T09:34:34","date_gmt":"2025-05-23T14:34:34","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5981"},"modified":"2025-05-23T09:35:16","modified_gmt":"2025-05-23T14:35:16","slug":"p3-in-color-inputs","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/p3-in-color-inputs\/","title":{"rendered":"P3 in Color Inputs"},"content":{"rendered":"\n

I just complained<\/a> that color inputs couldn’t deal in P3 colors. Looks like Safari is the first-mover<\/a> on supporting that, as well as alpha:<\/p>\n\n\n

<input<\/span> \n  type<\/span>=\"color\"<\/span> \n  value<\/span>=\"oklab(59% 0.1 0.1 \/ 0.5)\"<\/span> \n  colorspace<\/span>=\"display-p3\"<\/span> \n  alpha<\/span>\n><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Under the Sliders<\/strong> tab, it’s still just R G & B, but it seems to me you can produce colors still in the P3 space. And if you’ve set the color space, it gives you a P3 hex code there (which I didn’t even know was a thing honestly). The actual value<\/code> that you get is like: color(display-p3 0.921957 0.31855 0.969179)<\/code>. Which I guess is fine? Just don’t expect to get out a color in the same format you put in. <\/p>\n\n\n\n\n\n\n\n
Safari also displays the alpha transparency in the preview color chip, which is great to see. This might be tricky to actually use right away, depending on what you’re doing, as non-supporting browsers will see the value as invalid and display\/return black\/#000000<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
I just complained that color inputs couldn’t deal in P3 colors. Looks like Safari is the first-mover on supporting that, as well as alpha: I was able to make a quick demo and see it on iOS: Under the Sliders tab, it’s still just R G & B, but it seems to me you can […]<\/p>\n","protected":false},"author":1,"featured_media":5984,"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,264],"class_list":["post-5981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-color","tag-display-p3","tag-inputs"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/CleanShot-2025-05-23-at-07.32.58%402x.png?fit=1938%2C1850&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5981","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=5981"}],"version-history":[{"count":3,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5981\/revisions"}],"predecessor-version":[{"id":5986,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5981\/revisions\/5986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5984"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
I was able to make a quick demo<\/a> and see it on iOS:<\/p>\n\n\n\n