The color Type

The Current State of HTML5 Forms

<input type=color>

Live Demo


 


Firefox
29+

Safari
8-

Safari
iOS 8-

Chrome
20+

Opera
11+

IE
11-

Android
4.4+

The Low Down

Creates a color control, for setting the element’s value to a hexadecimal color value.

  • In supporting browsers, focusing on the form control opens the operating system’s color widget.
  • The default value is #000000.
  • Only 6-digit hexadecimal values are valid. RGB, RGBA, HSL, HSLA, named colors and other key terms are not.
  • The list attribute linking to a datalist of color options, allows you to offer pre-defined colors as options.
  • Works in Opera, except for the first two blink engine versions, for v15 and v16.
  • Fallback is a regular text input.
  • When supported, the patternrequiredreadonly and placeholder attributes are irrelevant and ignored.
  • Until supported in all browsers, include the pattern attribute, along with title and optionally the default value of #000000:
    <input type=color pattern="#[a-f0-9]{6}" title="hexadecimal color" placeholder="#000000">

Our Cookie Policy and Privacy Policy outline how we use cookies to help optimize service, personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.