HTML 颜色选择器

什么是 HTML 颜色选择器？

HTML 颜色选择器的主要目的是从颜色框中选择一种颜色。在这里，我们提供许多带有外观的颜色框，您可以选择您喜欢的颜色并获取该颜色的 RGB 和十六进制值。我们还可以更改 RGB 和十六进制值以检查颜色流。

HTML 标签 <input type="color"> 提供的用户界面元素允许用户通过可视化颜色选择器界面指定颜色，或通过使用 #rrggbb 十六进制格式在文本字段中输入颜色值。尽管 CSS 颜色支持各种格式，例如颜色名称、函数表示法和带有 alpha 通道的十六进制格式，但只允许基本颜色（不带 alpha 通道）。

用户可以使用类型为 color 的 <input> 元素通过可视化颜色选择器界面定义颜色，或通过以 #rrggbb 十六进制格式直接将其输入到文本字段中。

尽管 CSS 颜色支持各种格式，例如颜色名称、函数表示法和带有 alpha 通道的十六进制格式，但只允许基本颜色（不带 alpha 通道）。

元素呈现方式可能在不同平台或浏览器之间显著不同；例如，它可能是一个简单的文本输入，自动验证颜色信息是否为平台标准颜色选择器，一种独特的个性化颜色选择器窗口，或者以正确格式输入数据的平台标准颜色选择器，或一种特殊类型的自定义颜色选择器窗口。

输出

当我们点击 “头部” 时，会显示如下

输出

当我们点击 “正文” 时，会显示如下

输出

值

类型为 color 的输入元素的值始终是包含 RGB 颜色十六进制规范的 7 个字符的字符串。虽然颜色可以大写或小写输入，但它只会以小写形式保存。该值从不为空或任何其他形式。

注意：如果我们提供的值不是实际的、完全不透明的 RGB 颜色（十六进制表示法），则该值将被设置为 #000000。您不能使用任何 CSS 函数语法或标准 CSS 颜色名称来设置该值。考虑到 HTML 和 CSS 是不同的语言和规范，这是有道理的。

此外，不支持带 alpha 通道的颜色；例如，如果使用九字符十六进制表示法 #009900aa 指定颜色，则颜色也将设置为 #000000。

在颜色中使用输入

由于它们只接受少量特性，所以类型为 color 的输入很简单。

建立默认颜色

上面的简单示例可以修改为提供默认值，这将导致颜色选择器预填充默认颜色，并且还会导致任何颜色选择器默认为该颜色。

在没有值的情况下，黑色（或 #000000）是默认值。该值必须以七字符十六进制表示法写入，该表示法由符号“#”后跟两个数字组成，分别代表红色、绿色和蓝色，如下例所示：#rrggbb。在更改值之前，您必须转换任何其他格式（例如 CSS 颜色名称或 CSS 颜色方法，如 rgb() 或 rgba()）的颜色。

输出

选择一个值

当浏览器不提供颜色选择器界面时，它会将颜色输入实现为带有自动格式验证功能的文本框。可以使用 select() 函数选择编辑字段中的文本。

如果浏览器改用颜色选择器，select() 将无效。您需要了解此行为，以便您的代码在任何情况下都能正常运行。

在 HTML 中使用颜色选择器的优点

• HTML 的颜色选择器允许用户选择和输入颜色。一旦提交，浏览器会将输入的颜色转换为字符串。