此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
<input type="color">
color 类型的<input> 元素为用户提供了指定颜色的用户界面，或使用可视化颜色选择器，或以#rrggbb 十六进制格式输入颜色值。
虽然 CSS 颜色有很多格式（如颜色名称、功能表记和含有透明通道的十六进制），但是这里只支持简单颜色（无透明通道）。
此元素的外观会因浏览器不同而不同，它可能是一个简单的文本输入，自动验证以确保颜色信息以正确的格式输入，或一个平台标准的颜色选择器，或某种自定义的颜色选择器窗口。
尝试一下
<p>Choose your monster's colors:</p><div> <input type="color" name="head" value="#e66465" /> <label for="head">Head</label></div><div> <input type="color" name="body" value="#f6b73c" /> <label for="body">Body</label></div>p,label { font: 1rem "Fira Sans", sans-serif;}input { margin: 0.4rem;}| 值 | 长度为 7 的指定<color> 值的小写十六进制字符串 |
| 事件 | change 和input |
| 支持的公共属性 | autocomplete 和list |
| IDL 属性 | list 和value |
| DOM 接口 | HTMLInputElement |
| 方法 | select() |
值
color 类型的<input> 元素的value 总是包含一个 7 个字符的字符串，它以 16 进制格式指定 RGB 颜色。虽然你可以用大写字母或小写字母输入颜色，但它将以小写字母形式存储。该值从不以任何其他形式出现，也从不为空。
备注：将该值设置为任何不是有效的、完全不透明的、RGB 颜色的十六进制表示，都将导致该值被设置为#000000。特别是，你不能使用 CSS 的标准化颜色名称或任何 CSS 函数语法来设置该值（记住，HTML 和 CSS 是独立的语言和规范）。此外，不支持带有透明通道的颜色；用 9 个字符的十六进制表示（例如#009900aa）指定颜色，也会导致颜色被设置为#000000。
使用 color 输入
由于有限的支持属性，color 类型的输入内容比较简单。
提供默认颜色
你可以更新上面的简单例子，设置一个默认值，这样颜色井就会预先填上默认的颜色，颜色选择器（如果有的话）也会默认为这个颜色。
<input type="color" value="#ff0000" />如果你没有手动指定的话，其默认值为#000000，即黑色。输入必须为 7 个字符的十六进制表示，意味着需要以“#”符号开始，后跟代表红、绿、蓝的十六进制字符各 2 个（形如#rrggbb）。如果你想输入的颜色是其他格式（比如 CSS 颜色名称或 CSS 颜色函数如rgb() 或rgba() 记法），在设定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() 方法将会什么也不做。因此，需要留心这两种情况下方法行为的差异。
colorWell.select();验证
如果当前的用户代理下，用户输入无法转换为 7 个字符的十六进制 RGB 形式，会被判定为非法输入。在这种情况下，:invalid 伪类会作用于该元素上。
示例
让我们创建一个例子，通过跟踪change 和input 事件，对颜色输入做一些处理，将新颜色应用到文档中的每个<p> 元素。
HTML
这个 HTML 是相当简单的——有若干包含描述材料的段落和一个 ID 为colorWell 的color<input>，我们将用它来改变段落文本的颜色。
<p> An example demonstrating the use of the <code><input type="color"></code> control.</p><label for="colorWell">Color:</label><input type="color" value="#ff0000" /><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 colorWell;const defaultColor = "#0000ff";window.addEventListener("load", startup, false);初始化
一旦页面完全加载，就会调用我们的load 事件处理器startup()：
function startup() { colorWell = document.querySelector("#colorWell"); colorWell.value = defaultColor; colorWell.addEventListener("input", updateFirst, false); colorWell.addEventListener("change", updateAll, false); colorWell.select();}在一个叫做colorWell 的变量中获得对颜色<input> 元素的引用，然后将颜色输入的值设置为defaultColor 中的值。然后颜色输入的input 事件被设置为调用我们的updateFirst() 函数，而change 事件被设置为调用updateAll()。这些都在下面看到。
最后，如果控件被实现为文本字段，我们调用select() 来选择颜色输入的文本内容（如果提供的是颜色选择器接口，这就没有效果）。
对颜色变化作出反应
我们提供了两个处理颜色变化的函数。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 引用的。
结果
最终的运行结果如下所示：
规范
| Specification |
|---|
| HTML # color-state-(type=color) |
| HTML # attr-input-alpha |
| HTML # attr-input-colorspace |