在 HTML 中为颜色选择器添加广色域 P3 和 Alpha 透明度

2025 年 5 月 7 日

作者：Anne van Kesteren 和 Jen Simmons

自诞生以来，Web 始终是交互式的。HTML 表单控件允许用户创建内容、上传信息并与其他用户和服务交互。几年前，我们的团队致力于将开关控件添加到 HTML Web 标准，并在 Safari 17.4 中发布。作为 Interop 项目的一部分，所有浏览器中对垂直书写模式下的表单控件的互操作性支持得到了改进，我们也在 Safari 17.4 中发布了此功能。

颜色选择器最初是在 HTML5 中添加到 Web 上的。Jeremy Keith 在 15 年前他的书《HTML5 for Web Designers》中写到了它。

HTML5 中最雄心勃勃的控件替换也许是 color 输入类型。它接受熟悉的十六进制格式的值：#000000 代表黑色，#FFFFFF 代表白色…… 计划是让浏览器实现本机颜色选择器，就像你计算机上的几乎所有其他应用程序中的那样。到目前为止，还没有浏览器这样做 [更新：现在有了]，但当它们这样做时，那将是，非常棒。

早在 2010 年，sRGB 色彩空间是 Web 唯一的色彩空间。十六进制颜色是编写颜色的主要方式。从那时起，许多事情都发生了变化。首先，CSS3 将 rgba() 带到了 Web 上，首次允许颜色具有半透明的 alpha 通道。

显示技术持续飞速发展。苹果公司从 2015 年的 iMac Retina、2016 年的 iPad Pro 和 iPhone 7 开始配备 P3 广色域显示器。同样在 2016 年，WebKit 使用 color() 函数在 CSS 中支持了 display-P3。快进到 2023 年…… 感谢 Interop 项目，所有浏览器最终都支持了 CSS 中的多种工具来定义广色域颜色和 Alpha 透明度，包括 lab()、oklab()、lch() 和 oklch()，以及 color()。

但颜色选择器呢？网站或 Web 应用的用户能否选择 P3 中的颜色或带有 Alpha 透明度的颜色？直到最近，答案是否定的。Web 的颜色选择器一直停留在 2010 年代早期。

新的颜色选择器

我们希望将颜色选择器带入广色域颜色和 Alpha 透明度时代。因此，在 2024 年，我们与 WHATWG 合作，为 HTML Web 标准添加了更强大的颜色选择器。现在 <input type="color"> 有两个新的可选属性—— alpha 和 colorspace。我们已在 Safari 18.4 中提供了对两者的支持。

将颜色选择器切换为支持 P3 色域和 Alpha 透明度非常简单。

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

当您包含 colorspace="display-p3" 属性时，浏览器现在允许用户从 P3 色域的全部颜色范围内进行选择。如果没有此属性，HTML 的默认设置将生效，所选颜色将限制为 8 位和 sRGB。（如果您想将用户的选择明确限制到更小的颜色集，可以使用 colorspace="limited-srgb" 来实现。）

iPhone showing a color picker. Three sliders provide options for red, green, blue. The Display P3 Hex Color number is in an editable box. And there's a slider for opacity. — 在 Safari 18.4 中试用支持选择不透明度的新广色域 P3 颜色选择器

当您包含新的 alpha 属性时，颜色选择器会突然包含一个滑块（或其他类似界面），允许用户从一系列 Alpha 透明度中进行选择。控件的外观和标签取决于操作系统。在 iOS 上的 Safari 中，您可以看到一个标有“不透明度”的滑块。

Safari 18.4 是第一个为颜色选择器添加colorspace和alpha支持的浏览器。即使在许多用户还没有支持这些属性的浏览器时，您今天就可以开始使用它们。旧版浏览器将简单地回退到显示它们之前允许的选项——没有不透明度的 sRGB。您可以依赖 HTML 内置的渐进增强的优雅特性。它对于 input type="color" colorspace="display-P3" alpha 的工作方式与您使用 input type="checkbox" switch 在 Web 上创建开关控件时的工作方式相同。WebKit 仍然是唯一支持开关控件的浏览器引擎，但您今天仍然可以在网站上使用它，因为它会在不支持的浏览器中回退到复选框。

自从颜色选择器添加到 HTML 以来，您就可以选择性地为 input type ="color" 包含一个 value 属性。它将初始选定的颜色从默认的黑色更改为您想要的任何颜色。以前，value 属性只接受十六进制颜色。现在，通过此更改，您可以使用多种方式定义颜色。以下是一些示例：

<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">

在不支持的浏览器中，使用新选项定义默认 value 来声明颜色将简单地回退到黑色。

我们期待您的反馈

我们有更多关于进一步增强 <input type=color> 的想法，但我们很乐意了解您的想法，以帮助指导我们应该朝哪个方向发展。您对 HTML 的颜色选择器还有什么需求？我们接下来应该解决什么问题？

您可以通过社交媒体与我们分享您的想法，Anne van Kesteren 在 Bluesky 上，或 Jen Simmons 在 Bluesky / Mastodon 上。您还可以在 BlueSky 上关注 Saron Yitbarek，以及在 Bluesky / Mastodon 上关注 Jon Davis。