<input> 要素のcolor は視覚的なインターフェイス、もしくは#rrggbb の 16 進数表記でテキストを入力することでユーザーが色を指定することができるユーザーインターフェイス要素を提供します。

CSS の色表現には他にも色名、関数表記、アルファ値つきの 16 進表記などがありますが、ここでは（アルファ値のない）基本的な 16 進の色のみが利用できます。

この要素の外見は、ブラウザーやプラットフォームによって大きく異なります。基本的なテキストの入力欄で、入力された色情報が文字列の検証のみを行う入力欄であったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザーやプラットフォームにより大きく異なることがあります。

試してみましょう

<p>Choose your monster's colors:</p><div>  <input type="color" name="head" value="#e66465" />  <label for="head">Head</label></div><div>  <input type="color" name="body" value="#f6b73c" />  <label for="body">Body</label></div>

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

値

<input> 要素で型がcolor のもののvalue は、常に 16 進表記で RGB カラーを特定する 7 文字の文字列になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。

カラー入力欄の使用

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

既定の色の設定

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

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

色を指定していない場合、既定値は#000000、すなわち黒になります。値は 7 文字の 16 進表記、つまり "#" の文字に続いて赤、緑、青を示す各 2 桁が並び、#rrggbb のようになります。他の形式の色を使う場合は (CSS の色名や、rgb() またはhsl() のような CSS 色関数など)、value に設定する前に 16 進表記に変換する必要があります。

色の変更の追跡

ほかの<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();

検証

ユーザーエージェント が値を正しい形式である 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" /><p>  カラーピッカーを動かしたときに段落の色が変わるのを見てください。カラーピッカーに変更を加えると、最初の段落の色が、プレビューとして変化します（<code    >input</code  >  イベントを使用します）。カラー ピッカーを閉じると、<code>change</code>  イベントが実行され、全ての段落が選択された色に変化することが分かります。</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();}

これは 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 属性が color 入力（event.target を使用して参照される）の現在の値と一致するようにするものである。

結果

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

技術的概要

仕様書

ブラウザーの互換性

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace