HTML <input type="color"> 属性値

試してみましょう

<p>色を選択してください:</p>

<div>
  <input type="color" id="foreground" name="foreground" value="#e66465" />
  <label for="foreground">前景色</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">背景色</label>
</div>

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

input {
  margin: 0.4rem;
}

値

CSS 色値です。

追加の属性

グローバル属性や、すべての <input> 要素に共通する input 属性 に加え、color 入力要素は以下の属性も対応しています。

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) です。

色入力フィールドの使用

type が color の入力フィールドは、対応する属性の数が限られているので単純です。

デフォルト色の設定

上記の例でデフォルト値を設定するように変更すると、カラーピッカーがあらかじめデフォルト色で塗りつぶされ、カラーピッカーも（もしあれば）その色がデフォルトになります。

<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 で調べることができます。

次の例は、色の変更をずっと監視します。

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

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

値の選択

ブラウザーがカラーピッカーインターフェイスに対応していない場合、カラー入力の実装はテキストボックスとなり、値が正しい形式であることを確認するために、自動的に中身を検証することになります。この場合、select()メソッドを使用して、現在編集フィールドに使用されているテキストを選択することができます。

ブラウザーがカラーピッカーなどを提供している場合、select() は何もしません。いずれの状況でもコードが動作するように気をつける必要があります。

colorPicker.select();

検証

ユーザーエージェント が値を正しい形式である 7 桁の小文字の 16 進記法に変換できない場合、値は無効であると見なされます。このときは :invalid 擬似クラスが要素に適用されます。

例

change および input イベントを追跡して、新しい色を取得し、その度に文書の <p> 要素に適用する例をもう少し作成してみましょう。

HTML

HTML はかなり単純です。数段落の説明的な素材と、 ID が color-picker で color 型の <input> があり、これを使用して段落のテキストの色を変更することになります。

<p>
  <code>&lt;input type="color"&gt;</code> コントロールを使用する例です。
</p>

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

<p>
  カラーピッカーを動かしたときに段落の色が変わるのを見てください。カラーピッカーに変更を加えると、最初の段落の色が、プレビューとして変化します（<code>input</code> イベントを使用します）。カラーピッカーを閉じると、<code>change</code> イベントが実行され、全ての段落が選択された色に変化することが分かります。
</p>

JavaScript

初期化

次のコードで色入力フィールドを初期化します。

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

これは color の <input> 要素の参照を取得して colorPicker という変数に格納し、色入力フィールドの値を defaultColor を設定します。次に、input イベントに updateFirst() 関数を、change イベントに updateAll() 関数を指定します。これらについては後述します。

最後に select() を呼び出し、色入力のテキストコンテンツを選択します。これはカラーピッカーが提供されていないなどで、テキスト入力フィールドとして表示された場合に利用します。

色の変更に応答させる

色の変更に反応する 2 つの関数を与えています。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 を使用して参照される）の現在の値と一致するようにするものです。

結果

最終的な結果は次のようになります。

技術的概要

仕様書

ブラウザーの互換性

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

関連情報

• HTMLInputElement.alpha
• HTMLInputElement.colorspace