<input type="color">

<input> 要素の color は視覚的なインターフェイス、もしくは #rrggbb の16進数表記でテキストを入力することでユーザーが色を指定することができます。 CSS の色表現には色名、関数表記、アルファ値つきの16進表記などがありますが、ここでは単純な (アルファ値のない) もののみが利用できます。。

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

小文字の16進数で <color> を定義する7文字の DOMString
イベント change および input
対応する共通属性 autocomplete および list
IDL 属性 list および value
メソッド select()

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

メモ: 有効な、不透明な16進表現の RGB カラーではない値を設定した場合は、結果的に #000000 に設定されます。特に、 CSS で標準化されている色名や、 CSS 関数を値の設定に使用することはできません。 HTML と CSS は別な言語や仕様であることを考慮していただければお分かりでしょう。加えて、アルファチャネルのある色はサポートされていません。 #009900aa のような9文字の16進表記で色を設定すると、結果的に #000000 に設定されます。

カラー入力欄の使用

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 では以下のような外見になります。

Safari で撮った例のスクリーンショット

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

macOS の Firefox 55 で撮った例のスクリーンショット

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

Firefox Mac でカラーピッカーを開いたこの要素のスクリーンショット。

検証

ユーザーエージェント が値を正しい形式に変換できない場合、値は無効であると見なされます。このときは :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> ブロックに適用します。

結果

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

仕様書

仕様書 状態 備考
HTML Living Standard 現行の標準 初回定義
HTML5 勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
type="color"Chrome 完全対応 20Edge 完全対応 14Firefox 完全対応 29
補足
完全対応 29
補足
補足 Firefox doesn't yet support inputs of type color on Windows Touch.
IE 未対応 なしOpera 完全対応 12Safari 完全対応 12.1WebView Android 完全対応 4.4Chrome Android ? Firefox Android 完全対応 27Opera Android 完全対応 ありSafari iOS 完全対応 12.2Samsung Internet Android ?
autocompleteChrome 完全対応 20Edge 完全対応 14Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 960989 for the status of support for the autocomplete attribute in Firefox.
IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 960984 for the status of support for the list attribute in Firefox.
Opera Android ? Safari iOS ? Samsung Internet Android ?
listChrome 完全対応 20Edge 完全対応 14Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 960984 for the status of support for the list attribute in Firefox.
IE 未対応 なしOpera ? Safari 完全対応 12.1WebView Android ? Chrome Android ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 960984 for the status of support for the list attribute in Firefox.
Opera Android ? Safari iOS 完全対応 12.2Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。