眾所周知，HTML被稱為超文本標(biāo)記語(yǔ)言，它用于在瀏覽器上顯示文本，并借助其特殊的輔助腳本（例如JavaScript和CSS），使您的內(nèi)容變得美觀。顏色編碼是美化 HTML 網(wǎng)頁(yè)的一部分。
HTML 中的顏色代碼充當(dāng)標(biāo)識(shí)符，用于在網(wǎng)絡(luò)上標(biāo)識(shí)和表示該顏色。常用的顏色編碼是十六進(jìn)制，表示該顏色的“十六進(jìn)制”代碼。同樣，還有其他顏色代碼，例如 RGB，“紅、綠、藍(lán)”的縮寫(xiě)。另一種顏色代碼稱為 HSL，是“色調(diào)、飽和度、亮度”的縮寫(xiě)。在選擇您喜歡的顏色時(shí)，HSL 是一個(gè)額外的優(yōu)勢(shì)。
由于一般情況下優(yōu)先使用十六進(jìn)制代碼，因此我們已經(jīng)盡力解釋了十六進(jìn)制代碼。十六進(jìn)制顏色代碼包含一個(gè)符號(hào)、一個(gè)哈希值 (#) 和一組六位數(shù)字或數(shù)字。它們采用十六進(jìn)制數(shù)字系統(tǒng)，因此“FF”是最高數(shù)字，代表十六進(jìn)制數(shù)字系統(tǒng)中的“255”。
這六位數(shù)字包含三對(duì)代表 RB 顏色代碼。在這六位數(shù)字中，第一對(duì)兩位數(shù)字代表“紅色”顏色的強(qiáng)度。因此，第一對(duì)位置的“FF”將代表最大強(qiáng)度的紅色。 “00”用于最低強(qiáng)度，“FF”用于最高強(qiáng)度。為了獲得“綠色”顏色，中間的一對(duì)代表強(qiáng)度。
同樣，對(duì)于“藍(lán)色”，最后一對(duì)代表強(qiáng)度。
- 因此，諸如 #FF0000 之類的十六進(jìn)制數(shù)字將導(dǎo)致??
- 十六進(jìn)制數(shù)字，例如 #00FF00 將導(dǎo)致? ??
- 十六進(jìn)制數(shù)字，例如 #0000FF 將導(dǎo)致??
- 要獲得黃色（“紅色”和“綠色”的組合），會(huì)創(chuàng)建一個(gè)類似的十六進(jìn)制數(shù)字，例如#FFFF00。
HTML 顏色選擇器
顏色選擇器創(chuàng)建后，允許用戶“挑選”自己選擇的顏色。最標(biāo)準(zhǔn)的顏色選擇器用于 Windows 應(yīng)用程序，例如 MS Word 或 Paint 等。大家都熟悉顏色選擇器；你可以通過(guò)看下面的圖片來(lái)喚起你的記憶：
輸入類型“color”用于創(chuàng)建包含顏色的輸入字段。但某些瀏覽器（例如 Internet Explorer 11 及更早版本）不支持此輸入類型。因此，根據(jù)瀏覽器的不同，當(dāng)您使用輸入類型時(shí)會(huì)彈出一個(gè)顏色選擇器。有些瀏覽器會(huì)簡(jiǎn)單地將此輸入字段轉(zhuǎn)換為文本框，如下所示：
因此，當(dāng)使用支持的瀏覽器時(shí)，相同的代碼將產(chǎn)生以下顏色選擇器調(diào)色板。
單擊該彩色框時(shí)，會(huì)彈出一個(gè)調(diào)色板。這里我使用的是 Google Chrome 版本‘78.0.3904.97’，它支持輸入類型顏色屬性。
創(chuàng)建此類顏色選擇器的代碼將在下一節(jié)中解釋。
創(chuàng)建顏色選擇器的源代碼
以下是在 HTML 中創(chuàng)建最簡(jiǎn)單的顏色選擇器的說(shuō)明。請(qǐng)參閱以下代碼：
代碼
<body>
<form action="HTMLColorPicker.html">
Select your favorite color:
<input type="color" name="favcolor" id="color" >
</form>
</body>
上面的 HTML 代碼包含一個(gè)使用名為“color”的輸入類型的 FORM 元素。此顏色輸入類型創(chuàng)建并顯示最簡(jiǎn)單的顏色選擇器，即 Windows 標(biāo)準(zhǔn)顏色選擇器。它允許用戶選擇自己喜歡的顏色。
作為顏色的輸入類型創(chuàng)建一個(gè)文本框或多個(gè)按鈕，其默認(rèn)背景顏色為“黑色”。當(dāng)我們點(diǎn)擊它時(shí)，它會(huì)為用戶顯示顏色選擇。
觀察下面給出的顏色選擇器的工作原理：
第 1 步： 單擊默認(rèn)背景色為“黑色”的按鈕。
上面的代碼只是創(chuàng)建了一個(gè)如上所示的按鈕。
第 2 步： 單擊并選擇您的新顏色。
第3步：我們選擇了明亮的綠色進(jìn)行演示。單擊“確定”按鈕。
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.
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.
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 顏色選擇器的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！