<input type="color">

型別為color的<input> 元素提供一個使用者介面元素，允許使用者使用視覺顏色選擇器介面或在文字欄位中以 #rrggbb 十六進位制格式輸入顏色來指定顏色。

儘管 CSS 顏色具有更多格式，例如顏色名稱、函式表示法和具有 alpha 通道的十六進位制格式，但只允許使用簡單顏色（沒有 alpha 通道）。

該元素的表示可能在不同的瀏覽器和/或平臺之間存在很大差異 - 它可能是一個簡單的文字輸入，它會自動驗證以確保顏色資訊以正確的格式輸入，或者是一個平臺標準的顏色選擇器，或者某種自定義顏色選擇器視窗。

價值

型別為 color 的 value 屬性的 <input> 元素始終是一個字串，其中包含一個 7 個字元的字串，以十六進位制格式指定 RGB 顏色。雖然您可以以大寫或小寫形式輸入顏色，但它將以小寫形式儲存。該值永遠不會採用任何其他形式，並且永遠不會為空。

注意：將值設定為任何不是有效的、完全不透明的、以十六進位制表示法表示的 RGB 顏色的值會導致值被設定為 #000000。特別是，您不能使用 CSS 的標準顏色名稱或任何 CSS 函式語法來設定值。當您記住 HTML 和 CSS 是獨立的語言和規範時，這很有意義。此外，不支援具有 alpha 通道的顏色；以 9 個字元的十六進位制表示法（例如 #009900aa）指定顏色也會導致顏色被設定為 #000000。

使用顏色輸入

型別為 color 的輸入很簡單，因為它們支援的屬性數量有限。

提供預設顏色

您可以更新上面的簡單示例以設定預設值，以便顏色選擇器預先填充預設顏色，並且顏色選擇器（如果有）也會預設為該顏色

html

<input type="color" value="#ff0000" />

如果您沒有指定值，則預設值為 #000000，即黑色。該值必須以七個字元的十六進位制表示法表示，這意味著“#”字元後跟兩個分別代表紅色、綠色和藍色的數字，如下所示：#rrggbb。如果您有以任何其他格式表示的顏色（例如 CSS 顏色名稱或 CSS 顏色函式，如 rgb() 或 hsl()），則必須在設定 value 屬性之前將其轉換為十六進位制。

跟蹤顏色變化

與其他 <input> 型別一樣，有兩個事件可用於檢測顏色值的更改：input 和 change。input 在每次顏色更改時都會在 <input> 元素上觸發。當用戶關閉顏色選擇器時，會觸發 change 事件。在這兩種情況下，您都可以透過檢視其 value 屬性來確定元素的新值。

以下是一個隨著時間的推移監控顏色值變化的示例

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

選擇值

當瀏覽器不支援顏色選擇器介面時，它對顏色輸入的實現將是一個文字框，該文字框會自動驗證內容以確保值為正確格式。在這種情況下，您可以使用 select() 方法選擇當前在編輯欄位中的文字。

如果瀏覽器改為使用顏色選擇器，則 select() 不會執行任何操作。您應該瞭解此行為，以便您的程式碼可以在任何一種情況下做出相應的響應。

colorPicker.select();

驗證

如果使用者代理無法將使用者的輸入轉換為七個字元的小寫十六進位制表示法，則顏色輸入的值將被視為無效。如果出現這種情況，:invalid 偽類將應用於該元素。

示例

讓我們建立一個示例，透過跟蹤 change 和 input 事件來使用顏色輸入，獲取新顏色並將其應用於文件中的每個 <p> 元素。

HTML

HTML 非常簡單 - 幾個描述性段落，帶有型別為 color 的 <input> 元素，其 ID 為 color-picker，我們將使用它來更改段落文字的顏色。

html

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

JavaScript

首先，進行一些設定。在這裡，我們建立一些變數，設定一個包含我們將顏色選擇器設定為的值的變數，然後設定一個 load 處理程式，以便在頁面完全載入後執行主要的啟動工作。

let colorPicker;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

初始化

頁面載入後，將呼叫我們的 load 事件處理程式 startup()

function startup() {
  colorPicker = document.querySelector("#color-picker");
  colorPicker.value = defaultColor;
  colorPicker.addEventListener("input", updateFirst, false);
  colorPicker.addEventListener("change", updateAll, false);
  colorPicker.select();
}

這將在一個名為 colorPicker 的變數中獲取對顏色 <input> 元素的引用，然後將顏色輸入的值設定為 defaultColor 中的值。然後，顏色輸入的 input 事件被設定為呼叫我們的 updateFirst() 函式，而 change 事件被設定為呼叫 updateAll()。這兩個函式都在下面看到。

最後，我們呼叫

響應顏色變化

我們提供了兩個處理顏色變化的函式。updateFirst() 函式在響應 input 事件時被呼叫。它將文件中第一個段落元素的顏色更改為與顏色輸入的新值匹配。由於 input 事件在每次調整值時都會觸發（例如，如果顏色的亮度增加），因此在使用顏色選擇器時，這些事件會反覆發生。

function updateFirst(event) {
  const p = document.querySelector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

當顏色選擇器被關閉時，表示值不會再改變（除非使用者重新開啟顏色選擇器），一個 change 事件將被髮送到元素。我們使用 updateAll() 函式處理該事件，使用 Event.target.value 獲取最終選擇的顏色。

function updateAll(event) {
  document.querySelectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

這將設定每個 <p> 塊的顏色，使其 color 屬性與顏色輸入的當前值匹配，該值使用 event.target 引用。

結果

最終結果如下

技術摘要

價值	一個 7 個字元的字串，指定一個 `<color>`，使用小寫十六進位制表示法
事件	`change` 和 `input`
支援的通用屬性	`autocomplete` 和 `list`
IDL 屬性	`list` 和 `value`
DOM 介面	`HTMLInputElement`
方法	`select()`
隱式 ARIA 角色	沒有對應的角色

規範

規範
HTML 標準 # color-state-(type=color)

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參見

CSS 屬性的相容性