1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <input>
  6. <input type="color">

<input type="color">

型別為 color 的 <input> 元素提供了一個使用者介面元素，讓使用者可以透過視覺顏色選擇器介面或透過將顏色輸入到 CSS 顏色值格式的文字欄位中來指定顏色。

該元素的呈現可能因瀏覽器和/或平臺而異——它可能是一個基本的文字輸入，自動驗證以確保顏色資訊以正確的格式輸入，或者是一個平臺標準的顏色選擇器，或者某種自定義的顏色選擇器視窗。

試一試

<p>Choose your colors:</p>

<div>
  <input type="color" id="foreground" name="foreground" value="#e66465" />
  <label for="foreground">Foreground color</label>
</div>

<div>
  <input
    type="color"
    id="background"
    name="background"
    value="oklab(50% 0.1 0.1 / 0.5)"
    colorspace="display-p3"
    alpha />
  <label for="background">Background color</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

值

CSS 顏色值。

注意： 歷史上，只允許使用基本的十六進位制顏色（不帶 alpha 通道）。現在，可以使用任何 CSS 顏色格式，包括命名顏色、函式表示法和帶 alpha 通道的十六進位制顏色。如果省略 value 或其無效，則預設值為 #000000（黑色）。

附加屬性

除了全域性屬性和所有<input>元素共有的輸入屬性之外，color輸入還支援以下屬性：

alpha

如果存在，這是一個布林屬性，表示顏色'的 alpha 分量可以由終端使用者操作，並且不必完全不透明。

colorspace

定義顏色的色彩空間，並暗示顏色選擇器小部件所需的使用者代理介面。可能的列舉值為

  • "limited-srgb"：顏色在 sRGB 色彩空間中。這包括 rgb()、hsl()、hwb() 和 <hex-color> 值。顏色值限制為每個 r、g 和 b 分量 8 位。這是預設值。
  • "display-p3"：Display P3 色彩空間，例如，color(display-p3 1.84 -0.19 0.72 / 0.6)

使用顏色輸入

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

提供預設顏色

您可以更新上面的示例來設定一個預設值，這樣顏色選擇器將預填充預設顏色，並且顏色選擇器（如果有的話）也將預設選擇該顏色。

html
<input type="color" value="#ff0000" />
<input
  type="color"
  id="body"
  name="body"
  value="oklab(50% 0.1 0.1 / 0.5)"
  colorspace="display-p3"
  alpha />

如果您未指定值，或者該值無效或瀏覽器不支援，則該值預設為 #000000，即不透明的黑色。

追蹤顏色變化

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

這是一個隨著時間追蹤顏色值變化的示例

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

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

選擇值

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

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

js
colorPicker.select();

驗證

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

示例

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

HTML

HTML 相當簡單——幾段描述性材料，帶有一個 ID 為 color-picker 的 color 型別 <input>，我們將用它來更改段落文字的顏色。

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

初始化

以下程式碼初始化顏色輸入

js
const defaultColor = "#0000ff";
const colorPicker = document.querySelector("#color-picker");
colorPicker.value = defaultColor;
colorPicker.addEventListener("input", updateFirst);
colorPicker.addEventListener("change", updateAll);
colorPicker.select();

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

最後，如果控制元件實現為文字欄位（如果提供了顏色選擇器介面，則此操作無效），我們呼叫 select() 來選擇顏色輸入的文字內容。

對顏色變化的反應

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

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

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

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

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

結果

最終結果如下

技術摘要

值 任何 CSS <color> 值，無論採用何種表示法。
事件 change 和 input
支援的常見屬性 autocomplete 和 list
IDL 屬性 alpha、colorSpace、list 和 value
DOM 介面 HTMLInputElement
方法 select()
隱式 ARIA 角色 沒有對應的角色

規範

規範
HTML
# 顏色狀態（type=color）
HTML
# 屬性輸入阿爾法
HTML
# 屬性輸入顏色空間

瀏覽器相容性

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ，由 MDN 貢獻者修訂。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.