path: root/devdocs/html/element%2Finput%2Fcolor.html

<header><h1>&lt;input type="color"&gt;</h1></header><div class="section-content">
<p><a href="../input"><code>&lt;input&gt;</code></a> elements of type <code>color</code> provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in <code>#rrggbb</code> hexadecimal format.</p> <p>Only simple colors (without alpha channel) are allowed though CSS colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel.</p> <p>The element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.</p>
</div>
<h2 id="try_it">Try it</h2>
<div class="section-content"><iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-color.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div>
<h2 id="value">Value</h2>
<div class="section-content">
<p>The <a href="../input#value"><code>value</code></a> of an <a href="../input"><code>&lt;input&gt;</code></a> element of type <code>color</code> is always a string which contains a 7-character string specifying an RGB color in hexadecimal format. While you can input the color in either upper- or lower-case, it will be stored in lower-case form. The value is never in any other form, and is never empty.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Setting the value to anything that isn't a valid, fully-opaque, RGB color <em>in hexadecimal notation</em> will result in the value being set to <code>#000000</code>. In particular, you can't use CSS's standardized color names, or any CSS function syntax, to set the value. This makes sense when you keep in mind that HTML and CSS are separate languages and specifications. In addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g. <code>#009900aa</code>) will also result in the color being set to <code>#000000</code>.</p> </div>
</div>
<h2 id="using_color_inputs">Using color inputs</h2>
<div class="section-content"><p>Inputs of type <code>color</code> are simple, due to the limited number of attributes they support.</p></div>
<h3 id="providing_a_default_color">Providing a default color</h3>
<div class="section-content">
<p>You can update the simple example above to set a default value, so that the color picker is pre-filled with the default color and the color picker (if any) will also default to that color:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="vLWzwNogH1X5LtfFeVF6vQV2tfLbAXClZEX1DW3ITTM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#ff0000<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect2">

<iframe class="sample-code-frame" title="Providing a default color sample" id="frame_providing_a_default_color" width="700" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/color/runner.html?id=providing_a_default_color" loading="lazy"></iframe>
</div> <p>If you don't specify a value, the default is <code>#000000</code>, which is black. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: <code>#rrggbb</code>. If you have colors that are in any other format (such as CSS color names or CSS color functions such as <code>rgb()</code> or <code>rgba()</code>), you'll have to convert them to hexadecimal before setting the <code>value</code>.</p>
</div>
<h3 id="tracking_color_changes">Tracking color changes</h3>
<div class="section-content">
<p>As is the case with other <a href="../input"><code>&lt;input&gt;</code></a> types, there are two events that can be used to detect changes to the color value: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a>. <code>input</code> is fired on the <code>&lt;input&gt;</code> element every time the color changes. The <code>change</code> event is fired when the user dismisses the color picker. In both cases, you can determine the new value of the element by looking at its <a href="../input#value"><code>value</code></a>.</p> <p>Here's an example that watches changes over time to the color value:</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="6Jq0/iJMQpHmzFQeZ1IKBpVSPQaVMe5xd3EYLcxeoRM=" data-language="js">colorPicker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> updateFirst<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
colorPicker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> watchColorPicker<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">watchColorPicker</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    p<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div>
</div>
<h3 id="selecting_the_value">Selecting the value</h3>
<div class="section-content">
<p>When a browser doesn't support a color picker interface, its implementation of color inputs will be a text box that validates the contents automatically to ensure that the value is in the correct format. In this case you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a> method to select the text currently in the edit field.</p> <p>If the browser instead uses a color picker, <code>select()</code> does nothing. You should be aware of this behavior so your code can respond appropriately in either case.</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="TErqbtaiaSCJstUoAAvih2GUVkJnt4L5aVd2ZntIwDo=" data-language="js">colorPicker<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
</div>
</div>
<h2 id="validation">Validation</h2>
<div class="section-content"><p>A color input's value is considered to be invalid if the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> is unable to convert the user's input into seven-character lower-case hexadecimal notation. If and when this is the case, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo-class is applied to the element.</p></div>
<h2 id="example">Example</h2>
<div class="section-content"><p>Let's create an example which does a little more with the color input by tracking the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> events to take the new color and apply it to every <a href="../p"><code>&lt;p&gt;</code></a> element in the document.</p></div>
<h3 id="html">HTML</h3>
<div class="section-content">
<p>The HTML is fairly straightforward — a couple of paragraphs of descriptive material with an <a href="../input"><code>&lt;input&gt;</code></a> of type <code>color</code> with the ID <code>color-picker</code>, which we'll use to change the color of the paragraphs' text.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="mL31VQxT8ARRsMnXoYJkr313RTCyoPc+Thi1Z0FVEjw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
  An example demonstrating the use of the
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity">&amp;lt;</span>input type="color"<span class="token entity named-entity">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> control.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color-picker<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Color:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#ff0000<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color-picker<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>input<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> event). When you close the color
  picker, the <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>change<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span> event fires, and we detect that to change
  every paragraph to the selected color.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</pre>
</div>
</div>
<h3 id="javascript">JavaScript</h3>
<div class="section-content">
<p>First, there's some setup. Here we establish some variables, setting up a variable that contains the color we'll set the color picker to when we first load up, and then setting up a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event"><code>load</code></a> handler to do the main startup work once the page is fully loaded.</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="vM+bFre3WjQcW09wxDXn6i+Zwzc4EZh617qgJWIoias=" data-language="js"><span class="token keyword">let</span> colorPicker<span class="token punctuation">;</span>
<span class="token keyword">const</span> defaultColor <span class="token operator">=</span> <span class="token string">"#0000ff"</span><span class="token punctuation">;</span>

window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"load"</span><span class="token punctuation">,</span> startup<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
</div> <h4 id="initialization">Initialization</h4> <p>Once the page is loaded, our <code>load</code> event handler, <code>startup()</code>, is called:</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="qw/MDBHoqET7v9kwOpTXd5Jzcr7CQll3Ou1XK1V8ZCw=" data-language="js"><span class="token keyword">function</span> <span class="token function">startup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  colorPicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#color-picker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  colorPicker<span class="token punctuation">.</span>value <span class="token operator">=</span> defaultColor<span class="token punctuation">;</span>
  colorPicker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> updateFirst<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  colorPicker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> updateAll<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  colorPicker<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <p>This gets a reference to the color <code>&lt;input&gt;</code> element in a variable called <code>colorPicker</code>, then sets the color input's value to the value in <code>defaultColor</code>. Then the color input's <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> event is set up to call our <code>updateFirst()</code> function, and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> event is set to call <code>updateAll()</code>. These are both seen below.</p> <p>Finally, we call <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a> to select the text content of the color input if the control is implemented as a text field (this has no effect if a color picker interface is provided instead).</p> <h4 id="reacting_to_color_changes">Reacting to color changes</h4> <p>We provide two functions that deal with color changes. The <code>updateFirst()</code> function is called in response to the <code>input</code> event. It changes the color of the first paragraph element in the document to match the new value of the color input. Since <code>input</code> events are fired every time an adjustment is made to the value (for example, if the brightness of the color is increased), these will happen repeatedly as the color picker is used.</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="wisgyGjwniei4NMMrrZvYb+uVgghDy3CcxXGvu+SYDQ=" data-language="js"><span class="token keyword">function</span> <span class="token function">updateFirst</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>p<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    p<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</pre>
</div> <p>When the color picker is dismissed, indicating that the value will not change again (unless the user re-opens the color picker), a <code>change</code> event is sent to the element. We handle that event using the <code>updateAll()</code> function, using <a href="../input#value"><code>Event.target.value</code></a> to obtain the final selected color:</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="48bl7Roq6y6tDvHC/My3JUllc8sOuYIa0HF+faFvvJ0=" data-language="js"><span class="token keyword">function</span> <span class="token function">updateAll</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    p<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <p>This sets the color of every <a href="../p"><code>&lt;p&gt;</code></a> block so that its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> attribute matches the current value of the color input, which is referred to using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/target"><code>event.target</code></a>.</p>
</div>
<h3 id="result">Result</h3>
<div class="section-content">
<p>The final result looks like this:</p>
<div class="code-example" id="sect3">

<iframe class="sample-code-frame" title="Example sample" id="frame_example" width="700" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/color/runner.html?id=example" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">Value</a></strong></td> <td> A 7-character string specifying a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><code>&lt;color&gt;</code></a> in lower-case hexadecimal notation </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a> and <a href="../input#list"><code>list</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td>
<code>list</code> and <code>value</code>
</td> </tr> <tr> <td><strong>DOM interface</strong></td> <td> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></p> </td> </tr> <tr> <td><strong>Methods</strong></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)">HTML Standard <br><small># color-state-(type=color)</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>color</code></th>
<td class="bc-supports-yes">20</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">29</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">12.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">25</td>
<td class="bc-supports-yes"><details><summary>27</summary>Firefox for Android doesn't allow the user to choose a custom color, only one of the predefined ones.</details></td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">12.2</td>
<td class="bc-supports-yes">1.5</td>
</tr>
<tr>
<th><code>autocomplete</code></th>
<td class="bc-supports-yes">20</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">25</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">1.5</td>
</tr>
<tr>
<th><code>list</code></th>
<td class="bc-supports-yes">20</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes"><details><summary>110</summary>The <code>list</code> attribute is supported in Firefox for Windows and Linux. See <a href="https://bugzil.la/960984">bug 960984</a>.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">12.1</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">25</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">12.2</td>
<td class="bc-supports-yes">1.5</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color</a>
  </p>
</div>