<input type="color">

类型为color的<input> 元素提供一个用户界面元素，允许用户使用视觉颜色选择器界面或在文本字段中以 #rrggbb 十六进制格式输入颜色来指定颜色。

尽管 CSS 颜色具有更多格式，例如颜色名称、函数表示法和具有 alpha 通道的十六进制格式，但只允许使用简单颜色（没有 alpha 通道）。

该元素的表示可能在不同的浏览器和/或平台之间存在很大差异 - 它可能是一个简单的文本输入，它会自动验证以确保颜色信息以正确的格式输入，或者是一个平台标准的颜色选择器，或者某种自定义颜色选择器窗口。

价值

类型为 color 的 value 属性的 <input> 元素始终是一个字符串，其中包含一个 7 个字符的字符串，以十六进制格式指定 RGB 颜色。虽然您可以以大写或小写形式输入颜色，但它将以小写形式存储。该值永远不会采用任何其他形式，并且永远不会为空。

注意：将值设置为任何不是有效的、完全不透明的、以十六进制表示法表示的 RGB 颜色的值会导致值被设置为 #000000。特别是，您不能使用 CSS 的标准颜色名称或任何 CSS 函数语法来设置值。当您记住 HTML 和 CSS 是独立的语言和规范时，这很有意义。此外，不支持具有 alpha 通道的颜色；以 9 个字符的十六进制表示法（例如 #009900aa）指定颜色也会导致颜色被设置为 #000000。

使用颜色输入

类型为 color 的输入很简单，因为它们支持的属性数量有限。

提供默认颜色

您可以更新上面的简单示例以设置默认值，以便颜色选择器预先填充默认颜色，并且颜色选择器（如果有）也会默认为该颜色

html

<input type="color" value="#ff0000" />

如果您没有指定值，则默认值为 #000000，即黑色。该值必须以七个字符的十六进制表示法表示，这意味着“#”字符后跟两个分别代表红色、绿色和蓝色的数字，如下所示：#rrggbb。如果您有以任何其他格式表示的颜色（例如 CSS 颜色名称或 CSS 颜色函数，如 rgb() 或 hsl()），则必须在设置 value 属性之前将其转换为十六进制。

跟踪颜色变化

与其他 <input> 类型一样，有两个事件可用于检测颜色值的更改：input 和 change。input 在每次颜色更改时都会在 <input> 元素上触发。当用户关闭颜色选择器时，会触发 change 事件。在这两种情况下，您都可以通过查看其 value 属性来确定元素的新值。

以下是一个随着时间的推移监控颜色值变化的示例

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

选择值

当浏览器不支持颜色选择器界面时，它对颜色输入的实现将是一个文本框，该文本框会自动验证内容以确保值为正确格式。在这种情况下，您可以使用 select() 方法选择当前在编辑字段中的文本。

如果浏览器改为使用颜色选择器，则 select() 不会执行任何操作。您应该了解此行为，以便您的代码可以在任何一种情况下做出相应的响应。

colorPicker.select();

验证

如果用户代理无法将用户的输入转换为七个字符的小写十六进制表示法，则颜色输入的值将被视为无效。如果出现这种情况，:invalid 伪类将应用于该元素。

示例

让我们创建一个示例，通过跟踪 change 和 input 事件来使用颜色输入，获取新颜色并将其应用于文档中的每个 <p> 元素。

HTML

HTML 非常简单 - 几个描述性段落，带有类型为 color 的 <input> 元素，其 ID 为 color-picker，我们将使用它来更改段落文本的颜色。

html

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

JavaScript

首先，进行一些设置。在这里，我们建立一些变量，设置一个包含我们将颜色选择器设置为的值的变量，然后设置一个 load 处理程序，以便在页面完全加载后执行主要的启动工作。

let colorPicker;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

初始化

页面加载后，将调用我们的 load 事件处理程序 startup()

function startup() {
  colorPicker = document.querySelector("#color-picker");
  colorPicker.value = defaultColor;
  colorPicker.addEventListener("input", updateFirst, false);
  colorPicker.addEventListener("change", updateAll, false);
  colorPicker.select();
}

这将在一个名为 colorPicker 的变量中获取对颜色 <input> 元素的引用，然后将颜色输入的值设置为 defaultColor 中的值。然后，颜色输入的 input 事件被设置为调用我们的 updateFirst() 函数，而 change 事件被设置为调用 updateAll()。这两个函数都在下面看到。

最后，我们调用

响应颜色变化

我们提供了两个处理颜色变化的函数。updateFirst() 函数在响应 input 事件时被调用。它将文档中第一个段落元素的颜色更改为与颜色输入的新值匹配。由于 input 事件在每次调整值时都会触发（例如，如果颜色的亮度增加），因此在使用颜色选择器时，这些事件会反复发生。

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

当颜色选择器被关闭时，表示值不会再改变（除非用户重新打开颜色选择器），一个 change 事件将被发送到元素。我们使用 updateAll() 函数处理该事件，使用 Event.target.value 获取最终选择的颜色。

function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

这将设置每个 <p> 块的颜色，使其 color 属性与颜色输入的当前值匹配，该值使用 event.target 引用。

结果

最终结果如下

技术摘要

价值	一个 7 个字符的字符串，指定一个 `<color>`，使用小写十六进制表示法
事件	`change` 和 `input`
支持的通用属性	`autocomplete` 和 `list`
IDL 属性	`list` 和 `value`
DOM 接口	`HTMLInputElement`
方法	`select()`
隐式 ARIA 角色	没有对应的角色

规范

规范
HTML 标准 # color-state-(type=color)

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

CSS 属性的兼容性