眾所周知，HTML被稱為超文本標(biāo)記語(yǔ)言，它用於在瀏覽器上顯示文本，並藉助其特殊的輔助腳本（例如JavaScript和CSS），使您的內(nèi)容變得美觀。顏色編碼是美化 HTML 網(wǎng)頁(yè)的一部分。
HTML 中的顏色代碼充當(dāng)標(biāo)識(shí)符，用於在網(wǎng)路上標(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ù)字。它們採(cǎi)用十六進(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 會(huì)導(dǎo)致? ??
- 十六進(jìn)位數(shù)字，例如 #0000FF 將導(dǎo)致??
- 要獲得黃色（「紅色」和「綠色」的組合），會(huì)創(chuàng)建一個(gè)類似的十六進(jìn)位數(shù)字，例如#FFFF00。
HTML 顏色選擇器
顏色選擇器建立後，讓使用者「挑選」自己選擇的顏色。最標(biāo)準(zhǔn)的顏色選擇器用於 Windows 應(yīng)用程序，例如 MS Word 或 Paint 等。大家都熟悉顏色選擇器；你可以透過(guò)看下面的圖片來(lái)喚起你的記憶：
輸入類型「顏色」用於建立包含顏色的輸入欄位。但某些瀏覽器（例如?? Internet Explorer 11 及更早版本）不支援此輸入類型。因此，根據(jù)瀏覽器的不同，當(dāng)您使用輸入類型時(shí)會(huì)彈出一個(gè)顏色選擇器。有些瀏覽器會(huì)簡(jiǎn)單地將此輸入欄位轉(zhuǎn)換為文字框，如下所示：
因此，當(dāng)使用支援的瀏覽器時(shí)，相同的程式碼將產(chǎn)生以下顏色選擇器調(diào)色板。
當(dāng)點(diǎn)選該彩色框時(shí)，會(huì)彈出一個(gè)調(diào)色盤(pán)。這裡我使用的是 Google Chrome 版本‘78.0.3904.97’，它支援輸入類型顏色屬性。
建立此類顏色選擇器的程式碼將在下一節(jié)中解釋。
建立顏色選擇器的原始碼
以下是在 HTML 中建立最簡(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 元素。此顏色輸入類型可建立並顯示最簡(jiǎn)單的顏色選擇器，即 Windows 標(biāo)準(zhǔn)顏色選擇器。它允許用戶選擇自己喜歡的顏色。
作為顏色的輸入類型建立一個(gè)文字方塊或多個(gè)按鈕，其預(yù)設(shè)背景顏色為「黑色」。當(dāng)我們點(diǎn)擊它時(shí)，它會(huì)為用戶顯示顏色選擇。
觀察下面給出的顏色選擇器的工作原理：
第 1 步： 點(diǎn)選預(yù)設(shè)背景色為「黑色」的按鈕。
上面的程式碼只是創(chuàng)建了一個(gè)如上所示的按鈕。
第 2 步： 點(diǎn)選並選擇您的新顏色。
第3步：我們選擇了明亮的綠色來(lái)示範(fàn)。點(diǎ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)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門(mén)話題
構(gòu)建網(wǎng)頁(yè)的HTML元素是什麼？
Jul 03, 2025 am 02:34 AM
網(wǎng)頁(yè)結(jié)構(gòu)需核心HTML元素支撐，1.頁(yè)面整體結(jié)構(gòu)由、、構(gòu)成，其中為根元素，存放元信息，展示內(nèi)容；2.內(nèi)容組織依賴標(biāo)題（-）、段落（）及區(qū)塊標(biāo)籤（如、）以提升條理與SEO；3.導(dǎo)航通過(guò)與實(shí)現(xiàn)，常用組織鏈接並輔以aria-current屬性增強(qiáng)可訪問(wèn)性；4.表單交互涉及、、與，確保用戶輸入與提交功能完整。正確使用這些元素能提升頁(yè)面清晰度、維護(hù)性及搜索引擎優(yōu)化。
使用HTML5服務(wù)器序列事件處理重新連接和錯(cuò)誤。
Jul 03, 2025 am 02:28 AM
使用HTML5SSE時(shí)，處理重連和錯(cuò)誤的方法包括：1.了解默認(rèn)重連機(jī)制，EventSource默認(rèn)在連接中斷後3秒重試，可通過(guò)retry字段自定義間隔；2.監(jiān)聽(tīng)error事件以應(yīng)對(duì)連接失敗或解析錯(cuò)誤，區(qū)分錯(cuò)誤類型並執(zhí)行相應(yīng)邏輯，如網(wǎng)絡(luò)問(wèn)題依賴自動(dòng)重連、服務(wù)器錯(cuò)誤手動(dòng)延遲重連、認(rèn)證失效刷新token；3.主動(dòng)控制重連邏輯，如手動(dòng)關(guān)閉並重建連接、設(shè)置最大重試次數(shù)、結(jié)合navigator.onLine判斷網(wǎng)絡(luò)狀態(tài)以優(yōu)化重試策略。這些措施可提升應(yīng)用穩(wěn)定性與用戶體驗(yàn)。
為現(xiàn)代頁(yè)面宣布正確的HTML5 Doctype。
Jul 03, 2025 am 02:35 AM
Doctype是告訴瀏覽器用哪種HTML標(biāo)準(zhǔn)解析頁(yè)面的聲明，現(xiàn)代網(wǎng)頁(yè)只需在HTML文件最開(kāi)頭寫(xiě)。其作用是確保瀏覽器以標(biāo)準(zhǔn)模式而非怪異模式渲染頁(yè)面，且必須位於第一行，前面不能有空格或註釋；正確寫(xiě)法僅有一種，不推薦使用舊版本或其他變體；其他如charset、viewport等應(yīng)放在部分。
使用HTML屬性實(shí)現(xiàn)客戶端表單驗(yàn)證。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationCanbedOnewithOutJavaScriptbyusinghtmlattributes.1）useRequiredToEnforCemandatoryField.2）validateMailsAndUrllSwithTyPeatTributesLikeEmailOrurl，orusepatternwithRegegexforCustomAlorurl
用HTML5語(yǔ)義標(biāo)記和微數(shù)據(jù)改善SEO。
Jul 03, 2025 am 01:16 AM
使用HTML5語(yǔ)義標(biāo)籤和Microdata可提升SEO，因?yàn)樗鼛椭阉饕娓美斫忭?yè)面結(jié)構(gòu)與內(nèi)容含義。 1.使用HTML5語(yǔ)義標(biāo)籤如、、、、和來(lái)明確頁(yè)面區(qū)塊功能，有助於搜索引擎建立更準(zhǔn)確的頁(yè)面模型；2.添加Microdata結(jié)構(gòu)化數(shù)據(jù)標(biāo)註具體內(nèi)容，例如文章作者、發(fā)布日期、商品價(jià)格等，使搜索引擎能識(shí)別信息類型並用於富媒體摘要展示；3.注意正確使用標(biāo)籤避免混淆、避免重複標(biāo)記、測(cè)試結(jié)構(gòu)化數(shù)據(jù)有效性、定期更新以適應(yīng)schema.org的變化，並結(jié)合其他SEO手段長(zhǎng)期優(yōu)化。
如何使用HTML將選項(xiàng)分組？
Jul 04, 2025 am 03:16 AM
在HTML中使用標(biāo)籤可以對(duì)下拉菜單中的選項(xiàng)進(jìn)行分組。具體方法是用包裹一組元素，並通過(guò)label屬性定義組名，如：1.包含蘋(píng)果、香蕉、橙子等選項(xiàng)；2.包含胡蘿蔔、西蘭花等選項(xiàng)；3.每個(gè)為一個(gè)獨(dú)立分組，組內(nèi)選項(xiàng)自動(dòng)縮進(jìn)。注意事項(xiàng)包括：①不支持嵌套；②可通過(guò)disabled屬性禁用整個(gè)組；③樣式受限需結(jié)合CSS或第三方庫(kù)美化；可使用Select2等插件增強(qiáng)功能。
使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕
Jul 07, 2025 am 02:31 AM
要使用HTML的button元素實(shí)現(xiàn)可點(diǎn)擊按鈕，首先需掌握其基本用法與常見(jiàn)註意事項(xiàng)。 1.使用標(biāo)籤創(chuàng)建按鈕，並通過(guò)type屬性定義行為（如button、submit、reset），默認(rèn)為submit；2.通過(guò)JavaScript添加交互功能，可內(nèi)聯(lián)寫(xiě)法或通過(guò)ID綁定事件監(jiān)聽(tīng)器以提升維護(hù)性；3.利用CSS自定義樣式，包括背景色、邊框、圓角及hover/active狀態(tài)效果，增強(qiáng)用戶體驗(yàn)；4.注意常見(jiàn)問(wèn)題：確保未啟用disabled屬性、正確綁定JS事件、避免佈局遮擋，並藉助開(kāi)發(fā)者工具排查異常。掌握這
將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。
Jul 12, 2025 am 03:01 AM
HTML5、CSS和JavaScript應(yīng)通過(guò)語(yǔ)義化標(biāo)籤、合理加載順序與解耦設(shè)計(jì)高效結(jié)合。 1.使用HTML5語(yǔ)義化標(biāo)籤如、提升結(jié)構(gòu)清晰度與可維護(hù)性，利於SEO和無(wú)障礙訪問(wèn)；2.CSS應(yīng)置於中，使用外部文件並按模塊拆分，避免內(nèi)聯(lián)樣式與延遲加載問(wèn)題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強(qiáng)依賴，通過(guò)data-*屬性驅(qū)動(dòng)行為、類名控制狀態(tài)，統(tǒng)一命名規(guī)範(fàn)提升協(xié)作效率。這些方法能有效優(yōu)化頁(yè)面性能與團(tuán)隊(duì)協(xié)作。
