Add wide gamut P3 and alpha transparency to your color picker in HTML

Since the beginning, the web was always interactive. HTML form controls let users create content, upload information and interact with other users and services. Several years ago, our team worked to add the switch control to the HTML web standard, and ship in Safari 17.4. Interoperable support for form controls in vertical writing modes was improved in all browsers as part of the Interop Project, which we also shipped in Safari 17.4.

The color picker was originally added to the web in HTML5. Jeremy Keith wrote about it 15 years ago in his book HTML5 for Web Designers:

Perhaps the most ambitious widget replacement in HTML5 is the color input type. This accepts values in the familiar Hexadecimal format: #000000 for black, #FFFFFF for white… The plan is for browsers to implement native color pickers like the ones in just about every other application on your computer. So far, no browsers have done this [UPDATE: now they have] but when they do, it will be, like, totally awesome.

Back in 2010, the sRGB color space was the only colorspace for the web. And hexadecimal colors were the dominant way to write a color. Since then, a lot has changed. First, CSS3 brought rgba() to the web, allowing colors with a translucent alpha channel for the first time.

Display technology continued to evolve by leaps and bounds. Apple started shipping P3 wide-gamut displays with the 2015 iMac Retina, the 2016 iPad Pro and iPhone 7. Also in 2016, WebKit shipped support for display-P3 in CSS using the color() function. Fast-forward to 2023… thanks to the Interop Project, all browsers finally supported multiple tools in CSS for defining wide gamut colors and alpha transparency, including lab(), oklab(), lch(), and oklch(), as well as color().

But what about the color picker? Can the user of a website or web app choose a color in P3 or a color with alpha transparency? Until recently, the answer was no. The web’s color picker has been stuck in the early 2010s.

The new color picker

We wanted to bring the color picker into the era of wide-gamut color and alpha transparency. So in 2024, we collaborated with the WHATWG to add a more powerful color picker to the HTML web standard. Now <input type="color"> has two new optional attributes — the alpha and colorspace. We shipped support for both in Safari 18.4.

Switching your color pickers to support the P3 color gamut and alpha transparency is easy.

<label>
  Select a color:
  <input type="color" colorspace="display-p3" alpha>
</label>

When you include the colorspace="display-p3" attribute, the browser now allows the user to choose from the full range of colors in the P3 color gamut. Without this attribute, HTML’s default kicks in, and the chosen color will be limited to 8-bits and sRGB. (If you want to explicitly constrain the user’s choice to the more limited set of colors, you can do so with colorspace="limited-srgb".)

When you include the new alpha attribute, the color picker suddenly includes a slider (or other similar interface) to allow the user to choose from a range of alpha transparency. How the control looks and how it’s labeled depends on the operating system. In Safari on iOS, you can see a slider labeled “Opacity”.

Safari 18.4 is the first browser to add support for colorspace and for alpha to the color picker. You can start using these attributes today, even before many users have a browser with support. Older browsers will simply fallback to displaying the options they allowed previously — sRGB without any opacity. You can rely on the elegance of HTML’s built-in nature of progressive enhancement. It works for input type="color" colorspace="display-P3" alpha just the same as it does when you use input type="checkbox" switch to create a switch control on the web. WebKit is still the only browser engine with support for the switch control, but you can still use it on websites today, since it will fallback to a checkbox in browsers without support.

Ever since the color picker was added to HTML, you’ve been able to optionally include a value attribute for input type ="color". It changes the initially-selected color from the default of black to whatever you’d like. Previously, the value attribute only accepted hexadecimal colors. Now, with this change, you can use any of the many ways to define colors. Here are a few examples:

<input type="color" value="papayawhip">
<input type="color" value="oklab(59% 0.1 0.1 / 0.5)" colorspace="display-p3" alpha>
<input type="color" value="color(display-p3 0.3737 0.2103 0.5791)" colorspace="display-p3">

In browsers without support, defining the default value with a new option for declaring a color will simply fallback to black.

We’d love to hear from you

We have more ideas for further enhancing <input type=color> , but we’d love to know what you think to help guide which direction we should go. What else do you need from HTML’s color picker? What should we tackle next?

You can share your thoughts with us on social media, Anne van Kesteren on Bluesky or Jen Simmons on Bluesky / Mastodon. You can also follow Saron Yitbarek on BlueSky, and Jon Davis on Bluesky / Mastodon.