The color Type

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 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">