<input type="color">

<input> 要素の "color" は視覚的なインターフェイス、もしくは "#rrggbb" の16進数表記でテキストを入力することでユーザーが色を指定することができます。色は単純な（アルファ値のない）もののみとなります。値は CSS と互換性があります。

この要素が表示する内容は、文字列の検証のみを行う入力欄であったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザやプラットフォームにより大きく異なることがあります。

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

値

type が "color" の <input> 要素の value は、常に16進表記で RGB カラーを特定する7文字の DOMString になります。大文字を指定した場合、小文字に変換されます。これ以外の値や、空の値になることはありません。

カラー入力を使う

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

既定の色の設定

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

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

色を指定しない場合は、既定で黒を表す "#000000" になります。値は7文字の16進表記、つまり "#" の文字に続いて赤、緑、青を示す各2桁が並び、 "#rrggbb" のようになります。他の書式の色を使う場合は（CSS の色名や、 rgb() または rgba() のような 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(function(p) {
    p.style.color = event.target.value;
  });
}

値の選択

対象のブラウザが <input> 要素の "color" 型をサポートしておらず、代わりにテキスト入力欄に値を直接入力した場合、 select() メソッドで入力欄のテキストを選択することになります。ブラウザがカラーピッカーなどを提供している場合、 select() は何もしません。いずれの状況でもコードが動作するように気をつける必要があります。

colorWell.select();

外観のバリエーション

先述の通り、ブラウザーがカラーピッカーのインターフェイスに対応していない場合、 color 入力の実装は自動的に値を正しい形式になるよう検証を行うテキストボックスとなります。例えば Safari 10.1 では以下のような外見になります。

同じ内容でも Firefox 55 ではこのようになります。

このとき、対象をクリックすることでプラットフォームのカラーピッカーが表示されます(画像は macOS のカラーピッカー)。

検証

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

例

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

HTML

HTMLはとても単純です。  "colorWell" という ID を持つ "color" 型の<input> は、段落の色を変更するために用います。

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

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

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

JavaScript

まずはいくつかの設定を行います。起動時の既定色と、対象の要素を格納する変数を用意し、ページが完全に読み込まれたときに実行される load イベントにより開始させます。

var colorWell;
var defaultColor = "#0000ff";

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

初期化

ページが読み込まれ、load イベントが呼び出されると、startup()が呼ばれます。

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

colorWell に取得された <input> 要素を格納し、valueプロパティに defaultColor を代入します。次に、 input イベントに updateFirst() 関数を、 change イベントに updateAll() 関数を指定します。これらについては後述します。

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

色の変更に反応させる

updateFirst() 関数は input イベントによって呼び出され、ドキュメントの最初にある段落要素の色を変えて、入力欄の新しい値と一致させます。このイベントは値を調整する（例えば明るさを増加させるなど）たびに実行されるため、カラーピッカーが使用される毎に実行されます。

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

カラーピッカーが閉じられると、 change イベントが要素に送信されます。updateAll() 関数によってこれを捕捉し、 Event.target.value によって最終的に選択された色を取得します。

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

これで event.target によって参照されている色入力ボックスの color 属性の色を、すべての <p> ブロックに適用します。

結果

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

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。