HTML 颜色选择器

PHPz原创: 2024-09-04 16:35:02826浏览

众所周知，HTML被称为超文本标记语言，它用于在浏览器上显示文本，并借助其特殊的辅助脚本（例如JavaScript和CSS），使您的内容变得美观。颜色编码是美化 HTML 网页的一部分。

HTML 中的颜色代码充当标识符，用于在网络上标识和表示该颜色。常用的颜色编码是十六进制，表示该颜色的“十六进制”代码。同样，还有其他颜色代码，例如 RGB，“红、绿、蓝”的缩写。另一种颜色代码称为 HSL，是“色调、饱和度、亮度”的缩写。在选择您喜欢的颜色时，HSL 是一个额外的优势。

由于一般情况下优先使用十六进制代码，因此我们已经尽力解释了十六进制代码。十六进制颜色代码包含一个符号、一个哈希值 (#) 和一组六位数字或数字。它们采用十六进制数字系统，因此“FF”是最高数字，代表十六进制数字系统中的“255”。

这六位数字包含三对代表 RB 颜色代码。在这六位数字中，第一对两位数字代表“红色”颜色的强度。因此，第一对位置的“FF”将代表最大强度的红色。 “00”用于最低强度，“FF”用于最高强度。为了获得“绿色”颜色，中间的一对代表强度。

同样，对于“蓝色”，最后一对代表强度。

因此，诸如 #FF0000 之类的十六进制数字将导致
十六进制数字，例如 #00FF00 将导致
十六进制数字，例如 #0000FF 将导致
要获得黄色（“红色”和“绿色”的组合），会创建一个类似的十六进制数字，例如#FFFF00。

HTML 颜色选择器

颜色选择器创建后，允许用户“挑选”自己选择的颜色。最标准的颜色选择器用于 Windows 应用程序，例如 MS Word 或 Paint 等。大家都熟悉颜色选择器；你可以通过看下面的图片来唤起你的记忆：

HTML 颜色选择器

输入类型“color”用于创建包含颜色的输入字段。但某些浏览器（例如 Internet Explorer 11 及更早版本）不支持此输入类型。因此，根据浏览器的不同，当您使用输入类型时会弹出一个颜色选择器。有些浏览器会简单地将此输入字段转换为文本框，如下所示：

HTML 颜色选择器

因此，当使用支持的浏览器时，相同的代码将产生以下颜色选择器调色板。

HTML 颜色选择器

单击该彩色框时，会弹出一个调色板。这里我使用的是 Google Chrome 版本‘78.0.3904.97’，它支持输入类型颜色属性。

HTML 颜色选择器

创建此类颜色选择器的代码将在下一节中解释。

创建颜色选择器的源代码

以下是在 HTML 中创建最简单的颜色选择器的说明。请参阅以下代码：

代码

<body>
<form action="HTMLColorPicker.html">
Select your favorite color:
<input type="color" name="favcolor" id="color" >
</form>
</body>

上面的 HTML 代码包含一个使用名为“color”的输入类型的 FORM 元素。此颜色输入类型创建并显示最简单的颜色选择器，即 Windows 标准颜色选择器。它允许用户选择自己喜欢的颜色。

作为颜色的输入类型创建一个文本框或多个按钮，其默认背景颜色为“黑色”。当我们点击它时，它会为用户显示颜色选择。

观察下面给出的颜色选择器的工作原理：

第 1 步： 单击默认背景色为“黑色”的按钮。

HTML 颜色选择器

上面的代码只是创建了一个如上所示的按钮。

第 2 步： 单击并选择您的新颜色。

HTML 颜色选择器

第3步：我们选择了明亮的绿色进行演示。单击“确定”按钮。

HTML 颜色选择器

In the above screen-shots, you can easily see the selected color is shown in the last screen-shot.

The input type ‘color’ provides this simple functionality of a color picker in HTML5. After picking your color, it is your choice of what the selected color can be used for.

In the following example, I incremented the above example and modified it with some inclusions.

The following example is a combination of HTML and Javascript. This example has a FORM element that uses the input type ‘color’ tag. This FORM, when submitted, our JAVASCRIPT is triggered.

Observe the source code for the FORM element below:

Code:

<body>
<form action="HTMLColorPicker.html">
Select your favorite color:
<input type="color" name="favcolor" id="color" >
<input type="submit" onclick = "ReturnColor()" id="submit" />
</form>
</body>

We added a new line to our previous program. A submit button. This submit button is when clicked; our Java script is triggered, which is given below:

function ReturnColor(c)
{
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code.
document.write(str+c);
}

When the ‘Submit’ button is clicked, our function in javascript is triggered. The above function, ReturnColor (), returns the HEX code, that is, Hexadecimal code for the selected color by our color picker. When the code is executed, the following is our output.

HTML 颜色选择器

The above output is in the HEX code. The 6 numbers represent the inclusion of Red, Green and Blue colors resulting in the selected color. This HEX code can also be converted easily into RGB code.

Similarly, we can save the above code and set it as a background color or a font color for the user. To do so, we added a few more lines of code into our already existing source code.

Following is the complete code, with the HTML body remaining the same:

<script>
function ReturnColor(c)
{
//saving the selected color value by ID
var c= document.getElementById("color").value;
var str= new String ("You chose:");
//The color is saved as its HEX color code
document.write(str+c);
document.write("<br/>");
//A HEX color code can be converted into RGB code
var R=c.slice(1,3);
var G=c.slice(3,5);
var B=c.slice(5);
//Displaying the corresponding RGB code
document.write("In RGB format, RGB("
+ parseInt(R,16) + ","
+ parseInt(G,16) + ","
+ parseInt(B,16) + ")");
document.write("<br/>");
//Setting our selected color as Font color
var color = c;
var str1 = "Your color will appear as this font color";
var str2 = str1.fontcolor(c);
document.write(str2);
//Setting our selected color as Background color
document.write("<div style='border: solid; height: 90px; width: 90px; background-color:"+color+"'/>");
}
</script>

This is our complete script. When the code is executed, and a color is selected, the following is the output that is displayed.

HTML 颜色选择器

Conclusion

There are many ways and many combinations that can help you to create a color picker, that too smart one. For example, with the combination of HTML5 and CSS and JavaScript, you can use yet another element called ‘canvas’ that has its own libraries that helps create a lightweight, small and cross-browser color picker. But that’s for another time.

以上是HTML 颜色选择器的详细内容。更多信息请关注PHP中文网其他相关文章！

Java JavaScript html5 css chrome html for select using Attribute number symbol function default this display background canvas input windows word

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：What is HTML5?下一篇：Scrollbar Color

查看更多