HTML 顏色選擇器-html教學-PHP中文網

HTML 顏色選擇器

建立顏色選擇器的原始碼

Conclusion

首頁

web前端

html教學

HTML 顏色選擇器

PHPz

Sep 04, 2024 pm 04:35 PM

html html5 HTML Tutorial HTML Properties HTML tags

眾所周知，HTML被稱為超文本標記語言，它用於在瀏覽器上顯示文本，並藉助其特殊的輔助腳本（例如JavaScript和CSS），使您的內容變得美觀。顏色編碼是美化 HTML 網頁的一部分。

HTML 中的顏色代碼充當標識符，用於在網路上標識和表示該顏色。常用的顏色編碼是十六進制，表示該顏色的“十六進位”代碼。同樣，還有其他顏色代碼，例如 RGB，“紅、綠、藍”的縮寫。另一種顏色代碼稱為 HSL，是「色調、飽和度、亮度」的縮寫。在選擇您喜歡的顏色時，HSL 是一個額外的優勢。

由於一般情況下優先使用十六進位代碼，因此我們已經盡力解釋了十六進位代碼。十六進位顏色代碼包含一個符號、一個雜湊值 (#) 和一組六位數字或數字。它們採用十六進位數字系統，因此「FF」是最高數字，代表十六進位數字系統中的「255」。

這六位數字包含三對代表 RB 顏色代碼。在這六位數字中，第一對兩位數字代表「紅色」顏色的強度。因此，第一對位置的“FF”將代表最大強度的紅色。「00」用於最低強度，「FF」用於最高強度。為了獲得“綠色”顏色，中間的一對代表強度。

同樣，對於“藍色”，最後一對代表強度。

因此，諸如 #FF0000 之類的十六進位數字將導致
十六進位數字，例如 #00FF00 會導致
十六進位數字，例如 #0000FF 將導致
要獲得黃色（「紅色」和「綠色」的組合），會創建一個類似的十六進位數字，例如#FFFF00。

HTML 顏色選擇器

顏色選擇器建立後，讓使用者「挑選」自己選擇的顏色。最標準的顏色選擇器用於 Windows 應用程序，例如 MS Word 或 Paint 等。大家都熟悉顏色選擇器；你可以透過看下面的圖片來喚起你的記憶：

HTML 顏色選擇器

輸入類型「顏色」用於建立包含顏色的輸入欄位。但某些瀏覽器（例如 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn