<input type="color">

¥Value

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

¥The value of an <input> element of type color is always a string which contains a 7-character string specifying an RGB color in hexadecimal format. While you can input the color in either upper- or lower-case, it will be stored in lower-case form. The value is never in any other form, and is never empty.

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

¥Note: Setting the value to anything that isn't a valid, fully-opaque, RGB color in hexadecimal notation will result in the value being set to #000000. In particular, you can't use CSS's standardized color names, or any CSS function syntax, to set the value. This makes sense when you keep in mind that HTML and CSS are separate languages and specifications. In addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g. #009900aa) will also result in the color being set to #000000.

¥Using color inputs

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

¥Inputs of type color are simple, due to the limited number of attributes they support.

¥Providing a default color

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

¥You can update the simple example above to set a default value, so that the color picker is pre-filled with the default color and the color picker (if any) will also default to that color:

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

如果不指定值，则默认为 #000000，即黑色。该值必须采用七个字符的十六进制表示法，即 "" 字符后跟两个数字，每个数字代表红色、绿色和蓝色，如下所示：#rrggbb。如果你有任何其他格式的颜色（例如 CSS 颜色名称或 CSS 颜色函数，例如 rgb() 或 hsl() ），则必须在设置 value 之前将它们转换为十六进制。

¥If you don't specify a value, the default is #000000, which is black. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: #rrggbb. If you have colors that are in any other format (such as CSS color names or CSS color functions such as rgb() or hsl() ), you'll have to convert them to hexadecimal before setting the value.

¥Tracking color changes

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

¥As is the case with other <input> types, there are two events that can be used to detect changes to the color value: input and change. input is fired on the <input> element every time the color changes. The change event is fired when the user dismisses the color picker. In both cases, you can determine the new value of the element by looking at its value.

下面是一个观察颜色值随时间变化的示例：

¥Here's an example that watches changes over time to the color 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;
  });
}

¥Selecting the value

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

¥When a browser doesn't support a color picker interface, its implementation of color inputs will be a text box that validates the contents automatically to ensure that the value is in the correct format. In this case you can use the select() method to select the text currently in the edit field.

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

¥If the browser instead uses a color picker, select() does nothing. You should be aware of this behavior so your code can respond appropriately in either case.

colorPicker.select();

¥Validation

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

¥A color input's value is considered to be invalid if the user agent is unable to convert the user's input into seven-character lower-case hexadecimal notation. If and when this is the case, the :invalid pseudo-class is applied to the element.

¥Example

让我们创建一个示例，通过跟踪 change 和 input 事件来对颜色输入执行更多操作，以获取新颜色并将其应用到文档中的每个 <p> 元素。

¥Let's create an example which does a little more with the color input by tracking the change and input events to take the new color and apply it to every <p> element in the document.

HTML 相当简单 - 几段描述性材料，其中 <input> 类型为 color，ID 为 color-picker，我们将使用它来更改段落文本的颜色。

¥The HTML is fairly straightforward — a couple of paragraphs of descriptive material with an <input> of type color with the ID color-picker, which we'll use to change the color of the paragraphs' text.

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

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

¥First, there's some setup. Here we establish some variables, setting up a variable that contains the color we'll set the color picker to when we first load up, and then setting up a load handler to do the main startup work once the page is fully loaded.

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

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

初始化

¥Initialization

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

¥Once the page is loaded, our load event handler, startup(), is called:

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()。这些都可以在下面看到。

¥This gets a reference to the color <input> element in a variable called colorPicker, then sets the color input's value to the value in defaultColor. Then the color input's input event is set up to call our updateFirst() function, and the change event is set to call updateAll(). These are both seen below.

最后，如果控件被实现为文本字段，我们调用 select() 来选择颜色输入的文本内容（如果提供了颜色选择器接口，则这没有效果）。

¥Finally, we call select() to select the text content of the color input if the control is implemented as a text field (this has no effect if a color picker interface is provided instead).

对颜色变化做出反应

¥Reacting to color changes

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

¥We provide two functions that deal with color changes. The updateFirst() function is called in response to the input event. It changes the color of the first paragraph element in the document to match the new value of the color input. Since input events are fired every time an adjustment is made to the value (for example, if the brightness of the color is increased), these will happen repeatedly as the color picker is used.

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

当颜色选择器关闭时，表明该值不会再次更改（除非用户重新打开颜色选择器），则会向元素发送 change 事件。我们使用 updateAll() 函数处理该事件，使用 Event.target.value 获取最终选定的颜色：

¥When the color picker is dismissed, indicating that the value will not change again (unless the user re-opens the color picker), a change event is sent to the element. We handle that event using the updateAll() function, using Event.target.value to obtain the final selected color:

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

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

¥This sets the color of every <p> block so that its color attribute matches the current value of the color input, which is referred to using event.target.

¥Result

最终结果如下所示：

¥The final result looks like this:

¥Technical summary

¥See also

• CSS 属性的兼容性