THE WORLD'S LARGEST WEB DEVELOPER SITE

Input Color value Property

❮ Input Color Object

Example

Change the color of a color picker:

document.getElementById("myColor").value = "#FF8040";
Try it Yourself »

Definition and Usage

The value property sets or returns the value of the value attribute of a color picker.

The value attribute specifies the color for the color picker.

Note: If nothing is specified, the default color is #000000 (black).


Browser Support

Property
value Yes 10.0 Yes Yes Yes

Note: The <input type="color"> element does not show any colorpicker in Internet Explorer and Safari.


Syntax

Return the value property:

colorObject.value

Set the value property:

colorObject.value = #hexvalue

Property Values

Value Description
#hexvalue Specifies a color for the color picker.

The value must be a hexadecimal (hex) value: 3 double digit numbers, starting with a # sign (like #FF8040).

Note: Color keywords (like "red" or "blue") are not allowed.

Note: Default color is #000000 (black).


Technical Details

Return Value: A String, representing a color

More Examples

Example

Get the color of a color picker:

var x = document.getElementById("myColor").value;

The result of x will be:

#ff0080
Try it Yourself »

Example

An example that shows the difference between the defaultValue and value property:

var x = document.getElementById("myColor");
var defaultVal = x.defaultValue;
var currentVal = x.value;
Try it Yourself »

Related Pages

HTML tutorial: HTML Colors

HTML tutorial: HTML Color Values (HEX)

HTML reference: HTML <input> value attribute


❮ Input Color Object