Javascript Reference - HTML DOM Input Color value Property








The value attribute from input color element specifies the default color for the color picker.

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

The default color is #000000, black.

Browser Support

value Yes No Yes No Yes

Syntax

Return the value property.

var v = 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 value.
Default color is #000000 (black).

Return Value

A String type value representing a color.

Example

The following code shows how to change the default color of a color picker.


<!DOCTYPE html>
<html>
<body>
<!-- w  ww  .j  a va  2  s .  c  o  m-->
A color picker: <input type="color" id="myColor">
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myColor").value="#FF8080";
}
</script>

</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to get the color of a color picker.


<!DOCTYPE html>
<html>
<body>
A color picker: <input type="color" id="myColor" value="#ff8080">
<button onclick="myFunction()">test</button>
<!--from  w  ww . ja v  a  2  s.c  om-->
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myColor").value;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows: