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

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

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

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

Note: 有効な、不透明な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 勧告  
HTML 4.01 Specification 勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 20Edge 完全対応 14Firefox 完全対応 29
補足
完全対応 29
補足
補足 Firefox doesn't yet support inputs of type color on Windows Touch.
IE 未対応 なしOpera 完全対応 12Safari 完全対応 10WebView Android 完全対応 4.4Chrome Android ? Edge Mobile 完全対応 14Firefox Android 完全対応 27Opera 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 ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 14Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 960984 for the status of support for the list attribute in Firefox.
Opera Android ? Safari iOS 未対応 なしSamsung 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 ? Edge Mobile 完全対応 14Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 960984 for the status of support for the list attribute in Firefox.
Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

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

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, TNKSoftware
最終更新者: mfuji09,