P3 in Color Inputs

Chris Coyier Chris Coyier on

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:

<input 
  type="color" 
  value="oklab(59% 0.1 0.1 / 0.5)" 
  colorspace="display-p3" 
  alpha
>Code language: HTML, XML (xml)

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 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 that you get is like: color(display-p3 0.921957 0.31855 0.969179). Which I guess is fine? Just don’t expect to get out a color in the same format you put in.

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

Wanna be a better designer?

Frontend Masters logo

Sarah Drasner is a heck of a designer, and has a wonderful course called Design for Developers where you'll learn to be a self-sufficient designer.

7-Day Free Trial

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.