The Current State of HTML5 Forms

The color Type

<input type=color>

Live Demo

Firefox
29+
Safari
8-
Safari Mobile
iOS 8-
Chrome
20+
Opera
11+
IE
11-
Android
4.4
Supported No Support No support Supported Supported No support Supported

Supported Browser Screenshots

Blackberry Browser
Opera 11
Color with datalist
Chrome 34 with <datalist>

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 pattern, required, readonly 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">